Astro-Kurs 20: Content Collections einrichten

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

Lernziel: Du organisierst mehrere Beiträge nach einem einheitlichen Schema.

1. Warum eine Collection?

Markdown-Dateien in src/pages/ eignen sich für einzelne Seiten. Für einen Blog mit vielen Beiträgen ist eine Content Collection besser: Jeder Beitrag hat verlässliche Metadaten, und Astro kann die Inhalte gezielt laden.

Wir verwenden die aktuelle Content-Layer-API mit glob() und src/content.config.ts. Ältere Anleitungen mit src/content/config.ts und type: 'content' sind für dieses Beispiel nicht die passende Variante.

2. Ordner und Konfiguration

Erstelle src/content/blog/ und src/content.config.ts:

import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';

const blog = defineCollection({
  loader: glob({ base: './src/content/blog', pattern: '**/*.md' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    category: z.string(),
    tags: z.array(z.string()).default([]),
  }),
});
export const collections = { blog };

Schreibe src/content/blog/mein-erster-druck.md:

---
title: "Mein erster 3D-Druck"
description: "So gelang mein erstes Testteil"
pubDate: 2026-10-25
category: "3D-Druck"
tags: [PLA, Einsteiger]
---

# Mein erster 3D-Druck

Heute zeige ich meine ersten Schritte beim Drucken.

Erstelle einen zweiten Beitrag src/content/blog/mein-flugmodell.md mit denselben Feldern und anderem Inhalt:

---
title: "Mein Flugmodell"
description: "So plane ich mein erstes Flugmodell"
pubDate: 2026-10-24
category: "Modellflug"
tags: [Modellbau]
---

# Mein Flugmodell

Hier dokumentiere ich meine Planung.

3. Beiträge abrufen

Erstelle zunächst src/pages/blog.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>{post.data.title} – {post.data.category}</li>)}
  </ul>
</BasisLayout>

Falls die Typen nicht aktualisiert werden, starte den Entwicklungsserver neu. Die Collection ist noch keine automatische Beitragsroute: Einzelne Beitragsseiten erstellen wir in Teil 21.

Übung

Füge einen dritten Beitrag hinzu. Teste anschließend absichtlich einen Beitrag ohne title: Astro sollte den Schemafehler anzeigen. Korrigiere ihn wieder.

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.