Skip to content

Configuration Reference

Starlight ist eine Integration, die auf dem Web-Framework Astro aufbaut. Sie können Ihr Projekt in der Konfigurationsdatei astro.config.mjs konfigurieren:

astro.config.mjs
import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
export default defineConfig({
integrations: [
starlight({
title: "My delightful docs site",
}),
],
});

Sie können die folgenden Optionen an die starlight-Integration übergeben.

type: string | Record<string, string>

Legen Sie den Titel für Ihre Website fest. Wird in Metadaten und im Titel der Browser-Registerkarte verwendet.

Der Wert kann eine Zeichenfolge oder bei mehrsprachigen Websites ein Objekt mit Werten für jedes unterschiedliche Gebietsschema sein. Bei Verwendung der Objektform müssen die Schlüssel BCP-47-Tags sein (z. B. en, ar oder zh-CN):

starlight({
title: {
en: "My delightful docs site",
de: "Meine bezaubernde Dokumentationsseite",
},
});

type: string

Legen Sie die Beschreibung für Ihre Website fest. Wird in Metadaten verwendet, die mit Suchmaschinen im <meta name="description">-Tag geteilt werden, wenn description nicht im Frontmatter einer Seite festgelegt ist.

type: LogoConfig

Legen Sie ein Logo fest, das in der Navigationsleiste neben oder anstelle des Seitentitels angezeigt wird. Sie können entweder eine einzelne src-Eigenschaft festlegen oder separate Bildquellen für light und dark festlegen.

starlight({
logo: {
src: "./src/assets/my-logo.svg",
},
});
type LogoConfig = { alt?: string; replacesTitle?: boolean } & (
| { src: string }
| { light: string; dark: string }
);

type: false | { minHeadingLevel?: number; maxHeadingLevel?: number }
default: { minHeadingLevel: 2, maxHeadingLevel: 3 }

Konfigurieren Sie das rechts auf jeder Seite angezeigte Inhaltsverzeichnis. Standardmäßig werden die Überschriften <h2> und <h3> in dieses Inhaltsverzeichnis aufgenommen.

type: { baseUrl: string }

Aktivieren Sie die Links „Diese Seite bearbeiten“, indem Sie die Basis-URL festlegen, die diese verwenden sollen. Der letzte Link lautet editLink.baseUrl + der aktuelle Seitenpfad. So aktivieren Sie beispielsweise die Bearbeitung von Seiten im withastro/starlight-Repository auf GitHub:

starlight({
editLink: {
baseUrl: "https://github.com/withastro/starlight/edit/main/",
},
});

Mit dieser Konfiguration hätte eine /introduction-Seite einen Bearbeitungslink, der auf https://github.com/withastro/starlight/edit/main/src/content/docs/introduction.md verweist.

type: SidebarItem[]

Konfigurieren Sie die Seitenleisten-Navigationselemente Ihrer Website.

Eine Seitenleiste ist eine Reihe von Links und Linkgruppen. Mit Ausnahme von Elementen, die slug verwenden, muss jedes Element einen label und eine der folgenden Eigenschaften haben:

  • link — a single link to a specific URL, e.g. '/home' or 'https://example.com'.

  • slug — a reference to an internal page, e.g. 'guides/getting-started'.

  • items – ein Array mit weiteren Seitenleisten-Links und Untergruppen.

  • autogenerate – ein Objekt, das ein Verzeichnis Ihrer Dokumente angibt, aus dem automatisch eine Gruppe von Links generiert werden soll.

Interne Links können mit einer slug-Eigenschaft auch als String anstelle eines Objekts angegeben werden.

starlight({
sidebar: [
// A single link item labelled “Home”.
{ label: "Home", link: "/" },
// A group labelled “Start Here” containing four links.
{
label: "Start Here",
items: [
// Using `slug` for internal links.
{ slug: "intro" },
{ slug: "installation" },
// Or using the shorthand for internal links.
"tutorial",
"next-steps",
],
},
// A group linking to all pages in the reference directory.
{
label: "Reference",
autogenerate: { directory: "reference" },
},
],
});

