Zum Inhalt springen

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

  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.

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

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

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

  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:

<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

  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

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

    <!-- src/components/BlogPost.astro -->
<li><a href={url}>{title}</a></li>

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

  5. Ü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:

  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

Ressourcen

Wirke mit Community Sponsor