Zum Inhalt springen
Starlight

Frontmatter Referenz

Du kannst einzelne Markdown- und MDX-Seiten in Starlight anpassen, indem du Werte in deren Frontmatter setzt. Zum Beispiel könnte eine normale Seite die Felder title und description setzen:

---
title: Über dieses Projekt
description: Erfahre mehr über das Projekt, an dem ich gerade arbeite.
---


Willkommen auf der Info-Seite!

Frontmatter-Felder

title (erforderlich)

type: string

Du musst für jede Seite einen Titel angeben. Dieser wird oben auf der Seite, in Browser-Tabs und in den Seiten-Metadaten angezeigt.

description

type: string

Die Seitenbeschreibung wird für die Metadaten der Seite verwendet und wird von Suchmaschinen und in der Vorschau von sozialen Medien angezeigt.

editUrl

type: string | boolean

Überschreibt die globale editLink-Konfiguration. Setze die Konfiguration auf false, um den Link Seite bearbeiten für eine bestimmte Seite zu deaktivieren oder gibt eine alternative URL an, unter der der Inhalt dieser Seite bearbeitet werden kann.

type: HeadConfig[]

Du kannst zusätzliche Tags zum <head> deiner Seite hinzufügen, indem du das Feld head Frontmatter verwendest. Dies bedeutet, dass du benutzerdefinierte Stile, Metadaten oder andere Tags zu einer einzelnen Seite hinzufügen kannst. Ähnlich wie bei der globalen head Option.

---
title: Über uns
head:
  # Benutze einen eigenen <title> Tag
  - tag: title
    content: Benutzerdefinierter "Über uns"-Titel
---

tableOfContents

type: false | { minHeadingLevel?: number; maxHeadingLevel?: number; }

Überschreibt die globale tableOfContents-Konfiguration. Passe die einzuschließenden Überschriftsebenen an oder setze sie auf false, um das Inhaltsverzeichnis auf dieser Seite auszublenden.

---
title: Seite mit nur H2s im Inhaltsverzeichnis
tableOfContents:
  minHeadingLevel: 2
  maxHeadingLevel: 2
---
---
title: Seite ohne Inhaltsverzeichnis
tableOfContents: false
---

template

type: 'doc' | 'splash'
default: 'doc'

Legt die Layoutvorlage für diese Seite fest. Seiten verwenden standardmäßig das 'doc'-Layout. Setze den Typen auf 'splash', um ein breiteres Layout ohne Seitenleisten zu verwenden, welches spezifisch für Startseiten entwickelt wurde.

hero

type: HeroConfig

Fügt eine Hero-Komponente oben auf der Seite ein. Kann sehr gut mit template: splash kombiniert werden.

Zum Beispiel zeigt diese Konfiguration einige übliche Optionen, einschließlich des Ladens eines Bildes aus deinem Repository.

---
title: Meine Website
template: splash
hero:
  title: 'Mein Projekt: Schnell ins All'
  tagline: Bringe deine Wertgegenstände im Handumdrehen auf den Mond und wieder zurück.
  image:
    alt: Ein glitzerndes, leuchtend farbiges Logo
    file: ../../assets/logo.png
  actions:
    - text: Erzähl mir mehr
      link: /getting-started/
      icon: right-arrow
      variant: primary
    - text: Schau mal auf GitHub vorbei
      link: https://github.com/astronaut/mein-projekt
      icon: external
---

Du kannst verschiedene Versionen der Hero-Komponente im hellen und dunklen Modus anzeigen.

---
hero:
  image:
    alt: Ein glitzerndes, farbenfrohes Logo
    dark: ../../assets/logo-dark.png
    light: ../../assets/logo-light.png
---

HeroConfig

interface HeroConfig {
  title?: string;
  tagline?: string;
  image?:
    | {
        // Relativer Pfad zu einem Bild in deinem Repository.
        file: string;
        // Alt-Text, um das Bild für unterstützende Technologien zugänglich zu machen
        alt?: string;
      }
    | {
        // Relativer Pfad zu einem Bild in deinem Repository, das für den dunklen Modus verwendet werden soll.
        dark: string;
        // Relativer Pfad zu einem Bild in deinem Repository, das für den hellen Modus verwendet werden soll.
        light: string;
        // Alt-Text, um das Bild für unterstützende Technologien zugänglich zu machen
        alt?: string;
      }
    | {
        // HTML, welches im Bild-Slot verwendet werden soll.
        // Dies kann ein benutzerdefinierter `<img>`-Tag oder ein Inline-`<svg>` sein.
        html: string;
      };
  actions?: Array<{
    text: string;
    link: string;
    variant: 'primary' | 'secondary' | 'minimal';
    icon: string;
  }>;
}

