Astro-Kurs 22: Blog und Wissensbereich

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

Lernziel: Du ergänzt Kategorien, Schlagwörter und eine verständliche Beitragsübersicht.

1. Die Blogübersicht verbessern

Bisher listet der Blog nur Titel auf. Jetzt ergänzen wir Beschreibung und Kategorie. Außerdem filtern wir Beiträge über eine Kategorie, die in der URL angegeben wird.

Ersetze src/pages/blog/index.astro durch:

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

const alle = await getCollection('blog');
const kategorien = [...new Set(alle.map(post => post.data.category))].sort();
const posts = alle.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---
<BasisLayout title="Blog">
  <h1>Werkstatt-Blog</h1>
  <p>Wähle ein Thema:</p>
  <ul>
    {kategorien.map(name => <li><a href={`/blog/kategorie/${encodeURIComponent(name)}/`}>{name}</a></li>)}
  </ul>
  <section>
    {posts.map(post => (
      <article>
        <h2><a href={`/blog/${post.id}/`}>{post.data.title}</a></h2>
        <p>{post.data.description}</p>
        <p>Kategorie: {post.data.category}</p>
      </article>
    ))}
  </section>
</BasisLayout>

Wichtig: Für statisches Hosting erzeugen wir echte Kategorieseiten statt Browser-Query-Parameter serverseitig auszuwerten.

2. Kategorieseiten erzeugen

Erstelle src/pages/blog/kategorie/[name].astro:

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

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  const namen = [...new Set(posts.map(post => post.data.category))];
  return namen.map(name => ({
    params: { name },
    props: { name, posts: posts.filter(post => post.data.category === name) },
  }));
}
const { name, posts } = Astro.props;
---
<BasisLayout title={`Kategorie: ${name}`}>
  <h1>Kategorie: {name}</h1>
  <ul>
    {posts.map(post => <li><a href={`/blog/${post.id}/`}>{post.data.title}</a></li>)}
  </ul>
  <p><a href="/blog/">Alle Beiträge</a></p>
</BasisLayout>

Hinweis zur URL: Bei Kategorien mit Leerzeichen oder Umlauten werden diese im Link automatisch URL-kodiert. Nutze später idealerweise eigene stabile Kategorien-Slugs, wenn Kategorien langfristig umbenannt werden können.

3. Was gehört zu einem guten Wissensbereich?

Eine nachvollziehbare Navigation, präzise Beitragstitel, Kategorien, passende Bild-Alternativtexte, mobile Darstellung und Links zwischen verwandten Beiträgen. Suchfunktion, RSS und Pagination können später ergänzt werden.

Übung

Ergänze einen Beitrag in einer neuen Kategorie Elektronik. Prüfe, ob die Kategorie in der Übersicht erscheint und eine eigene Kategorieseite erzeugt wurde.

Ergebnis der Etappe 2

Du hast wiederverwendbare Komponenten, ein Layout, gepflegte CSS-Regeln und einen Blog auf Markdown-Basis mit automatisch erzeugten Beitrags- und Kategorieseiten. Teste abschließend npm run build.

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.