Automatisch generierte Seitenleistengruppen werden alphabetisch nach Dateinamen sortiert. Beispielsweise würde eine aus astro.md generierte Seite über der Seite für starlight.md erscheinen.

Gruppen von Links werden standardmäßig erweitert. Sie können dieses Verhalten ändern, indem Sie die Eigenschaft collapsed einer Gruppe auf true setzen.

Automatisch generierte Untergruppen berücksichtigen standardmäßig die Eigenschaft collapsed ihrer übergeordneten Gruppe. Legen Sie die Eigenschaft autogenerate.collapsed fest, um dies zu überschreiben.

sidebar: [
// A collapsed group of links.
{
label: 'Collapsed Links',
collapsed: true,
items: ['intro', 'next-steps'],
},
// An expanded group containing collapsed autogenerated subgroups.
{
label: 'Reference',
autogenerate: {
directory: 'reference',
collapsed: true,
},
},
],

Wenn Ihre Site mehrsprachig ist, wird davon ausgegangen, dass sich label jedes Elements im Standardgebietsschema befindet. Sie können eine translations-Eigenschaft festlegen, um Bezeichnungen für Ihre anderen unterstützten Sprachen bereitzustellen:

sidebar: [
// An example sidebar with labels translated to Brazilian Portuguese.
{
label: 'Start Here',
translations: { 'pt-BR': 'Comece Aqui' },
items: [
{
label: 'Getting Started',
translations: { 'pt-BR': 'Introdução' },
link: '/getting-started',
},
{
label: 'Project Structure',
translations: { 'pt-BR': 'Estrutura de Projetos' },
link: '/structure',
},
],
},
],
type SidebarItem =
| string
| ({
translations?: Record<string, string>;
badge?: string | BadgeConfig;
} & (
| {
// Link
link: string;
label: string;
attrs?: Record<string, string | number | boolean | undefined>;
}
| {
// Internal link
slug: string;
label?: string;
attrs?: Record<string, string | number | boolean | undefined>;
}
| {
// Group of links
label: string;
items: SidebarItem[];
collapsed?: boolean;
}
| {
// Autogenerated link group
label: string;
autogenerate: {
directory: string;
collapsed?: boolean;
attrs?: Record<string, string | number | boolean | undefined>;
};
collapsed?: boolean;
}
));
interface BadgeConfig {
text: string;
variant?: "note" | "tip" | "caution" | "danger" | "success" | "default";
class?: string;
}

type: { [dir: string]: LocaleConfig }

Configure internationalization (i18n) für Ihre Site, indem Sie festlegen, welche locales unterstützt werden.

Jeder Eintrag sollte als Schlüssel das Verzeichnis verwenden, in dem die Dateien dieser Sprache gespeichert sind.

import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
export default defineConfig({
integrations: [
starlight({
title: "My Site",
// Set English as the default language for this site.
defaultLocale: "en",
locales: {
// English docs in `src/content/docs/en/`
en: {
label: "English",
},
// Simplified Chinese docs in `src/content/docs/zh-cn/`
"zh-cn": {
label: "简体中文",
lang: "zh-CN",
},
// Arabic docs in `src/content/docs/ar/`
ar: {
label: "العربية",
dir: "rtl",
},
},
}),
],
});
interface LocaleConfig {
label: string;
lang?: string;
dir?: "ltr" | "rtl";
}

Sie können für jedes Gebietsschema die folgenden Optionen festlegen:

type: string

Die Bezeichnung für diese Sprache, die Benutzern beispielsweise im Sprachumschalter angezeigt wird. Am häufigsten möchten Sie, dass dies der Name der Sprache ist, da ein Benutzer dieser Sprache erwarten würde, ihn zu lesen, z. B. "English", "العربية" oder "简体中文".

