Astro-Kurs 21: Dynamische Beitragsseiten

Etappe 2 – Lektion 21 von 22 · Modellbau-Werkstatt
Voraussetzungen: Etappe 1 (Teile 1–11); ab Teil 13 auch die jeweils vorherige Lektion.

Lernziel: Du erzeugst aus Blogeinträgen automatisch eigene URLs.

1. Ein Dateiname – viele Webseiten

Unser Blog hat mehrere Beiträge. Statt für jeden einen eigenen .astro-Seitenbaustein anzulegen, erzeugen wir Seiten aus den Collection-Einträgen.

Wichtig: Entferne src/pages/blog.astro aus Teil 20 und lege stattdessen src/pages/blog/index.astro an. Sonst können zwei Dateien dieselbe Route /blog beanspruchen.

src/pages/blog/index.astro:

---
import BasisLayout from '../../layouts/BasisLayout.astro';
import { getCollection } from 'astro:content';
const posts = (await getCollection('blog')).sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
);
---
<BasisLayout title="Blog">
  <h1>Werkstatt-Blog</h1>
  <ul>
    {posts.map(post => (
      <li><a href={`/blog/${post.id}/`}>{post.data.title}</a></li>
    ))}
  </ul>
</BasisLayout>

2. Dynamische Route

Erstelle src/pages/blog/[id].astro:

---
import BasisLayout from '../../layouts/BasisLayout.astro';
import { getCollection, render } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { id: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---
<BasisLayout title={post.data.title}>
  <article>
    <p>{post.data.category} · {post.data.pubDate.toLocaleDateString('de-DE')}</p>
    <h1>{post.data.title}</h1>
    <Content />
    <p><a href="/blog/">Zurück zur Übersicht</a></p>
  </article>
</BasisLayout>

getStaticPaths() erzeugt beim statischen Build für jeden Beitrag eine Route. Die id stammt standardmäßig aus dem Dateinamen des Collection-Eintrags. render(post) erzeugt den gerenderten Markdown-Inhalt als <Content />.

3. URL überprüfen

Teste /blog/mein-erster-druck/ und /blog/mein-flugmodell/. Führe danach npm run build aus.

Übung

Füge einen neuen Beitrag servo-reparatur.md in die Collection ein. Kontrolliere, ob die neue Seite ohne Änderung der Routing-Datei erreichbar ist.

Quelle: https://docs.astro.build/de/guides/content-collections/

Alle Beispiele beziehen sich auf ein eigenes Astro-Übungsprojekt. Die Dateipfade sind relativ zum Projekt-Hauptordner angegeben. Die Kursdateien selbst gehören in das Content-Verzeichnis der Know-How-Schmiede, nicht in das Übungsprojekt.