YAML Front Matter: Metadaten am Anfang einer Markdown-Datei

YAML Front Matter

YAML Front Matter in Markdown: Syntax, Felder und Beispiele | We.Inc

Was YAML Front Matter ist, die Regeln für ---, welche Felder Jekyll, Hugo, Eleventy und Astro lesen, und ein Splitter, der Metadaten und Inhalt deiner eigenen Datei zeigt.

Front Matter ist ein YAML-Block ganz oben in einer Markdown-Datei, der von einer Zeile mit drei Bindestrichen (---) geöffnet und geschlossen wird. Static Site Generators lesen ihn als Daten der Seite, etwa Titel, Datum, Layout und Tags, und rendern alles unterhalb der schließenden Zeile als Seiteninhalt.

Front-Matter-Unterstützung in vier beliebten Static Site Generators

Generator
Formate
Felder, die er selbst liest

Jekyll
YAML zwischen ---
layout, permalink, published; bei Posts: date, category, categories, tags

Hugo
YAML (---), TOML (+++), JSON ({ })
title, date, draft, description, slug, weight, tags

Eleventy
Standardmäßig YAML, dazu ---json und ---js
permalink, layout, tags

Astro
YAML oder TOML
layout (für Markdown-Seiten in src/pages)

Front Matter macht aus einer einfachen Markdown-Datei eine Seite mit Metadaten, und ein einziger falsch gesetzter Bindestrich zerstört das. Füge eine Datei in den Splitter ein, um genau zu sehen, wo die Metadaten enden und der Inhalt beginnt und welche Felder der obersten Ebene er gefunden hat, bevor sich dein Build beschwert.

Füge eine Markdown-Datei ein oder bearbeite den Beispiel-Post.
Der Splitter prüft, ob die allererste Zeile --- (YAML) oder +++ (TOML) ist, und sucht die passende schließende Zeile.
Er zeigt den Front-Matter-Block, die gefundenen einfachen Felder der obersten Ebene und den Inhalt, der gerendert wird.
Wird der Block nie geschlossen, sagt er es dir, denn das ist die häufigste Ursache dafür, dass eine Seite ihre Metadaten als Text anzeigt.

Vor dem öffnenden --- darf nichts stehen, nicht einmal eine Leerzeile oder ein Byte Order Mark, sonst behandeln die meisten Generators den Block als normalen Text.
Setze Titel, die einen Doppelpunkt mit folgendem Leerzeichen enthalten, in Anführungszeichen, etwa "Pricing: what changed", sonst liest YAML sie als verschachteltes Mapping.
Schreibe Datumsangaben als YYYY-MM-DD, damit Generators und YAML-Bibliotheken sie gleich verstehen.
Halte eigene Felder an einem einheitlichen Ort. Hugo hat zum Beispiel einen params-Schlüssel für deine eigenen Werte.

Häufige Fragen

Was ist Front Matter in Markdown?

Es sind Metadaten, die am Anfang einer Markdown-Datei zwischen zwei Trennzeilen stehen. Markdown selbst definiert sie nicht; Static Site Generators und Content-Tools haben sich auf die Konvention geeinigt und lesen sie als Daten, bevor sie den Rest rendern.

Muss Front Matter YAML sein?

YAML ist der übliche Standard, aber nicht die einzige Option. Hugo akzeptiert TOML zwischen +++-Zeilen und JSON in geschweiften Klammern, Eleventy unterstützt ---json und ---js, und Astro akzeptiert ebenfalls TOML.

Warum zeigt meine Seite das Front Matter als Text an?

Meist steht etwas vor dem ersten ---, das schließende --- fehlt oder die öffnende Zeile enthält zusätzliche Zeichen. Der Splitter oben meldet die letzten beiden Fälle sofort.

Darf Front Matter leer sein?

Ja. In Jekyll markiert ein leeres Paar ---Zeilen die Datei trotzdem zur Verarbeitung, so werden in CSS- oder Feed-Dateien Liquid-Tags ohne jegliche Metadaten gerendert.

Wie lese ich Front Matter in meinem eigenen Code?

Teile die Datei an den Trennzeilen, parse den ersten Teil mit einer YAML-Bibliothek und gib den Rest an deinen Markdown-Renderer weiter. Eleventy macht das mit dem Paket gray-matter, das du auch direkt in Node nutzen kannst.

Die Regeln für die Trennzeilen

Die Jekyll-Dokumentation sagt es klar: Front Matter muss das Erste in der Datei sein und gültiges YAML zwischen Zeilen mit drei Bindestrichen enthalten. Andere Generators folgen derselben Form.
Innerhalb des Blocks gilt normales YAML. Rücke mit Leerzeichen ein, setze Werte mit Sonderzeichen in Anführungszeichen und nutze Listen für Tags und Kategorien.

Felder, die sich auf jeder Seite lohnen

Ein Titel und eine Beschreibung decken in den meisten Themes die Seitenüberschrift und das Snippet in den Suchergebnissen ab. Ein Datum sortiert Posts, und draft oder published entscheidet, ob die Seite überhaupt gebaut wird.
Alles andere hängt von deinen Templates ab. Jedes Feld, das du hinzufügst, wird zu Daten, die das Layout ausgeben kann, etwa ein Autorenname, der Pfad zu einem Titelbild oder eine Lesezeit.

Beispiele für Front Matter

Ein Blogpost (YAML)

Ein typischer Post: Titel in Anführungszeichen, weil er einen Doppelpunkt enthält, ein Datum, eine Liste von Tags und ein eigenes author-Feld.

Derselbe Post mit TOML Front Matter (Hugo)

Hugo liest +++ als TOML Front Matter. Eigene Werte stehen unter dem params-Schlüssel.

Front-Matter-Splitter

Füge eine Markdown-Datei ein. Der Splitter findet den Front-Matter-Block, listet seine einfachen Felder der obersten Ebene auf und zeigt den Inhalt, der gerendert wird.

Markdown-Datei

Front Matter ({f})

Gefundene Felder der obersten Ebene

Keine einfachen key: value-Zeilen auf oberster Ebene.

Inhalt

Kein Front Matter: Die erste Zeile ist nicht --- oder +++, daher wird die ganze Datei als Inhalt behandelt.

Der mit {d} geöffnete Block wird nie geschlossen. Füge nach dem letzten Feld eine passende {d}-Zeile hinzu.

Front Matter gefunden und geschlossen.

Feld

Wert wie geschrieben

Kostenlos starten · Keine Kreditkarte nötig

Verwandt: Ratgeber

Produkt

Für wen

Funktionen

Ressourcen

Unternehmen

Sitemap