de(i18n): translate tutorial section 5

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!
+
+<PreCheck>
+  - 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 `<BlogPost />`-Komponente zu verwenden
+</PreCheck>
+
+## Dynamische Anzeige einer Liste von Beiträgen
+
+<Steps>
+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";
+    ---
+    <BaseLayout pageTitle={pageTitle}>
+      <p>Hier werde ich über meine Erfahrungen beim Lernen von Astro berichten.</p>
+      <ul>
+        <li><a href="/posts/post-1/">Beitrag 1</a></li>
+        <li><a href="/posts/post-2/">Beitrag 2</a></li>
+        <li><a href="/posts/post-3/">Beitrag 3</a></li>
+      </ul>
+    </BaseLayout>
+    ```
+
+2. Um die ganze Liste der Beiträge dynamisch zu erstellen, indem du die Beitragstitel und URLs nutzt, ersetze deine einzelnen `<li>`-Tags durch den folgenden Astro-Code:
+
+    ```astro title="src/pages/blog.astro" del={9,10,11} ins= {13}
+    ---
+    import BaseLayout from '../layouts/BaseLayout.astro'
+    const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
+    const pageTitle = "Mein Astro-Lernblog";
+    ---
+    <BaseLayout pageTitle={pageTitle}>
+      <p>Hier werde ich über meine Erfahrungen beim Lernen von Astro berichten.</p>
+      <ul>
+        <li><a href="/posts/post-1/">Beitrag 1</a></li>
+        <li><a href="/posts/post-2/">Beitrag 2</a></li>
+        <li><a href="/posts/post-3/">Beitrag 3</a></li>
+
+        {allPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
+      </ul>
+    </BaseLayout>
+    ```
+
+    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!
+</Steps>
+
+<Box icon="puzzle-piece">
+
+## 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}
+<ul>
+{allPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
+{allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
+</ul>
+```
+
+<details>
+<summary>Erweitere, um die Schritte anzuzeigen</summary>
+
+<Steps>
+1. Erstelle eine neue Komponente in `src/components/`.
+
+    <details>
+    <summary>Zeige den Dateinamen an</summary>
+    ```
+    BlogPost.astro
+    ```
+    </details>
+
+2. Schreib die Codezeile in deine Komponente, damit sie einen `title` und eine `url` als `Astro.props` empfangen kann.
+
+    <details>
+    <summary>Code anzeigen</summary>
+    ```astro
+    ---
+    // src/components/BlogPost.astro
+    const { title, url } = Astro.props;
+    ---
+    ```
+    </details>
+
+3. Füge die Vorlage hinzu, mit der du jedes Element in deiner Blogpost-Liste erstellst.
+
+    <details>
+    <summary>Code anzeigen</summary>
+    ```astro
+    <!-- src/components/BlogPost.astro -->
+    <li><a href={url}>{title}</a></li>
+    ```
+    </details>
+
+4. Importiere die neue Komponente in deine Blog-Seite.
+
+    <details>
+    <summary>Code anzeigen</summary>
+    ```astro title="src/pages/blog.astro" ins={3}
+    ---
+    import BaseLayout from '../layouts/BaseLayout.astro';
+    import BlogPost from '../components/BlogPost.astro';
+    const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true }));
+    const pageTitle = "Mein Astro-Lernblog";
+    ---
+    ```
+    </details>
+
+5. Überprüfe es selbst: Schau dir den fertigen Komponentencode an.
+
+    <details>
+    <summary>Code anzeigen</summary>
+    ```astro title="src/components/BlogPost.astro"
+    ---
+    const { title, url } = Astro.props
+    ---
+    <li><a href={url}>{title}</a></li>
+    ```
+    ```astro title="src/pages/blog.astro" ins={3,10}
+    ---
+    import BaseLayout from '../layouts/BaseLayout.astro';
+    import BlogPost from '../components/BlogPost.astro';
+    const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true }));
+    const pageTitle = "Mein Astro-Lernblog";
+    ---
+    <BaseLayout pageTitle={pageTitle}>
+      <p>Hier werde ich über meine Erfahrungen beim Lernen von Astro berichten.</p>
+      <ul>
+        {allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
+      </ul>
+    </BaseLayout>
+    ```
+    </details>
+</Steps>
+</details>
+</Box>
+
+<Box icon="question-mark">
+
+### 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.
+
+    <MultipleChoice>
+      <Option>
+        `myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)`
+      </Option>
+      <Option isCorrect>
+        `myPosts[2].frontmatter.title`
+      </Option>
+      <Option>
+        `<a href={myPosts[0].url}>Erster Beitrag!!</a>`
+      </Option>
+    </MultipleChoice>
+
+2. Einen Link zur URL deines ersten Blogbeitrags.
+
+    <MultipleChoice>
+      <Option>
+        `myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)`
+      </Option>
+      <Option>
+        `myPosts[2].frontmatter.title`
+      </Option>
+      <Option isCorrect>
+        `<a href={myPosts[0].url}>Erster Beitrag!!</a>`
+      </Option>
+    </MultipleChoice>
+
+3. Eine Komponente für jeden Beitrag, die das Datum der letzten Aktualisierung anzeigt.
+
+    <MultipleChoice>
+      <Option isCorrect>
+        `myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)`
+      </Option>
+      <Option>
+        `myPosts[2].frontmatter.title`
+      </Option>
+      <Option>
+        `<a href={myPosts[0].url}>Erster Beitrag!!</a>`
+      </Option>
+    </MultipleChoice>
+
+</Box>
+
+## Checkliste
+
+<Box icon="check-list">
+
+<Checklist>
+- [ ] Ich kann Daten aus meinen lokalen Dateien abfragen.
+- [ ] Ich kann eine Liste aller meiner Blog-Beiträge anzeigen.
+</Checklist>
+</Box>
+
+### Ressourcen
+
+- [Importieren von Glob-Mustern in Astro](/de/guides/imports/#importmetaglob)