type: string

Das BCP-47-Tag für diese Sprache, z.B. "en", "ar" oder "zh-CN". Wenn nicht festgelegt, wird standardmäßig der Verzeichnisname der Sprache verwendet. Sprach-Tags mit regionalen Untertags (z. B. "pt-BR" oder "en-US") verwenden integrierte UI-Übersetzungen für ihre Basissprache, wenn keine regionsspezifischen Übersetzungen gefunden werden.

type: 'ltr' | 'rtl'

Die Schreibrichtung dieser Sprache; "ltr" für von links nach rechts (Standard) oder "rtl" für von rechts nach links.

Sie können die Standardsprache ohne ein /lang/-Verzeichnis bereitstellen, indem Sie ein root-Gebietsschema festlegen:

starlight({
locales: {
root: {
label: "English",
lang: "en",
},
fr: {
label: "Français",
},
},
});

Auf diese Weise können Sie beispielsweise /getting-started/ als englische Route bereitstellen und /fr/getting-started/ als entsprechende französische Seite verwenden.

type: string

Legen Sie die Standardsprache für diese Site fest. Der Wert sollte mit einem der Schlüssel Ihres locales-Objekts übereinstimmen. (Wenn Ihre Standardsprache root locale ist, können Sie dies überspringen.)

Das Standardgebietsschema wird verwendet, um Ersatzinhalte bereitzustellen, bei denen Übersetzungen fehlen.

type: Array<{ label: string; icon: StarlightIcon; href: string }>

Optionale Details zu den Social-Media-Konten für diese Website. Jeder Eintrag wird als Symbollink im Site-Header angezeigt.

starlight({
social: [
{ icon: 'codeberg', label: 'Codeberg', href: 'https://codeberg.org/knut' },
{ icon: 'discord', label: 'Discord', href: 'https://astro.build/chat' },
{ icon: 'github', label: 'GitHub', href: 'https://github.com/withastro' },
{ icon: 'gitlab', label: 'GitLab', href: 'https://gitlab.com/delucis' },
{ icon: 'mastodon', label: 'Mastodon', href: 'https://m.webtoo.ls/@astro' },
],
}),

type: string[]

Stellen Sie CSS-Dateien bereit, um das Erscheinungsbild Ihrer Starlight-Site anzupassen.

Unterstützt lokale CSS-Dateien relativ zum Stammverzeichnis Ihres Projekts, z. './src/custom.css' und CSS, das Sie als npm-Modul installiert haben, z. B. '@fontsource/roboto'.

starlight({
customCss: ["./src/custom-styles.css", "@fontsource/roboto"],
});

type: { headingLinks?: boolean }
default: { headingLinks: true }

Configure Starlight’s Markdown processing.

type: boolean
default: true

Steuert, ob Überschriften mit einem anklickbaren Ankerlink gerendert werden.

starlight({
markdown: {
// Disable Starlight’s clickable heading anchor links.
headingLinks: false,
},
}),

type: StarlightExpressiveCodeOptions | boolean
default: true

Starlight verwendet Expressive Code, um Codeblöcke zu rendern und Unterstützung für das Hervorheben von Teilen von Codebeispielen, das Hinzufügen von Dateinamen zu Codeblöcken und mehr hinzuzufügen. Sehen Sie sich “Code blocks” guide an, um zu erfahren, wie Sie die Expressive-Code-Syntax in Ihren Markdown- und MDX-Inhalten verwenden.

Sie können alle Standardeigenschaften Expressive Code configuration options sowie einige Starlight-spezifische Eigenschaften verwenden, indem Sie sie in der Option expressiveCode von Starlight festlegen. Legen Sie beispielsweise die Option styleOverrides von Expressive Code fest, um das Standard-CSS zu überschreiben. Dies ermöglicht Anpassungen, z. B. indem Sie Ihren Codeblöcken abgerundete Ecken verleihen:

