Astro-Kurs 19: Markdown-Frontmatter

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

Lernziel: Du verwaltest Metadaten von Beiträgen mit YAML.

1. Was ist Frontmatter in Markdown?

Am Anfang einer Markdown-Datei können zwischen ----Zeilen Metadaten stehen, beispielsweise Titel, Datum oder Kategorie. Das Format heißt meist YAML. Das ist nicht dasselbe wie das JavaScript-Frontmatter einer .astro-Datei.

Erstelle testweise src/pages/werkstatt-notiz.md:

---
layout: ../layouts/MarkdownLayout.astro
title: "Mein erster 3D-Druck"
description: "Eine kleine Anleitung aus der Werkstatt"
pubDate: 2026-10-25
tags:
  - 3D-Druck
  - Anfänger
---

# Mein erster 3D-Druck

Heute drucke ich ein kleines Testteil.

## Material

- PLA
- 3D-Drucker

2. Markdown-Layout ergänzen

Für Markdown-Dateien unter src/pages muss ein Layout mit der Markdown-Frontmatter umgehen können. Erstelle src/layouts/MarkdownLayout.astro:

---
import BasisLayout from './BasisLayout.astro';
const { frontmatter } = Astro.props;
---
<BasisLayout title={frontmatter.title}>
  <article>
    <p>{frontmatter.description}</p>
    <slot />
  </article>
</BasisLayout>

Jetzt kannst du die URL /werkstatt-notiz aufrufen. Die layout-Angabe in der Markdown-Datei ist ein Sonderfeld für die Darstellung als Seite; title, tags und pubDate sind Metadaten für deine Inhalte.

3. Häufige Fehler

YAML verwendet Einrückungen; nimm Leerzeichen statt Tabulatoren. Setze Zeichenketten bei Bedarf in Anführungszeichen. Unterschiedliche Schreibweisen von Feldern (pubDate gegenüber pubdate) führen später zu Fehlern.

Übung

Ergänze ein weiteres Tag und ändere den Titel. Prüfe den Browser-Tab und die Überschrift.

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.