Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/content/docs/de/basics/astro-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Astro-Komponenten sind extrem flexibel. Eine Astro-Komponente kann so klein sein

Das Wichtigste, was du über Astro-Komponenten wissen musst, ist, dass sie **nicht auf dem Client gerendert werden**. Sie werden entweder während der Erstellung oder bei Bedarf in HTML gerendert. Du kannst JavaScript-Code in das Frontmatter deiner Komponente einfügen, der dann aus der endgültigen Seite, die an die Browser deiner Nutzer gesendet wird, entfernt wird. Das Ergebnis ist eine schnellere Website, die standardmäßig keinen JavaScript-Fußabdruck hinterlässt.

Wenn deine Astro-Komponente clientseitige Interaktivität benötigt, kannst du [Standard-HTML-`<script>`-Tags](/de/guides/client-side-scripts/) oder [UI-Framework-Komponenten](/de/guides/framework-components/#interaktive-komponenten-hydratisieren) als „Client-Inseln“ hinzufügen.
Wenn deine Astro-Komponente clientseitige Interaktivität benötigt, kannst du [Standard-HTML-`<script>`-Tags](/de/guides/client-side-scripts/) oder [UI-Framework-Komponenten](/de/guides/framework-components/#hydrating-interactive-components) als „Client-Inseln“ hinzufügen.

## Komponentenstruktur

Expand Down Expand Up @@ -72,7 +72,7 @@ Unterhalb des Komponentenskripts befindet sich die Komponentenvorlage. Sie besti

Wenn du hier einfaches HTML schreibst, wird deine Komponente dieses HTML auf jeder Astro-Seite rendern, auf der sie importiert und verwendet wird.

Die [Syntax der Astro-Komponentenvorlage](/de/reference/astro-syntax/) unterstützt jedoch auch **JavaScript-Ausdrücke**, Astro-[`<style>`](/de/guides/styling/#styles-stile-in-astro) und [`<script>`](/de/guides/client-side-scripts/#verwendung-von-script-in-astro)-Tags, **importierte Komponenten** und [**spezielle Astro-Direktiven**](/de/reference/directives-reference/). Daten und Werte, die im Komponentenskript definiert werden, können in der Komponentenvorlage verwendet werden, um dynamisch erstelltes HTML zu erzeugen.
Die [Syntax der Astro-Komponentenvorlage](/de/reference/astro-syntax/) unterstützt jedoch auch **JavaScript-Ausdrücke**, Astro-[`<style>`](/de/guides/styling/#styling-in-astro) und [`<script>`](/de/guides/client-side-scripts/#client-side-scripts)-Tags, **importierte Komponenten** und [**spezielle Astro-Direktiven**](/de/reference/directives-reference/). Daten und Werte, die im Komponentenskript definiert werden, können in der Komponentenvorlage verwendet werden, um dynamisch erstelltes HTML zu erzeugen.

```astro title="src/components/MeineLieblingspokemon.astro"
---
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/de/basics/astro-pages.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Astro unterstützt die folgenden Dateitypen im Verzeichnis `src/pages/`:

Astro nutzt eine Routing-Strategie, die **dateibasiertes Routing** genannt wird. Jede Datei in deinem `src/pages/`-Verzeichnis wird anhand ihres Dateipfads zu einem Endpunkt auf deiner Website.

Mit [dynamischen Routing](/de/guides/routing/#dynamische-routen) kann eine einzelne Datei auch mehrere Seiten erzeugen. So kannst du auch dann Seiten erstellen, wenn sich deine Inhalte außerhalb des speziellen `/pages/`-Verzeichnisses befinden, z. B. in einer [Inhaltssammlung](/de/guides/content-collections/) oder einem [CMS](/de/guides/cms/).
Mit [dynamischen Routing](/de/guides/routing/#dynamic-routes) kann eine einzelne Datei auch mehrere Seiten erzeugen. So kannst du auch dann Seiten erstellen, wenn sich deine Inhalte außerhalb des speziellen `/pages/`-Verzeichnisses befinden, z. B. in einer [Inhaltssammlung](/de/guides/content-collections/) oder einem [CMS](/de/guides/cms/).

<ReadMore>Lies mehr über [Routing in Astro](/de/guides/routing/).</ReadMore>

Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/de/basics/layouts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Wir verwenden den Begriff „Layout“ üblicherweise für Astro-Komponenten, di

Allerdings sind Layoutkomponenten nichts Besonderes! Sie können [Props akzeptieren](/de/basics/astro-components/#props-komponenteneigenschaften) und [andere Komponenten importieren und verwenden](/de/basics/astro-components/#komponentenstruktur) wie jede andere Astro-Komponente. Sie können [UI-Framework-Komponenten](/de/guides/framework-components/) und [client-seitige Skripte](/de/guides/client-side-scripts/) enthalten. Sie müssen nicht einmal eine vollständige Seitenoberfläche bereitstellen, sondern können stattdessen als partielle UI-Vorlagen verwendet werden.

Wenn eine Layoutkomponente jedoch eine Seitenhülle enthält, muss ihr `<html>`-Element das übergeordnete Element aller anderen Elemente der Komponente sein. Alle [`<style>`](/de/guides/styling/#styles-stile-in-astro) oder [`<script>`](/de/guides/client-side-scripts/#verwendung-von-script-in-astro) Elemente müssen von den `<html>` Tags umschlossen sein.
Wenn eine Layoutkomponente jedoch eine Seitenhülle enthält, muss ihr `<html>`-Element das übergeordnete Element aller anderen Elemente der Komponente sein. Alle [`<style>`](/de/guides/styling/#styling-in-astro) oder [`<script>`](/de/guides/client-side-scripts/#client-side-scripts) Elemente müssen von den `<html>` Tags umschlossen sein.

Layout-Komponenten werden normalerweise in einem `src/layouts`-Verzeichnis in deinem Projekt platziert, aber das ist keine Voraussetzung; du kannst sie überall in deinem Projekt platzieren. Du kannst Layout-Komponenten sogar neben deinen Seiten platzieren, indem du den Layout-Namen ein `_` voranstellst.

Expand Down Expand Up @@ -146,7 +146,7 @@ const { frontmatter } = Astro.props;
</html>
```

Du kannst den [`Props`-Typ](/de/guides/typescript/#komponenten-eigenschaften) eines Layouts mit dem `MarkdownLayoutProps`-Helper setzen:
Du kannst den [`Props`-Typ](/de/guides/typescript/#component-props) eines Layouts mit dem `MarkdownLayoutProps`-Helper setzen:

```astro title="src/layouts/BlogPostLayout.astro" ins={2,4-9}
---
Expand Down
251 changes: 0 additions & 251 deletions src/content/docs/de/guides/client-side-scripts.mdx

This file was deleted.

Loading