starlight({
expressiveCode: {
styleOverrides: { borderRadius: "0.5rem" },
},
});

Wenn Sie Expressive Code deaktivieren möchten, legen Sie expressiveCode: false in Ihrer Starlight-Konfiguration fest:

starlight({
expressiveCode: false,
});

Zusätzlich zu den standardmäßigen Expressive-Code-Optionen können Sie in Ihrer expressiveCode-Konfiguration auch die folgenden Starlight-spezifischen Eigenschaften festlegen, um das Designverhalten für Ihre Codeblöcke weiter anzupassen:

type: Array<string | ThemeObject | ExpressiveCodeTheme>
default: ['starlight-dark', 'starlight-light']

Legen Sie die Themen fest, die zum Stylen von Codeblöcken verwendet werden. Einzelheiten zu den unterstützten Designformaten finden Sie unter Expressive Code themes documentation.

Starlight verwendet standardmäßig die dunkle und helle Variante von Sarah Drasners Night Owl theme.

Wenn Sie mindestens ein dunkles und ein helles Thema bereitstellen, synchronisiert Starlight automatisch das aktive Codeblock-Thema mit dem aktuellen Site-Thema. Konfigurieren Sie dieses Verhalten mit der Option useStarlightDarkModeSwitch.

type: boolean
default: true

Bei true wechseln Codeblöcke automatisch zwischen hellen und dunklen Themen, wenn sich das Site-Thema ändert. Bei false müssen Sie CSS manuell hinzufügen, um den Wechsel zwischen mehreren Themes zu handhaben.

type: boolean
Standard: true, wenn themes nicht festgelegt ist, andernfalls false

Bei true werden die CSS-Variablen von Starlight für die Farben von Codeblock-UI-Elementen (Hintergründe, Schaltflächen, Schatten usw.) verwendet, passend zu site color theme. Bei false werden für diese Elemente die vom aktiven Syntaxhervorhebungsthema bereitgestellten Farben verwendet.

type: boolean | PagefindOptions
default: true

Configure Starlight’s default site search provider Pagefind.

Legen Sie false fest, um die Indizierung Ihrer Website mit Pagefind zu deaktivieren. Dadurch wird auch die Standard-Suchoberfläche ausgeblendet, sofern diese verwendet wird.

Pagefind kann nicht aktiviert werden, wenn die Option prerender auf false gesetzt ist.

Legen Sie pagefind auf ein Objekt fest, um den Pagefind-Suchclient zu konfigurieren:

  • Weitere Einzelheiten zur Verwendung der Option pagefind.ranking zur Steuerung der Berechnung der Rangfolge der Suchergebnisse finden Sie unter “Customize Pagefind’s result ranking” in der Pagefind-Dokumentation
  • Weitere Informationen zur Verwendung der Option pagefind.mergeIndex zur Steuerung der Suche über mehrere Websites hinweg finden Sie unter “Searching multiple sites” in der Pagefind-Dokumentation
interface PagefindOptions {
ranking?: {
pageLength?: number;
termFrequency?: number;
termSaturation?: number;
termSimilarity?: number;
};
indexWeight?: number;
mergeIndex?: Array<{
bundlePath: string;
indexWeight?: number;
basePath?: string;
baseUrl?: string;
mergeFilter?: Record<string, string | string[]>;
language?: string;
ranking?: {
pageLength?: number;
termFrequency?: number;
termSaturation?: number;
termSimilarity?: number;
};
}>;
}

type: boolean
default: true

Define whether Starlight pages should be pre-rendered to static HTML or on-demand rendered by an SSR adapter.

Starlight-Seiten werden standardmäßig vorgerendert. Wenn Sie einen SSR-Adapter verwenden und Starlight-Seiten bei Bedarf rendern möchten, legen Sie prerender: false fest.

type: HeadConfig[]

