diff --git a/src/content/docs/de/tutorial/5-astro-api/1.mdx b/src/content/docs/de/tutorial/5-astro-api/1.mdx
new file mode 100644
index 0000000000000..691395d535ab0
--- /dev/null
+++ b/src/content/docs/de/tutorial/5-astro-api/1.mdx
@@ -0,0 +1,251 @@
+---
+type: tutorial
+title: Blog-Beitragsarchiv erstellen
+description: |-
+ Tutorial: Erstelle deinen ersten Astro-Blog —
+ Nutze import.meta.glob(), um auf Daten aus Dateien in deinem Projekt zuzugreifen
+i18nReady: true
+---
+
+import Box from '~/components/tutorial/Box.astro';
+import Checklist from '~/components/Checklist.astro';
+import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
+import Option from '~/components/tutorial/Option.astro';
+import PreCheck from '~/components/tutorial/PreCheck.astro';
+import { Steps } from '@astrojs/starlight/components';
+
+Jetzt, wo du ein paar Blog-Beiträge hast, die du verlinken kannst, ist es Zeit, die Blog-Seite so einzurichten, dass automatisch eine Liste davon erstellt wird!
+
+
+ - Greife mit `import.meta.glob()` auf die Daten aller deiner Beiträge gleichzeitig zu
+ - Zeige eine dynamisch generierte Liste der Beiträge auf deiner Blog-Seite an
+ - Überarbeite den Code, um für jedes Listenelement eine ``-Komponente zu verwenden
+
+
+## Dynamische Anzeige einer Liste von Beiträgen
+
+
+1. Füge den folgenden Code zu `blog.astro` hinzu, um Infos zu all deinen Markdown-Dateien zurückzugeben.
+ `import.meta.glob()` gibt ein Array von Objekten zurück, wobei jedes einem Blogbeitrag entspricht.
+
+ ```astro title="src/pages/blog.astro" ins={3}
+ ---
+ import BaseLayout from '../layouts/BaseLayout.astro'
+ const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
+ const pageTitle = "Mein Astro-Lernblog";
+ ---
+
+
Hier werde ich über meine Erfahrungen beim Lernen von Astro berichten.
+
+ ```
+
+ Deine ganze Liste von Blog-Beiträgen wird jetzt dynamisch mit der integrierten TypeScript-Unterstützung von Astro generiert, indem das von `import.meta.glob()` zurückgegebene Array zugeordnet wird.
+
+3. Füge einen neuen Blogbeitrag hinzu, indem du eine neue Datei `post-4.md` in `src/pages/posts/` erstellst und einige Markdown-Inhalte hinzufügst.
+ Achte darauf, dass du mindestens die unten verwendeten Frontmatter-Eigenschaften einfügst.
+
+ ```markdown
+ ---
+ layout: ../../layouts/MarkdownPostLayout.astro
+ title: Mein vierter Blogbeitrag
+ author: Astro-Lernender
+ description: "Dieser Beitrag wird eigenständig angezeigt!"
+ image:
+ url: "https://docs.astro.build/default-og-image.png"
+ alt: "Das Wort 'astro' vor einer Illustration von Planeten und Sternen."
+ pubDate: 2022-08-08
+ tags: ["astro", "successes"]
+ ---
+ Dieser Beitrag sollte zusammen mit meinen anderen Blogbeiträgen angezeigt werden, weil `import.meta.glob()` eine Liste aller meiner Beiträge zurückgibt, um meine Liste zu erstellen.
+ ```
+
+4. Schau dir deine Blog-Seite in der Browser-Vorschau unter `http://localhost:4321/blog` an und such nach einer aktualisierten Liste mit vier Einträgen, darunter dein neuer Blogbeitrag!
+
+
+
+
+## Challenge: Erstelle eine BlogPost-Komponente
+
+Versuch selbst, alle notwendigen Änderungen an deinem Astro-Projekt vorzunehmen, damit du stattdessen den folgenden Code verwenden kannst, um deine Liste mit Blogbeiträgen zu erstellen:
+
+```astro title="src/pages/blog.astro" del={2} ins={3}
+
+```
+
+
+Erweitere, um die Schritte anzuzeigen
+
+
+1. Erstelle eine neue Komponente in `src/components/`.
+
+
+ Zeige den Dateinamen an
+ ```
+ BlogPost.astro
+ ```
+
+
+2. Schreib die Codezeile in deine Komponente, damit sie einen `title` und eine `url` als `Astro.props` empfangen kann.
+
+
+ Code anzeigen
+ ```astro
+ ---
+ // src/components/BlogPost.astro
+ const { title, url } = Astro.props;
+ ---
+ ```
+
+
+3. Füge die Vorlage hinzu, mit der du jedes Element in deiner Blogpost-Liste erstellst.
+
+
+ Code anzeigen
+ ```astro
+
+
Hier werde ich über meine Erfahrungen beim Lernen von Astro berichten.
+
+ {allPosts.map((post: any) => )}
+
+
+ ```
+
+
+
+
+
+
+
+### Test dein Wissen
+
+Wenn deine Astro-Komponente die folgende Codezeile enthält:
+
+```astro
+---
+const myPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
+---
+```
+
+Wähle die Syntax, die du schreiben könntest, um Folgendes darzustellen:
+
+1. Den Titel deines dritten Blogbeitrags.
+
+
+
+
+
+
+
+2. Einen Link zur URL deines ersten Blogbeitrags.
+
+
+
+
+
+
+
+3. Eine Komponente für jeden Beitrag, die das Datum der letzten Aktualisierung anzeigt.
+
+
+
+
+
+
+
+
+
+## Checkliste
+
+
+
+
+- [ ] Ich kann Daten aus meinen lokalen Dateien abfragen.
+- [ ] Ich kann eine Liste aller meiner Blog-Beiträge anzeigen.
+
+
+
+### Ressourcen
+
+- [Importieren von Glob-Mustern in Astro](/de/guides/imports/#astroglob)
diff --git a/src/content/docs/de/tutorial/5-astro-api/2.mdx b/src/content/docs/de/tutorial/5-astro-api/2.mdx
new file mode 100644
index 0000000000000..d8d1a33c84e7a
--- /dev/null
+++ b/src/content/docs/de/tutorial/5-astro-api/2.mdx
@@ -0,0 +1,348 @@
+---
+type: tutorial
+title: Tag-Seiten erstellen
+description: |-
+ Tutorial: Erstelle deinen ersten Astro-Blog —
+ Verwende getStaticPaths(), um mehrere Seiten (Routen) gleichzeitig zu erstellen
+i18nReady: true
+---
+
+import Box from '~/components/tutorial/Box.astro';
+import Checklist from '~/components/Checklist.astro';
+import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
+import Option from '~/components/tutorial/Option.astro';
+import PreCheck from '~/components/tutorial/PreCheck.astro';
+import { Steps } from '@astrojs/starlight/components';
+
+
+ - Erstelle eine Seite, um mehrere Seiten zu generieren
+ - Gib an, welche Seitenrouten erstellt werden sollen, und gib jeder Seite ihre eigenen Props
+
+
+## Dynamisches Seiten-Routing
+
+Du kannst ganze Seitensätze dynamisch erstellen, indem du `.astro`-Dateien verwendest, die eine `getStaticPaths()`-Funktion exportieren.
+
+## Seiten dynamisch erstellen
+
+
+1. Erstelle eine neue Datei unter `src/pages/tags/[tag].astro`.
+ (Du musst einen neuen Ordner erstellen.)
+ Beachte, dass der Dateiname (`[tag].astro`) eckige Klammern enthält.
+ Füge den folgenden Code in die Datei ein:
+
+ ```astro title="src/pages/tags/[tag].astro"
+ ---
+ import BaseLayout from '../../layouts/BaseLayout.astro';
+
+ export async function getStaticPaths() {
+ return [
+ { params: { tag: "astro" } },
+ { params: { tag: "successes" } },
+ { params: { tag: "community" } },
+ { params: { tag: "blogging" } },
+ { params: { tag: "setbacks" } },
+ { params: { tag: "learning in public" } },
+ ];
+ }
+
+ const { tag } = Astro.params;
+ ---
+
+
Beiträge mit dem Tag {tag}
+
+ ```
+
+ Die Funktion `getStaticPaths` gibt ein Array von Seitenrouten zurück, und alle Seiten unter diesen Routen verwenden dieselbe Vorlage, die in der Datei definiert ist.
+
+2. Wenn du deine Blog-Beiträge angepasst hast, ersetze die einzelnen Tag-Werte (z. B. „astro”, „successes”, „community” usw.) durch die Tags, die du in deinen eigenen Beiträgen verwendest.
+
+3. Stell sicher, dass jeder Blogbeitrag mindestens ein Tag enthält, das als Array geschrieben ist, z. B. `tags: ["blogging"]`.
+
+4. Ruf `http://localhost:4321/tags/astro` in deiner Browser-Vorschau auf.
+ Du solltest eine Seite sehen, die dynamisch aus `[tag].astro` generiert wurde.
+ Überprüfe, ob du auch Seiten für jedes deiner Tags unter `/tags/successes`, `/tags/community` und `/tags/learning%20in%20public` usw. oder unter jedem deiner benutzerdefinierten Tags erstellt hast.
+ Möglicherweise musst du zuerst den Entwicklungsserver beenden und neu starten, um diese neuen Seiten anzuzeigen.
+
+
+## Verwende Props in dynamischen Routen
+
+
+1. Füge die folgenden Props zu deiner Funktion `getStaticPaths()` hinzu, um die Daten aus all deinen Blog-Beiträgen für jede Seitenroute verfügbar zu machen.
+
+ Achte darauf, jeder Route in deinem Array die neuen Props zuzuweisen und diese Props dann außerhalb deiner Funktion für deine Komponentenvorlage verfügbar zu machen.
+
+ ```astro title="src/pages/tags/[tag].astro" ins={5,18} ins="props: {posts: allPosts}"
+ ---
+ import BaseLayout from '../../layouts/BaseLayout.astro';
+
+ export async function getStaticPaths() {
+ const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
+
+ return [
+ {params: {tag: "astro"}, props: {posts: allPosts}},
+ {params: {tag: "successes"}, props: {posts: allPosts}},
+ {params: {tag: "community"}, props: {posts: allPosts}},
+ {params: {tag: "blogging"}, props: {posts: allPosts}},
+ {params: {tag: "setbacks"}, props: {posts: allPosts}},
+ {params: {tag: "learning in public"}, props: {posts: allPosts}}
+ ];
+ }
+
+ const { tag } = Astro.params;
+ const { posts } = Astro.props;
+ ---
+ ```
+
+2. Filtere deine Liste der Beiträge mit der integrierten TypeScript-Unterstützung von Astro, um nur Beiträge aufzunehmen, die das eigene Tag der Seite enthalten.
+
+ ```astro title="src/pages/tags/[tag].astro" ins={4}
+ ---
+ const { tag } = Astro.params;
+ const { posts } = Astro.props;
+ const filteredPosts = posts.filter((post: any) => post.frontmatter.tags?.includes(tag));
+ ---
+ ```
+
+3. Jetzt kannst du deine HTML-Vorlage aktualisieren, um eine Liste aller Blog-Beiträge anzuzeigen, die das Tag der Seite enthalten. Füge den folgenden Code zu `[tag].astro` hinzu:
+
+ ```astro title="src/pages/tags/[tag].astro" ins={3-5}
+
+
+
+ ```
+
+4. Du kannst das sogar umgestalten, um stattdessen deine ``-Komponente zu verwenden!
+ (Vergiss nicht, diese Komponente oben in `[tag].astro` zu importieren.)
+
+ ```astro title="src/pages/tags/[tag].astro" del={4} ins={5}
+
+
+
+ ```
+
+5. Schau dir die Vorschau deiner einzelnen Tag-Seiten in deinem Browser an. Du solltest jetzt eine Liste aller deiner Blog-Beiträge sehen, die dieses bestimmte Tag enthalten.
+
+
+
+
+### Analysiere das Muster
+
+Gib für jeden der folgenden Punkte an, ob der Code **innerhalb** der Funktion `getStaticPaths()` oder **außerhalb** dieser Funktion geschrieben ist.
+
+1. Der Aufruf `import.meta.glob()`, um Infos über alle deine `.md`-Dateien zu bekommen, die an jede Seitenroute weitergegeben werden sollen.
+
+
+
+
+
+
+2. Die Liste der Routen, die von `getStaticPaths()` generiert (zurückgegeben) werden sollen.
+
+
+
+
+
+
+3. Die empfangenen Werte von `props` und `params`, die in der HTML-Vorlage verwendet werden sollen.
+
+
+
+
+
+
+
+:::note[Kerngedanke]
+Wenn du Infos zum Erstellen der Seitenrouten brauchst, schreib sie **innerhalb** von `getStaticPaths()`.
+
+Um Infos in der HTML-Vorlage einer Seitenroute zu bekommen, schreib sie **außerhalb** von `getStaticPaths()`.
+:::
+
+
+## Fortgeschrittenes JavaScript: Seiten aus vorhandenen Tags generieren
+
+Deine Tag-Seiten sind jetzt statisch in `[tag].astro` definiert.
+Wenn du einem Blogbeitrag ein neues Tag hinzufügst, musst du auch diese Seite erneut aufrufen und deine Seitenrouten aktualisieren.
+
+Das folgende Beispiel zeigt, wie du deinen Code auf dieser Seite durch Code ersetzen kannst, der automatisch nach jedem auf deinen Blog-Seiten verwendeten Tag sucht und Seiten dafür generiert.
+
+:::note
+Auch wenn es schwierig aussieht, kannst du versuchen, die Schritte zu befolgen, um diese Funktion selbst zu erstellen!
+Wenn du dich jetzt nicht mit dem erforderlichen JavaScript befassen möchtest, kannst du direkt zur [fertigen Version des Codes](#endgültiges-codebeispiel) springen und ihn direkt in deinem Projekt verwenden, indem du den vorhandenen Inhalt ersetzt.
+:::
+
+
+
+1. Überprüfe, ob alle deine Blog-Beiträge Tags enthalten
+
+ Schau dir alle deine bestehenden Markdown-Seiten noch einmal an und stell sicher, dass jeder Beitrag ein `tags`-Array in seinem Frontmatter enthält.
+ Auch wenn du nur einen Tag hast, sollte dieser als Array geschrieben werden, z. B. `tags: ["blogging"]`.
+
+2. Erstelle ein Array aller deiner vorhandenen Tags mit der integrierten TypeScript-Unterstützung von Astro.
+
+ Füge den folgenden Code hinzu, um eine Liste aller in deinen Blog-Beiträgen verwendeten Tags zu erhalten.
+
+ ```astro title="src/pages/tags/[tag].astro" ins={7}
+ ---
+ import BaseLayout from '../../layouts/BaseLayout.astro';
+
+ export async function getStaticPaths() {
+ const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
+
+ const uniqueTags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];
+ }
+ ```
+
+
+ Erzähl mir genauer, was diese Codezeile macht!
+
+ Es ist okay, wenn du das selbst noch nicht geschrieben hättest!
+
+ Sie geht jeden Markdown-Beitrag einzeln durch und kombiniert jedes Array von Tags zu einem einzigen größeren Array.
+ Dann erstellt sie aus allen gefundenen einzelnen Tags ein neues `Set` (um doppelte Werte zu ignorieren).
+ Schließlich wandelt sie dieses Set in ein Array (ohne Duplikate), das du verwenden kannst, um eine Liste von Tags auf deiner Seite anzuzeigen.
+
+
+ Du hast jetzt ein Array `uniqueTags` mit den Elementen `"astro"`, `"successes"`, `"community"`, `"blogging"`, `"setbacks"`, `"learning in public"`
+
+3. Ersetze den `return`-Wert der Funktion `getStaticPaths`
+
+ ```js title="src/pages/tags/[tag].astro" del={1-8} ins={10-16}
+ return [
+ {params: {tag: "astro"}, props: {posts: allPosts}},
+ {params: {tag: "successes"}, props: {posts: allPosts}},
+ {params: {tag: "community"}, props: {posts: allPosts}},
+ {params: {tag: "blogging"}, props: {posts: allPosts}},
+ {params: {tag: "setbacks"}, props: {posts: allPosts}},
+ {params: {tag: "learning in public"}, props: {posts: allPosts}}
+ ]
+
+ return uniqueTags.map((tag) => {
+ const filteredPosts = allPosts.filter((post: any) => post.frontmatter.tags.includes(tag));
+ return {
+ params: { tag },
+ props: { posts: filteredPosts },
+ };
+ });
+ ```
+
+4. Eine `getStaticPaths`-Funktion sollte immer eine Liste von Objekten zurückgeben, die `params` (wie jede Seitenroute heißen soll) und optional `props` (Daten, die du an diese Seiten übergeben willst) enthalten.
+ Vorher hast du jeden Tag-Namen definiert, von dem du wusstest, dass er in deinem Blog verwendet wird, und die ganze Liste der Beiträge als props an jede Seite übergeben.
+
+ Jetzt erstellst du diese Liste von Objekten automatisch, indem du dein Array `uniqueTags` benutzt, um jeden Parameter zu definieren.
+
+ Und jetzt wird die Liste aller Blog-Beiträge gefiltert, **bevor** sie als Props an jede Seite gesendet wird.
+ Vergiss nicht, die vorherige Codezeile zu entfernen, die die Beiträge filtert, und aktualisiere deine HTML-Vorlage, damit sie `posts` anstelle von `filteredPosts` verwendet.
+
+ ```astro title="src/pages/tags/[tag].astro" del={3,7} ins={8}
+ const { tag } = Astro.params;
+ const { posts } = Astro.props;
+ const filteredPosts = posts.filter((post) => post.frontmatter.tags?.includes(tag));
+ ---
+
+
+ ```
+
+
+
+### Endgültiges Codebeispiel
+
+Um deine Arbeit zu überprüfen oder wenn du einfach nur einen vollständigen, korrekten Code zum Kopieren in `[tag].astro` haben möchtest, sollte deine Astro-Komponente wie folgt aussehen:
+
+```astro title="src/pages/tags/[tag].astro"
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import BlogPost from '../../components/BlogPost.astro';
+
+export async function getStaticPaths() {
+ const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
+
+ const uniqueTags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];
+
+ return uniqueTags.map((tag) => {
+ const filteredPosts = allPosts.filter((post: any) => post.frontmatter.tags.includes(tag));
+ return {
+ params: { tag },
+ props: { posts: filteredPosts },
+ };
+ });
+}
+
+const { tag } = Astro.params;
+const { posts } = Astro.props;
+---
+
+
Posts tagged with {tag}
+
+ {posts.map((post: any) => )}
+
+
+```
+
+Jetzt solltest du in der Lage sein, alle deine Tag-Seiten in der Browser-Vorschau aufzurufen.
+
+Navigiere zu `http://localhost:4321/tags/community` und du solltest eine Liste aller deiner Blog-Beiträge mit dem Tag `community` sehen.
+Ebenso sollte `http://localhost:4321/tags/learning%20in%20public` eine Liste der Blog-Beiträge mit dem Tag `learning in public` anzeigen.
+
+Im nächsten Abschnitt erstellst du Navigationslinks zu diesen Seiten.
+
+
+
+### Teste dein Wissen
+
+Wähle den Begriff aus, der der Beschreibung entspricht.
+
+1. Eine Funktion, die ein Array von Seitenrouten zurückgibt.
+
+
+
+
+
+
+
+
+2. Der Prozess der Erstellung mehrerer Seitenrouten aus einer Datei in Astro.
+
+
+
+
+
+
+
+
+3. Ein Wert, der den Namen einer dynamisch generierten Seitenroute festlegt.
+
+
+
+
+
+
+
+
+
+
+
+
+## Checklist
+
+
+- [ ] Ich kann Seiten dynamisch generieren.
+- [ ] Ich kann `props` an jede Seitenroute übergeben.
+
+
+
+### Ressourcen
+
+- [Dynamisches Seiten-Routing in Astro](/de/guides/routing/#dynamische-routen)
+
+- [`getStaticPaths()` API-Dokumentation](/de/reference/routing-reference/#getstaticpaths)
diff --git a/src/content/docs/de/tutorial/5-astro-api/3.mdx b/src/content/docs/de/tutorial/5-astro-api/3.mdx
new file mode 100644
index 0000000000000..614b256971bb4
--- /dev/null
+++ b/src/content/docs/de/tutorial/5-astro-api/3.mdx
@@ -0,0 +1,442 @@
+---
+type: tutorial
+title: Erstelle eine Tag-Indexseite
+description: |-
+ Tutorial: Erstelle deinen ersten Astro-Blog —
+ Nutze alles, was du bisher gelernt hast, um eine Tag-Indexseite zu erstellen
+i18nReady: true
+---
+
+import Box from '~/components/tutorial/Box.astro';
+import Checklist from '~/components/Checklist.astro';
+import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
+import Option from '~/components/tutorial/Option.astro';
+import PreCheck from '~/components/tutorial/PreCheck.astro';
+import { Steps } from '@astrojs/starlight/components';
+
+Jetzt, wo du für jedes Tag eine eigene Seite hast, kannst du Links zu diesen Seiten erstellen.
+
+
+ - Füge eine neue Seite mit dem Routing-Muster `/pages/folder/index.astro` hinzu.
+ - Zeige eine Liste aller deiner eindeutigen Tags an und verlinke sie mit den jeweiligen Tag-Seiten.
+ - Aktualisiere deine Website mit Navigationslinks zu dieser neuen Tags-Seite.
+
+
+## Verwende das Routing-Muster `/pages/folder/index.astro`
+
+Um eine Tag-Index-Seite zu deiner Website hinzuzufügen, kannst du eine neue Datei unter `src/pages/tags.astro` erstellen.
+
+Da du aber schon das Verzeichnis `/tags/` hast, kannst du ein anderes Routing-Muster in Astro nutzen und alle deine Dateien, die mit Tags zu tun haben, zusammenhalten.
+
+
+
+## Probier es selbst aus – Erstelle eine Tag-Indexseite
+
+
+1. Erstelle eine neue Datei `index.astro` im Verzeichnis `src/pages/tags/`.
+
+2. Gehe zu `http://localhost:4321/tags` und überprüfe, ob deine Website jetzt eine Seite unter dieser URL enthält.
+ Sie ist leer, aber sie ist vorhanden.
+
+3. Erstelle eine minimale Seite unter `src/pages/tags/index.astro`, die dein Layout verwendet.
+ Das hast du schon einmal gemacht!
+
+
+ Erweitere, um die Schritte anzuzeigen
+
+ 1. Erstelle eine neue Seitenkomponente in `src/pages/tags/`.
+
+
+ Zeige den Dateinamen an
+ ```
+ index.astro
+ ```
+
+
+ 2. Importiere und verwende dein ``.
+
+
+ Code anzeigen
+ ```astro title=" src/pages/tags/index.astro"
+ ---
+ import BaseLayout from '../../layouts/BaseLayout.astro';
+ ---
+
+ ```
+
+
+ 3. Leg einen Seitentitel fest und übergib ihn als Komponentenattribut an dein Layout.
+
+
+ Code anzeigen
+ ```astro title="src/pages/tags/index.astro" ins={3} "pageTitle"
+ ---
+ import BaseLayout from '../../layouts/BaseLayout.astro';
+ const pageTitle = "Tag-Index";
+ ---
+
+ ```
+
+
+
+
+4. Schau dir die Vorschau in deinem Browser nochmal an.
+ Du solltest jetzt eine formatierte Seite haben, die bereit ist, mit Inhalten gefüllt zu werden!
+
+
+
+## Erstelle ein Array mit Tags
+
+Du hast zuvor Elemente aus einem Array mit `map()` in einer Liste angezeigt. Wie würde es aussehen, wenn du ein Array mit all deinen Tags definierst und diese dann in einer Liste auf dieser Seite anzeigst?
+
+
+ Code anzeigen
+
+ ```astro title="src/pages/tags/index.astro"
+ ---
+ import BaseLayout from '../../layouts/BaseLayout.astro';
+ const tags = ['astro', 'blogging', 'learning in public', 'successes', 'setbacks', 'community']
+ const pageTitle = "Tag-Index";
+ ---
+
+
+ {tags.map((tag) =>
{tag}
)}
+
+
+ ```
+
+
+Das geht schon, aber dann musst du jedes Mal, wenn du in einem neuen Blogbeitrag ein neues Tag verwendest, zu dieser Datei zurückkehren und dein Array aktualisieren.
+
+Zum Glück kennst du schon eine Möglichkeit, die Daten aus all deinen Markdown-Dateien in einer einzigen Codezeile abzurufen und dann eine Liste aller deiner Tags zurückzugeben.
+
+
+1. Füge die Codezeile in das Frontmatter-Skript der Datei `src/pages/tags/index.astro` ein, welche deiner Seite Zugriff auf die Daten aller `.md`-Blogpost-Dateien gibt.
+
+
+ Code anzeigen
+ ```astro title = "src/pages/tags/index.astro" ins={3}
+ ---
+ import BaseLayout from '../../layouts/BaseLayout.astro';
+ const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
+ const pageTitle = "Tag-Index";
+ ---
+ ```
+
+
+2. Füge als Nächstes die folgende JavaScript-Zeile zu deiner Seitenkomponente hinzu. Das ist derselbe Code, der auf der integrierten TypeScript-Unterstützung von Astro basiert, den du in `src/pages/tags/[tag].astro` benutzt hast, um eine Liste eindeutiger Tags zurückzugeben.
+
+ ```astro title = "src/pages/tags/index.astro" ins={4}
+ ---
+ import BaseLayout from '../../layouts/BaseLayout.astro';
+ const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
+ const tags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];
+ const pageTitle = "Tag-Index";
+ ---
+
+ ```
+
+
+## Erstelle deine Liste mit Tags
+
+Anstatt diesmal Elemente in einer ungeordneten Liste zu erstellen, erstelle für jedes Element ein `
` innerhalb eines `
`.
+Das Muster sollte dir bekannt vorkommen!
+
+
+1. Füge den folgenden Code zu deiner Komponentenvorlage hinzu:
+
+ ```astro title="src/pages/tags/index.astro" ins={2}
+
+
{tags.map((tag) =>
{tag}
)}
+
+ ```
+ Überprüfe in der Vorschau deines Browsers, ob deine Tags aufgelistet sind. Wenn bei Blogbeiträgen Tags fehlen oder diese falsch formatiert sind, zeigt dir die integrierte TypeScript-Unterstützung von Astro Fehler an, damit du deinen Code überprüfen und korrigieren kannst.
+
+2. Damit jeder Tag mit seiner eigenen Seite verlinkt ist, füge den folgenden ``-Link zu jedem Tag-Namen hinzu:
+
+ ```astro title="src/pages/tags/index.astro" '/tags/${tag}'
+
+
+
+ ```
+
+
+## Füge Stile zu deiner Tag-Liste hinzu
+
+
+1. Füge die folgenden CSS-Klassen hinzu, um sowohl dein `
` als auch jedes `
` zu stylen, das generiert wird.
+ Hinweis: Astro verwendet HTML-Syntax zum Hinzufügen von Klassennamen!
+
+ ```astro title="src/pages/tags/index.astro" 'class="tags"' 'class="tag"'
+
+
+
+ ```
+
+2. Leg diese neuen CSS-Klassen fest, indem du den folgenden `
+ ```
+
+3. Schau dir die Vorschau in deinem Browser unter `http://localhost:4321/tags` an, um zu überprüfen, ob du ein paar neue Stile hast und ob jeder der Tags auf der Seite einen funktionierenden Link zu seiner eigenen individuellen Tag-Seite hat.
+
+
+### Code überprüfen
+
+So sollte deine neue Seite aussehen:
+
+```astro title="src/pages/tags/index.astro"
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
+const tags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];
+const pageTitle = "Tag-Index";
+---
+
+
+
+
+```
+
+## Füge diese Seite zu deiner Navigation hinzu
+
+Im Moment kannst du zu `http://localhost:4321/tags` navigieren und diese Seite sehen.
+Von dieser Seite aus kannst du auf Links zu deinen einzelnen Tag-Seiten klicken.
+
+Aber du musst diese Seiten noch von anderen Seiten deiner Website aus auffindbar machen.
+
+
+1. Füge in deiner Komponente `Navigation.astro` einen Link zu dieser neuen Tag-Indexseite ein.
+
+
+ Code anzeigen
+ ```astro title="src/components/Navigation.astro" ins={4}
+ Startseite
+ Über uns
+ Blog
+ Tags
+ ```
+
+
+
+
+
+## Challenge: Füge Tags in dein Blogpost-Layout ein
+
+Du hast jetzt den ganzen Code geschrieben, den du brauchst, um auch eine Liste von Tags in jedem Blogpost anzuzeigen und sie mit ihren Tag-Seiten zu verlinken. Du hast bereits Arbeit geleistet, die du wiederverwenden kannst!
+
+Mach die folgenden Schritte und überprüf deine Arbeit, indem du sie mit dem [endgültigen Code-Beispiel](#code-überprüfung-markdownpostlayout) vergleichst.
+
+
+1. Kopier `
...
` und `` aus `src/pages/tags/index.astro` und verwende sie in `MarkdownPostLayout.astro`:
+
+ ```astro title="src/layouts/MarkdownPostLayout.astro" ins={11-15, 19-37}
+ ---
+ import BaseLayout from './BaseLayout.astro';
+ const { frontmatter } = Astro.props;
+ ---
+
+
+
+
+
+
+ ```
+
+
+Bevor dieser Code funktioniert, musst du **eine kleine Änderung** an dem Code vornehmen, den du in `MarkdownPostLayout.astro` eingefügt hast. Kannst du herausfinden, um welche Änderung es sich handelt?
+
+
+Gib mir einen Hinweis
+
+Wie sind die anderen Props (z. B. Titel, Autor usw.) in deiner Layoutvorlage geschrieben? Wie erhält dein Layout Props aus einem einzelnen Blogbeitrag?
+
+
+
+Gib mir noch einen Hinweis!
+
+Um Props (übermittelte Werte) aus einem `.md`-Blogbeitrag in deinem Layout zu verwenden, z. B. Tags, musst du dem Wert ein bestimmtes Wort voranstellen.
+
+
+Code anzeigen
+
+```astro title="src/layouts/MarkdownPostLayout.astro" "frontmatter"
+
+```
+
+
+
+
+### Code-Überprüfung: MarkdownPostLayout
+
+Um deine Arbeit zu überprüfen oder wenn du einfach nur einen vollständigen, korrekten Code zum Kopieren in `MarkdownPostLayout.astro` haben möchtest, sollte deine Astro-Komponente wie folgt aussehen:
+
+```astro title="src/layouts/MarkdownPostLayout.astro"
+---
+import BaseLayout from './BaseLayout.astro';
+const { frontmatter } = Astro.props;
+---
+
+
+
+
+
+
+```
+
+
+
+### Test dein Wissen
+
+Ordne jeden Dateipfad einem zweiten Dateipfad zu, der eine Seite mit derselben Route erstellt.
+
+1. `src/pages/categories.astro`
+
+
+
+
+
+
+
+
+2. `src/pages/posts.astro`
+
+
+
+
+
+
+
+
+3. `src/pages/products/shoes/index.astro`
+
+
+
+
+
+
+
+
+
+
+
+
+## Checkliste
+
+
+- [ ] Ich kann die Routing-Funktion `/pages/folder/index.astro` von Astro nutzen.
+
+
+
+### Ressourcen
+
+- [Statisches Routing in Astro](/de/guides/routing/#statische-routen)
diff --git a/src/content/docs/de/tutorial/5-astro-api/4.mdx b/src/content/docs/de/tutorial/5-astro-api/4.mdx
new file mode 100644
index 0000000000000..f310fde9c3beb
--- /dev/null
+++ b/src/content/docs/de/tutorial/5-astro-api/4.mdx
@@ -0,0 +1,125 @@
+---
+type: tutorial
+title: RSS-Feed hinzufügen
+description: >-
+ Tutorial: Erstelle deinen ersten Astro-Blog —
+ Installiere das offizielle Astro-Paket, um einen Feed zu erstellen, den deine Leser abonnieren können
+i18nReady: true
+---
+
+import Box from '~/components/tutorial/Box.astro';
+import Checklist from '~/components/Checklist.astro';
+import PreCheck from '~/components/tutorial/PreCheck.astro';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import { Steps } from '@astrojs/starlight/components';
+
+
+ - Installiere ein Astro-Paket, um einen RSS-Feed für deine Website zu erstellen
+ - Erstelle einen Feed, den man abonnieren und mit RSS-Feed-Readern lesen kann
+
+
+## Astros RSS-Paket installieren
+
+Astro hat ein spezielles Paket, mit dem du schnell einen RSS-Feed zu deiner Website hinzufügen kannst.
+
+Dieses offizielle Paket erstellt ein Nicht-HTML-Dokument mit Infos zu all deinen Blog-Beiträgen, das von **Feed-Readern** wie Feedly, The Old Reader und anderen gelesen werden kann.
+Dieses Dokument wird jedes Mal aktualisiert, wenn deine Website neu erstellt wird.
+
+Einzelpersonen können deinen Feed in einem Feed-Reader abonnieren und erhalten eine Benachrichtigung, wenn du einen neuen Blog-Beitrag auf deiner Website veröffentlichst, was es zu einer beliebten Blog-Funktion macht.
+
+
+1. Beende in deinem Terminal den Astro-Entwicklungsserver (Strg + C/Control + C) und führe den folgenden Befehl aus, um das RSS-Paket von Astro zu installieren.
+
+
+
+ ```shell
+ npm install @astrojs/rss
+ ```
+
+
+ ```shell
+ pnpm add @astrojs/rss
+ ```
+
+
+ ```shell
+ yarn add @astrojs/rss
+ ```
+
+
+
+2. Starte den Dev-Server neu, um wieder an deinem Astro-Projekt zu arbeiten.
+
+
+
+ ```shell
+ npm run dev
+ ```
+
+
+ ```shell
+ pnpm run dev
+ ```
+
+
+ ```shell
+ yarn run dev
+ ```
+
+
+
+
+## Erstelle ein `.xml`-Feed-Dokument
+
+
+1. Erstelle eine neue Datei namens `rss.xml.js` in `src/pages/`.
+
+2. Kopier den folgenden Code in dieses neue Dokument.
+ Passe die Eigenschaften `title` und `description` an und gib bei Bedarf in `customData` eine andere Sprache an:
+
+ ```js title="src/pages/rss.xml.js"
+ import rss, { pagesGlobToRssItems } from '@astrojs/rss';
+
+ export async function GET(context) {
+ return rss({
+ title: 'Astro-Lernender | Blog',
+ description: 'Meine Reise beim Lernen von Astro',
+ site: context.site,
+ items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
+ customData: `de-de`,
+ });
+ }
+ ```
+
+3. Füge die Eigenschaft `site` zur Astro-Konfiguration mit der einzigartigen Netlify-URL deiner Website hinzu.
+
+ ```js title="astro.config.mjs" ins={4}
+ import { defineConfig } from "astro/config";
+
+ export default defineConfig({
+ site: "https://example.com"
+ });
+ ```
+
+4. Gehe auf `http://localhost:4321/rss.xml` und schau nach, ob du (unformatierten) Text auf der Seite mit einem `item` für jede deiner `.md`-Dateien sehen kannst.
+ Jedes Element sollte Blog-Post-Infos wie `title`, `url` und `description` enthalten.
+
+ :::tip[Zeige deinen RSS-Feed in einem Reader an]
+ Lade einen Feed-Reader herunter oder melde dich bei einem Online-Feed-Reader-Dienst an und abonniere deine Website, indem du deine eigene Netlify-URL hinzufügst. Du kannst diesen Link auch mit anderen teilen, damit sie deine Beiträge abonnieren und benachrichtigt werden können, wenn ein neuer Beitrag veröffentlicht wird.
+ :::
+
+
+
+
+
+## Checklist
+
+
+- [ ] Ich kann ein Astro-Paket über die Befehlszeile installieren.
+- [ ] Ich kann einen RSS-Feed für meine Website erstellen.
+
+
+
+### Ressourcen
+
+- [RSS-Elementerstellung in Astro](/de/recipes/rss/#verwendung-von-glob-imports)
diff --git a/src/content/docs/de/tutorial/5-astro-api/index.mdx b/src/content/docs/de/tutorial/5-astro-api/index.mdx
new file mode 100644
index 0000000000000..fb03bcafb6265
--- /dev/null
+++ b/src/content/docs/de/tutorial/5-astro-api/index.mdx
@@ -0,0 +1,37 @@
+---
+type: tutorial
+unitTitle: Verbessere deinen Blog
+title: 'Überprüfung: Einheit 5 – Astro API'
+description: >-
+ Tutorial: Erstelle deinen ersten Astro-Blog –
+ Abrufen und Verwenden von Daten aus Projektdateien, um Seiten-Inhalte und Routen
+i18nReady: true
+head:
+ - tag: title
+ content: 'Tutorial zum Erstellen eines Blogs: Einheit 5 – Astro API | Docs'
+---
+
+import Box from '~/components/tutorial/Box.astro';
+import Checklist from '~/components/Checklist.astro';
+import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
+import Option from '~/components/tutorial/Option.astro';
+
+Jetzt, wo du ein paar Blog-Beiträge hast, ist es Zeit, die API von Astro zu nutzen, um mit deinen Dateien zu arbeiten!
+
+## Ausblick
+
+In dieser Einheit wirst du deinen Blog mit einer Indexseite, Tag-Seiten und einem RSS-Feed aufpeppen.
+
+Dabei lernst du, wie du Folgendes verwendest:
+- `import.meta.glob()`, um auf Daten aus Dateien in deinem Projekt zuzugreifen
+- `getStaticPaths()`, um mehrere Seiten (Routen) gleichzeitig zu erstellen
+- Das Astro-RSS-Paket, um einen RSS-Feed zu erstellen
+
+
+
+## Checklist
+
+
+- [ ] Ich bin bereit, meinem Astro-Projekt einige Blog-Funktionen hinzuzufügen!
+
+
