Blog-Beitragsarchiv erstellen

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!

Mach dich bereit, …

mit import.meta.glob() auf die Daten aller deiner Beiträge gleichzeitig zuzugreifen
eine dynamisch generierte Liste der Beiträge auf deiner Blog-Seite anzuzeigen
den Code zu überarbeiten, um für jedes Listenelement eine <BlogPost />-Komponente zu verwenden

Dynamische Anzeige einer Liste von Beiträgen

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.

---
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>

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:

---
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.

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.

---
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", "erfolge"]
---
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.

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:

<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>

Erweitere, um die Schritte anzuzeigen

Erstelle eine neue Komponente in src/components/.
Zeige den Dateinamen an
```
BlogPost.astro
```
Schreib die Codezeile in deine Komponente, damit sie einen title und eine url als Astro.props empfangen kann.
Code anzeigen
src/components/BlogPost.astro
```
---
const { title, url } = Astro.props;
---
```
Füge die Vorlage hinzu, mit der du jedes Element in deiner Blogpost-Liste erstellst.
Code anzeigen
src/components/BlogPost.astro
```
<li><a href={url}>{title}</a></li>
```

Importiere die neue Komponente in deine Blog-Seite.

Code anzeigen

---
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";
---

Überprüfe es selbst: Schau dir den fertigen Komponentencode an.

Code anzeigen

---
const { title, url } = Astro.props
---
<li><a href={url}>{title}</a></li>

---
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>

Test dein Wissen

Wenn deine Astro-Komponente die folgende Codezeile enthält:

---
const myPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
---

Wähle die Syntax, die du schreiben könntest, um Folgendes darzustellen:

Den Titel deines dritten Blogbeitrags.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>Erster Beitrag!!</a>
Einen Link zur URL deines ersten Blogbeitrags.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>Erster Beitrag!!</a>
Eine Komponente für jeden Beitrag, die das Datum der letzten Aktualisierung anzeigt.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>Erster Beitrag!!</a>

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 (EN)

Wirke mit Community Sponsor