Fügen Sie benutzerdefinierte Tags zum <head> Ihrer Starlight-Site hinzu. Kann nützlich sein, um Analysen und andere Skripte und Ressourcen von Drittanbietern hinzuzufügen.

starlight({
head: [
// Example: add Fathom analytics script tag.
{
tag: "script",
attrs: {
src: "https://cdn.usefathom.com/script.js",
"data-site": "MY-FATHOM-ID",
defer: true,
},
},
],
});

Einträge in head werden direkt in HTML-Elemente konvertiert und durchlaufen nicht die script- oder style-Verarbeitung von Astro. Wenn Sie lokale Assets wie Skripte, Stile oder Bilder importieren müssen, override the Head component.

interface HeadConfig {
tag: string;
attrs?: Record<string, string | boolean | undefined>;
content?: string;
}

type: boolean
default: false

Steuern Sie, ob in der Fußzeile angezeigt wird, wann die Seite zuletzt aktualisiert wurde.

Standardmäßig basiert diese Funktion auf dem Git-Verlauf Ihres Repositorys und ist auf einigen Bereitstellungsplattformen, die shallow clones ausführen, möglicherweise nicht genau. Eine Seite kann diese Einstellung oder das Git-basierte Datum mithilfe von lastUpdated frontmatter field überschreiben.

type: boolean
default: true

Legen Sie fest, ob die Fußzeile Links zur vorherigen und nächsten Seite enthalten soll.

Eine Seite kann diese Einstellung oder den Linktext und/oder die URL mithilfe der Frontmatter-Felder prev und next überschreiben.

type: string
default: '/favicon.svg'

Legen Sie den Pfad des Standard-Favicons für Ihre Website fest, das sich im Verzeichnis public/ befinden und eine gültige Symboldatei (.ico, .gif, .jpg, .png oder .svg) sein sollte.

starlight({
favicon: '/images/favicon.svg',
}),

Wenn Sie zusätzliche Varianten oder Fallback-Favicons festlegen müssen, können Sie Tags mithilfe von head option hinzufügen:

starlight({
favicon: "/images/favicon.svg",
head: [
// Add ICO favicon fallback for Safari.
{
tag: "link",
attrs: {
rel: "icon",
href: "/images/favicon.ico",
sizes: "32x32",
},
},
],
});

type: string
default: '|'

Legt das Trennzeichen zwischen Seitentitel und Site-Titel im <title>-Tag der Seite fest, das auf Browser-Registerkarten angezeigt wird.

Standardmäßig hat jede Seite einen <title> von Page Title | Site Title. Diese Seite trägt beispielsweise den Titel „Konfigurationsreferenz“ und diese Site trägt den Titel „Starlight“, sodass <title> für diese Seite „Konfigurationsreferenz | Starlight“ lautet.

type: boolean
default: false

Deaktiviert das Einfügen von Starlights Standard-404 page. Um eine benutzerdefinierte src/pages/404.astro-Route in Ihrem Projekt zu verwenden, legen Sie diese Option auf true fest.

type: string | string[]

Stellen Sie Pfade zur Weiterleitung von Middleware bereit, die die Art und Weise ändern können, wie Starlight Ihre Daten verarbeitet. Diese Dateipfade dürfen nicht mit Astro’s middleware in Konflikt stehen.

Weitere Informationen zum Erstellen von Routen-Middleware finden Sie unter Route Data guide.

type: Record<string, string>

Geben Sie die Pfade zu Komponenten an, um die Standardimplementierungen von Starlight zu überschreiben.

starlight({
components: {
SocialLinks: "./src/components/MySocialLinks.astro",
},
});

Einzelheiten zu allen Komponenten, die Sie überschreiben können, finden Sie unter Overrides Reference.

type: StarlightPlugin[]

Erweitern Sie Starlight mit benutzerdefinierten Plugins. Plugins wenden Änderungen an Ihrem Projekt an, um die Funktionen von Starlight zu modifizieren oder zu ergänzen.

