Skip to content

Commit

Permalink
i18n(de): Update core-concepts/routing.md (#1330)
Browse files Browse the repository at this point in the history
  • Loading branch information
hippotastic authored Aug 18, 2022
1 parent fb8f702 commit a8344b0
Showing 1 changed file with 19 additions and 11 deletions.
30 changes: 19 additions & 11 deletions src/pages/de/core-concepts/routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Astro verwendet **dateibasiertes Routing**, um URLs aus der Struktur an Dateien

Astro-Komponenten (`.astro`) und Markdown-Dateien (`.md`) im Verzeichnis `src/pages` **werden automatisch zu Seiten auf deiner Website**. Die Route jeder Seite entspricht ihrem Pfad und Dateinamen im Verzeichnis `src/pages`.

```bash
```diff
# Beispiel: Statische Routen
src/pages/index.astro -> meineseite.de/
src/pages/ueber.astro -> meineseite.de/ueber
Expand All @@ -23,6 +23,14 @@ src/pages/posts/1.md -> meineseite.de/posts/1
In einem Astro-Projekt muss keine separate "Routing-Konfiguration" gepflegt werden! Wenn du dem Verzeichnis `/src/pages` eine Datei hinzufügst, wird automatisch eine neue Route für dich erstellt. In statischen Builds kannst du das Dateiausgabeformat mit der Konfigurationsoption [`build.format`](/de/reference/configuration-reference/#buildformat) anpassen.
:::

## Navigation zwischen Seiten

Astro verwendet standardmäßige [`<a>`-HTML-Elemente](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), um zwischen einzelnen Routen zu navigieren. Es gibt keine Framework-spezifische `<Link>`-Komponente.

```astro title="src/pages/index.astro"
<p>Erfahre mehr <a href="/about/">über</a> Astro!</p>
```

## Dynamische Routen

Mit Astro kannst du aus einer einzelnen Seiten-Komponente mehrere Routen erzeugen, die einem bestimmten Kriterium entsprechen, indem du dynamische Routenparameter in ihrem Datei- oder Verzeichnisnamen verwendest. Du kannst so mehrere verwandte Seiten auf einmal erstellen, z. B. eine Seite für jeden Autor oder jedes Schlagwort deines Blogs. Hierbei unterstützt Astro sowohl "benannte Parameter", mit denen du mögliche Werte für eine einzelne Verzeichnisebene angeben kannst, als auch "Rest-Parameter", die flexiblere "Catch-all"-Routen mit beliebiger Verzeichnistiefe ermöglichen.
Expand Down Expand Up @@ -71,20 +79,20 @@ Routen können aus mehreren benannten Parametern auf jeder Ebene des Dateipfads

Astro-Komponenten, die Routen dynamisch generieren, haben Zugriff auf ein `Astro.params`-Objekt für jede Route. Dadurch kannst du diese generierten Teile der URL in deinem Komponentenskript und deiner Vorlage verwenden.

```astro
```astro / (id) |{id}/ /(?<!//.*)Astro.params/
---
// Beispiel: src/pages/posts/[id].astro
const { id } = Astro.params;
---
<p>Beitrag: { id }</p>
<p>Beitrag: {id}</p>
// Astro.params-Objekt für die Route `/post/abc`
{ "id": "abc" }
```

Mehrere dynamische Routensegmente können auf die gleiche Weise kombiniert werden.

```astro
```astro /(?<=const.*)(id|comment)/
---
// Beispiel: src/pages/post/[id]/[comment].astro
const { id, comment } = Astro.params;
Expand Down Expand Up @@ -165,9 +173,9 @@ Um eine Seitennummerierung zu einer Route hinzuzufügen, kannst du die gleiche S

Das folgende Beispiel zeigt, wie du die Funktion `paginate()` verwenden kannst, um diese Seiten für ein Array von Werten zu generieren:

```astro
```astro /{ (paginate) }/ /paginate\\(.*\\)/ /(?<=const.*)(page)/ /page\\.[a-zA-Z]+/
---
// Beispiel: /src/pages/astronauten/[page].astro
// Beispiel: src/pages/astronauten/[page].astro
export async function getStaticPaths({ paginate }) {
const astronauten = [{
astronaut: 'Neil Armstrong',
Expand Down Expand Up @@ -207,9 +215,9 @@ Wenn du die `paginate()`-Funktion verwendest, werden die erzeugten Daten jeder S
- **page.url.next** - Ein Link zur nächsten Seite der Sammlung
- **page.url.prev** - Ein Link zur vorherigen Seite der Sammlung

```astro
```astro /(?<=const.*)(page)/ /page\\.[a-zA-Z]+(?:\\.(?:prev|next))?/
---
// Beispiel: /src/pages/astronauten/[page].astro
// Beispiel: src/pages/astronauten/[page].astro
// Paginiere die gleiche Liste an { astronaut }-Objekten
// wie im vorherigen Beispiel
export async function getStaticPaths({ paginate }) { /* ... */ }
Expand Down Expand Up @@ -268,10 +276,10 @@ Verschachtelte Paginierung funktioniert, indem von der `getStaticPaths()`-Funkti

Im folgenden Beispiel implementieren wir eine verschachtelte Paginierung, um die oben aufgeführten URLs zu erstellen:

```astro
```astro /(?:[(]|=== )(tag)/ "params: { tag }" /const [{ ]*(page|params)/
---
// Beispiel: /src/pages/[tag]/[page].astro
export async function getStaticPaths({paginate}) {
// Beispiel: src/pages/[tag]/[page].astro
export async function getStaticPaths({ paginate }) {
const allTags = ['rot', 'blau', 'gruen'];
const allPosts = await Astro.glob('../../posts/*.md');
// Erzeuge für jedes Schlagwort ("tag") ein paginate()-Ergebnis.
Expand Down

0 comments on commit a8344b0

Please sign in to comment.