Configuration Reference
Configure the starlight integration
Section titled “Configure the starlight integration”Starlight ist eine Integration, die auf dem Web-Framework Astro aufbaut. Sie können Ihr Projekt in der Konfigurationsdatei astro.config.mjs konfigurieren:
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.
title (required)
Section titled “title (required)”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", },});description
Section titled “description”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", },});LogoConfig
Section titled “LogoConfig”type LogoConfig = { alt?: string; replacesTitle?: boolean } & ( | { src: string } | { light: string; dark: string });tableOfContents
Section titled “tableOfContents”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.
editLink
Section titled “editLink”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.
sidebar
Section titled “sidebar”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" }, }, ],});Sorting
Section titled “Sorting”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.
Collapsing groups
Section titled “Collapsing groups”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, }, },],Translating labels
Section titled “Translating labels”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', }, ], },],SidebarItem
Section titled “SidebarItem”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; } ));BadgeConfig
Section titled “BadgeConfig”interface BadgeConfig { text: string; variant?: "note" | "tip" | "caution" | "danger" | "success" | "default"; class?: string;}locales
Section titled “locales”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", }, }, }), ],});LocaleConfig
Section titled “LocaleConfig”interface LocaleConfig { label: string; lang?: string; dir?: "ltr" | "rtl";}Sie können für jedes Gebietsschema die folgenden Optionen festlegen:
label (required)
Section titled “label (required)”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.
Root locale
Section titled “Root locale”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.
defaultLocale
Section titled “defaultLocale”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.
social
Section titled “social”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' }, ],}),customCss
Section titled “customCss”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"],});markdown
Section titled “markdown”type: { headingLinks?: boolean }
default: { headingLinks: true }
Configure Starlight’s Markdown processing.
headingLinks
Section titled “headingLinks”type: boolean
default: true
Steuert, ob Überschriften mit einem anklickbaren Ankerlink gerendert werden.
starlight({ markdown: { // Disable Starlight’s clickable heading anchor links. headingLinks: false, },}),expressiveCode
Section titled “expressiveCode”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:
themes
Section titled “themes”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.
useStarlightDarkModeSwitch
Section titled “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.
useStarlightUiThemeColors
Section titled “useStarlightUiThemeColors”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.
pagefind
Section titled “pagefind”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.rankingzur 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.mergeIndexzur Steuerung der Suche über mehrere Websites hinweg finden Sie unter “Searching multiple sites” in der Pagefind-Dokumentation
PagefindOptions
Section titled “PagefindOptions”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; }; }>;}prerender
Section titled “prerender”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.
HeadConfig
Section titled “HeadConfig”interface HeadConfig { tag: string; attrs?: Record<string, string | boolean | undefined>; content?: string;}lastUpdated
Section titled “lastUpdated”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.
pagination
Section titled “pagination”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.
favicon
Section titled “favicon”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", }, }, ],});titleDelimiter
Section titled “titleDelimiter”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.
disable404Route
Section titled “disable404Route”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.
routeMiddleware
Section titled “routeMiddleware”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.
components
Section titled “components”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.
plugins
Section titled “plugins”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.
credits
Section titled “credits”type: boolean
default: false
Aktivieren Sie die Anzeige eines „Built with Starlight“-Links in der Fußzeile Ihrer Website.
starlight({ credits: true,});Configure content collections
Section titled “Configure content collections”Starlight verwendet Astro content collections zum Laden Ihrer Inhalte. Die Inhaltslader und Schemata von Starlight helfen bei der Konfiguration von Sammlungen nach Bedarf.
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() }),};Loaders
Section titled “Loaders”Starlight exportiert das folgende Astro loaders aus dem Modul @astrojs/starlight/loaders, um die Konfiguration von Inhaltssammlungen zu vereinfachen.
docsLoader()
Section titled “docsLoader()”docsLoader() lädt lokale Markdown-, MDX- und Markdoc-Dateien aus dem Verzeichnis src/content/docs/.
Dateinamen, die mit einem Unterstrich (_) beginnen, werden ignoriert.
Import
Section titled “Import”import { docsLoader } from "@astrojs/starlight/loaders";Options
Section titled “Options”generateId()
Section titled “generateId()”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()
Section titled “i18nLoader()”i18nLoader() lädt lokale JSON- und YAML-Dateien aus dem Verzeichnis src/content/i18n/.
Dateinamen, die mit einem Unterstrich (_) beginnen, werden ignoriert.
Import
Section titled “Import”import { i18nLoader } from "@astrojs/starlight/loaders";Options
Section titled “Options”Derzeit gibt es keine Optionen zum Konfigurieren von i18nLoader().
Schemas
Section titled “Schemas”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()
Section titled “docsSchema()”docsSchema() analysiert Frontmatter für alle Ihre Inhalte in der docs-Sammlung.
Import
Section titled “Import”import { docsSchema } from "@astrojs/starlight/schema";Options
Section titled “Options”extend
Section titled “extend”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()
Section titled “i18nSchema()”i18nSchema() analysiert alle Datendateien in der i18n-Sammlung.
Import
Section titled “Import”import { i18nSchema } from "@astrojs/starlight/schema";Options
Section titled “Options”extend
Section titled “extend”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”.