Besuchen Sie plugins showcase, um eine Liste der verfügbaren Plugins anzuzeigen.

starlight({
plugins: [starlightPlugin()],
});

Weitere Informationen zum Erstellen eigener Plugins finden Sie unter Plugins Reference.

type: boolean
default: false

Aktivieren Sie die Anzeige eines „Built with Starlight“-Links in der Fußzeile Ihrer Website.

starlight({
credits: true,
});

Starlight verwendet Astro content collections zum Laden Ihrer Inhalte. Die Inhaltslader und Schemata von Starlight helfen bei der Konfiguration von Sammlungen nach Bedarf.

src/content.config.ts
import { defineCollection } from "astro:content";
import { docsLoader, i18nLoader } from "@astrojs/starlight/loaders";
import { docsSchema, i18nSchema } from "@astrojs/starlight/schema";
export const collections = {
docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
// Optional: the i18n collection is used to translate UI in multilingual sites
i18n: defineCollection({ loader: i18nLoader(), schema: i18nSchema() }),
};

Starlight exportiert das folgende Astro loaders aus dem Modul @astrojs/starlight/loaders, um die Konfiguration von Inhaltssammlungen zu vereinfachen.

docsLoader() lädt lokale Markdown-, MDX- und Markdoc-Dateien aus dem Verzeichnis src/content/docs/. Dateinamen, die mit einem Unterstrich (_) beginnen, werden ignoriert.

import { docsLoader } from "@astrojs/starlight/loaders";

type: ({ entry: string; base: URL; data: Record<string, unknown> }) => string

Standardmäßig verarbeiten mit docsLoader() generierte Seiten Ihre Dateinamen mit einem Sluggifier, der Sonderzeichen entfernt und den Dateinamen in Kleinbuchstaben schreibt. Wenn Sie diesen Standardwert überschreiben möchten, stellen Sie Ihre eigene benutzerdefinierte generateId()-Funktion bereit.

Dies kann beispielsweise nützlich sein, um Sonderzeichen beizubehalten, die entfernt würden. By default, Example.File.md would be served at /examplefile. Wenn Sie es unter /Example.File bereitstellen möchten, können Sie dies tun, indem Sie eine benutzerdefinierte generateId()-Funktion definieren:

docsLoader({
// Remove the `.md` or `.mdx` extension, but otherwise don’t process filenames.
generateId: ({ entry }) => entry.split('.').slice(0, -1).join('.'),
}),

Weitere Einzelheiten finden Sie unter generateId() in the Astro docs.

i18nLoader() lädt lokale JSON- und YAML-Dateien aus dem Verzeichnis src/content/i18n/. Dateinamen, die mit einem Unterstrich (_) beginnen, werden ignoriert.

import { i18nLoader } from "@astrojs/starlight/loaders";

Derzeit gibt es keine Optionen zum Konfigurieren von i18nLoader().

Starlight stellt das folgende content collection schemas aus dem Modul @astrojs/starlight/schema bereit. Diese Schemata müssen für die Sammlungen docs und i18n verwendet werden, von denen Starlight abhängt.

docsSchema() analysiert Frontmatter für alle Ihre Inhalte in der docs-Sammlung.

import { docsSchema } from "@astrojs/starlight/schema";

Typ: Zod-Schema oder Funktion, die ein Zod-Schema zurückgibt default: z.object({})

Erweitern Sie das Frontmatter-Schema von Starlight um zusätzliche Felder. Weitere Informationen zur Verwendung der Option extend finden Sie unter “Customize frontmatter schema”.

i18nSchema() analysiert alle Datendateien in der i18n-Sammlung.

import { i18nSchema } from "@astrojs/starlight/schema";

type: Zod object
default: z.object({})

Erweitern Sie das i18n-Schema von Starlight um zusätzliche Felder. Weitere Informationen zur Verwendung der Option extend finden Sie unter “Extend translation schema”.

Dieses Design anfragen