type: { content: string }

Zeigt ein Ankündigungsbanner oben auf dieser Seite an.

Der Wert content kann HTML für Links oder andere Inhalte enthalten. Auf dieser Seite wird beispielsweise ein Banner mit einem Link zu example.com angezeigt.

---
title: Seite mit Banner
banner:
  content: |
    Wir haben gerade etwas Cooles angefangen!
    <a href="https://example.com">Jetzt besuchen</a>
---

lastUpdated

type: Date | boolean

Überschreibt die globale Option lastUpdated. Wenn ein Datum angegeben wird, muss es ein gültiger YAML-Zeitstempel sein und überschreibt somit das im Git-Verlauf für diese Seite gespeicherte Datum.

---
title: Seite mit einem benutzerdefinierten Datum der letzten Aktualisierung
lastUpdated: 2022-08-09
---

prev

type: boolean | string | { link?: string; label?: string }

Überschreibt die globale Option pagination. Wenn eine Zeichenkette angegeben wird, wird der generierte Linktext ersetzt und wenn ein Objekt angegeben wird, werden sowohl der Link als auch der Text überschrieben.

---
# Versteckt den Link zur vorherigen Seite
prev: false
---
---
# Überschreibe den Linktext der vorherigen Seite
prev: Fortsetzung des Tutorials
---
---
# Überschreibe sowohl den Link zur vorherigen Seite als auch den Text
prev:
  link: /unverwandte-seite/
  label: Schau dir diese andere Seite an
---

next

type: boolean | string | { link?: string; label?: string }

Dasselbe wie prev, aber für den Link zur nächsten Seite.

---
# Versteckt den Link zur nächsten Seite
next: false
---

pagefind

type: boolean
default: true

Legt fest, ob diese Seite in den Pagefind-Suchindex aufgenommen werden soll. Setze das Feld auf false, um eine Seite von den Suchergebnissen auszuschließen:

---
# Diese Seite aus dem Suchindex ausblenden
pagefind: false
---

type: SidebarConfig

Steuert, wie diese Seite in der Seitenleiste angezeigt wird, wenn eine automatisch generierte Linkgruppe verwendet wird.

SidebarConfig

interface SidebarConfig {
  label?: string;
  order?: number;
  hidden?: boolean;
  badge?: string | BadgeConfig;
  attrs?: Record<string, string | number | boolean | undefined>;
}

label

type: string
default: the page title

Legt die Bezeichnung für diese Seite in der Seitenleiste fest, wenn sie in einer automatisch erzeugten Linkgruppe angezeigt wird.

---
title: Über dieses Projekt
sidebar:
  label: Infos
---

order

type: number

Steuere die Reihenfolge dieser Seite beim Sortieren einer automatisch erstellten Gruppe von Links. Niedrigere Nummern werden in der Linkgruppe weiter oben angezeigt.

---
title: Erste Seite
sidebar:
  order: 1
---

hidden

type: boolean
default: false

Verhindert, dass diese Seite in eine automatisch generierte Seitenleistengruppe aufgenommen wird.

---
title: Versteckte Seite
sidebar:
  hidden: true
---

badge

type: string | BadgeConfig

Füge der Seite in der Seitenleiste ein Abzeichen hinzu, wenn es in einer automatisch generierten Gruppe von Links angezeigt wird. Bei Verwendung einer Zeichenkette wird das Abzeichen mit einer Standard-Akzentfarbe angezeigt. Optional kann ein BadgeConfig Objekt mit den Feldern text und variant übergeben werden, um das Abzeichen anzupassen.

---
title: Seite mit einem Badge
sidebar:
  # Verwendet die Standardvariante, die der Akzentfarbe deiner Website entspricht
  badge: Neu
---
---
title: Seite mit einem Abzeichen
sidebar:
  badge:
    text: Experimentell
    variant: caution
---

attrs

type: Record<string, string | number | boolean | undefined>

HTML-Attribute, die dem Seitenlink in der Seitenleiste hinzugefügt werden, wenn er in einer automatisch generierten Gruppe von Links angezeigt wird.

---
title: Seite im neuen Tab öffnen
sidebar:
  # Dies öffnet den Link in einem neuen Tab
  attrs:
    target: _blank
---