diff --git a/docs/src/content/docs/de/guides/overriding-components.mdx b/docs/src/content/docs/de/guides/overriding-components.mdx index 23193c8a841..aa04232337c 100644 --- a/docs/src/content/docs/de/guides/overriding-components.mdx +++ b/docs/src/content/docs/de/guides/overriding-components.mdx @@ -36,10 +36,11 @@ Die Standardkomponenten von Starlight zu überschreiben kann nützlich sein, wen ```astro --- // src/components/EmailLink.astro - import type { Props } from '@astrojs/starlight/props'; + + const email = 'houston@example.com'; --- - Schreib mir + Schreib mir ``` 3. Sage Starlight, dass deine benutzerdefinierte Komponente in der Konfigurationsoption [`components`](/de/reference/configuration/#components) in `astro.config.mjs` verwendet werden soll: @@ -70,34 +71,29 @@ Du kannst mit den Standard-UI-Komponenten von Starlight genauso arbeiten, wie du Das folgende Beispiel zeigt eine benutzerdefinierte Komponente, die einen E-Mail-Link zusammen mit der Standardkomponente `SocialIcons` rendert: -```astro {4,8} +```astro {3,7} --- // src/components/EmailLink.astro -import type { Props } from '@astrojs/starlight/props'; import Default from '@astrojs/starlight/components/SocialIcons.astro'; --- Schreib mir - + ``` -Beim Rendern einer integrierten Komponente innerhalb einer benutzerdefinierten Komponente: - -- Verbreite `Astro.props` darin. Dadurch wird sichergestellt, dass es alle Daten erhält, die es zum Rendern benötigt. -- Füge einen [``](https://docs.astro.build/de/basics/astro-components/#slots) innerhalb der Standardkomponente hinzu. Dadurch wird sichergestellt, dass Astro weiß, wo die Komponente gerendert werden muss, wenn der Komponente untergeordnete Elemente übergeben werden. +Wenn du eine eingebaute Komponente innerhalb einer benutzerdefinierten Komponente renderst, füge ein [``](https://docs.astro.build/de/basics/astro-components/#slots) innerhalb der Standardkomponente hinzu. Dadurch wird sichergestellt, dass Astro weiß, wo die Komponente gerendert werden soll, wenn sie Kindelemente erhält. Wenn du die Komponenten [`PageFrame`](/de/reference/overrides/#pageframe) oder [`TwoColumnContent`](/de/reference/overrides/#twocolumncontent) wiederverwendst, die [benannte Slots](https://docs.astro.build/de/basics/astro-components/#benannte-slots) enthalten, musst du auch diese Slots [übertragen](https://docs.astro.build/de/basics/astro-components/#slots-weitergeben). Das folgende Beispiel zeigt eine benutzerdefinierte Komponente, die die Komponente `TwoColumnContent` wiederverwendet. Diese integrierte Komponente enthält einen zusätzlichen benannten Slot, nämlich `right-sidebar`, welcher übertragen werden muss: -```astro {9} +```astro {8} --- // src/components/CustomContent.astro -import type { Props } from '@astrojs/starlight/props'; import Default from '@astrojs/starlight/components/TwoColumnContent.astro'; --- - + @@ -105,17 +101,16 @@ import Default from '@astrojs/starlight/components/TwoColumnContent.astro'; ## Seitendaten verwenden -Beim Überschreiben einer Starlight-Komponente erhält deine benutzerdefinierte Implementierung ein Standardobjekt `Astro.props`, das alle Daten für die aktuelle Seite enthält. +Wenn du eine Starlight-Komponente überschreibst, kannst du auf das globale [`starlightRoute`-Objekt](/de/guides/route-data/) zugreifen, das alle Daten für die aktuelle Seite enthält. Dadurch kannst du diese Werte verwenden, um zu steuern, wie deine Komponentenvorlage gerendert wird. -Beispielsweise kannst du die Frontmatter-Werte der Seite als `Astro.props.entry.data` lesen. Im folgenden Beispiel verwendet eine Ersatzkomponente [`PageTitle`](/de/reference/overrides/#pagetitle) dies, um den Titel der aktuellen Seite anzuzeigen: +Im folgenden Beispiel zeigt eine Ersatzkomponente [`PageTitle`](/de/reference/overrides/#pagetitle) den Titel der aktuellen Seite an, wie er im Frontmatter des Inhalts festgelegt wird: -```astro {5} "{title}" +```astro {4} "{title}" --- // src/components/Title.astro -import type { Props } from '@astrojs/starlight/props'; -const { title } = Astro.props.entry.data; +const { title } = Astro.locals.starlightRoute.entry.data; ---

{title}

@@ -127,28 +122,27 @@ const { title } = Astro.props.entry.data; ``` -Erfahre mehr über alle verfügbaren Requisiten in der [Komponenten-Ersetzung Referenz](/de/reference/overrides/#komponenteneigenschaften-props). +Weitere Informationen zu allen verfügbaren Eigenschaften findest du in der [Routendaten-Referenz](/de/reference/route-data/). ### Nur auf bestimmten Seiten überschreiben -Komponentenüberschreibungen gelten für alle Seiten. Du kannst jedoch bedingt mit Werten aus `Astro.props` rendern, um zu bestimmen, wann deine benutzerdefinierte Benutzeroberfläche, wann die Standardbenutzeroberfläche von Starlight oder sogar etwas völlig anderes angezeigt werden soll. +Komponentenüberschreibungen gelten für alle Seiten. Du kannst jedoch bedingt mit Werten aus `starlightRoute` rendern, um zu bestimmen, wann deine benutzerdefinierte Benutzeroberfläche, wann die Standardbenutzeroberfläche von Starlight oder sogar etwas völlig anderes angezeigt werden soll. Im folgenden Beispiel zeigt eine Komponente, die Starlights [`Footer`](/de/reference/overrides/#fußzeile) überschreibt, nur auf der Startseite „Verwendet Starlight 🌟“ an und zeigt ansonsten auf allen anderen Seiten die Standardfußzeile an: ```astro --- // src/components/ConditionalFooter.astro -import type { Props } from '@astrojs/starlight/props'; import Default from '@astrojs/starlight/components/Footer.astro'; -const isHomepage = Astro.props.id === ''; +const isHomepage = Astro.locals.starlightRoute.id === ''; --- { isHomepage ? (
Verwendet Starlight 🌟
) : ( - + ) diff --git a/docs/src/content/docs/de/guides/route-data.mdx b/docs/src/content/docs/de/guides/route-data.mdx new file mode 100644 index 00000000000..8ffb27040ef --- /dev/null +++ b/docs/src/content/docs/de/guides/route-data.mdx @@ -0,0 +1,139 @@ +--- +title: Routendaten +description: Erfahre, wie das Seitendatenmodell von Starlight zum Rendern deiner Seiten verwendet wird und wie du es anpassen kannst. +--- + +import { Steps } from '@astrojs/starlight/components'; + +Wenn Starlight eine Seite in deiner Dokumentation rendert, erstellt es zunächst ein Routendatenobjekt, das den Inhalt der Seite darstellt. +In diesem Leitfaden wird erklärt, wie Routendaten erzeugt werden, wie du sie verwendest und wie du sie anpassen kannst, um das Standardverhalten von Starlight zu ändern. + +Eine vollständige Liste der verfügbaren Eigenschaften findest du in der [„Routendaten-Referenz“](/de/reference/route-data/). + +## Was sind Routendaten? + +Starlight-Routendaten sind in einem Objekt enthalten, welches alle Informationen enthält, die zum Rendern einer einzelnen Seite benötigt werden. +Es enthält Informationen für die aktuelle Seite sowie Daten, die aus deiner Starlight-Konfiguration generiert werden. + +## Routendaten verwenden + +Alle Starlight-Komponenten verwenden Routendaten, um zu entscheiden, was für jede Seite gerendert werden soll. +Zum Beispiel wird die Zeichenkette [`siteTitle`](/de/reference/route-data/#sitetitle) verwendet, um den Titel der Seite anzuzeigen, und das Array [`sidebar`](/de/reference/route-data/#sidebar) wird verwendet, um die globale Navigation der Seitenleiste darzustellen. + +Du kannst auf diese Daten über das Global `Astro.locals.starlightRoute` in Astro-Komponenten zugreifen: + +```astro title="example.astro" {2} +--- +const { siteTitle } = Astro.locals.starlightRoute; +--- + +

Der Titel dieser Seite lautet „{siteTitle}“

+``` + +Das kann zum Beispiel nützlich sein, wenn du [Komponentenüberschreibungen](/de/guides/overriding-components/) erstellst, um die Anzeige anzupassen. + +## Anpassen der Routendaten + +Starlights Routendaten funktionieren sofort und müssen nicht konfiguriert werden. +Für fortgeschrittene Anwendungsfälle möchtest du jedoch vielleicht die Routendaten für einige oder alle Seiten anpassen, um die Darstellung deiner Website zu verändern. + +Das ist ein ähnliches Konzept wie die [Komponentenersetzung](/de/guides/overriding-components/), aber anstatt zu ändern, wie Starlight deine Daten rendert, änderst du die Daten, die Starlight rendert. + +### Wann du die Routendaten anpassen solltest + +Das Anpassen von Routendaten kann nützlich sein, wenn du die Art und Weise, wie Starlight deine Daten verarbeitet, auf eine Weise ändern möchtest, die mit den bestehenden Konfigurationsoptionen nicht möglich ist. + +Du kannst zum Beispiel die Elemente in der Seitenleiste filtern oder die Titel für bestimmte Seiten anpassen. +Bei Änderungen wie dieser müssen die Standardkomponenten von Starlight nicht geändert werden, sondern nur die Daten, die an diese Komponenten übergeben werden. + +### Wie du die Routendaten anpasst + +Du kannst die Routendaten mithilfe einer speziellen Form von „Middleware“ anpassen. +Dies ist eine Funktion, die jedes Mal aufgerufen wird, wenn Starlight eine Seite rendert, und die Werte im Routendatenobjekt ändern kann. + + + +1. Erstelle eine neue Datei, die eine `onRequest`-Funktion mit Starlights `defineRouteMiddleware()`-Dienstprogramm exportiert: + + ```ts + // src/routeData.ts + import { defineRouteMiddleware } from '@astrojs/starlight/route-data'; + + export const onRequest = defineRouteMiddleware(() => {}); + ``` + +2. Teile Starlight in der Datei `astro.config.mjs` mit, wo sich deine Routendaten-Middleware-Datei befindet: + + ```js ins={9} + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Meine wunderbare Dokumentationswebsite', + routeMiddleware: './src/routeData.ts', + }), + ], + }); + ``` + +3. Aktualisiere deine `onRequest`-Funktion, um die Routendaten zu ändern. + + Das erste Argument, das deine Middleware erhält, ist [Astros `context`-Objekt](https://docs.astro.build/de/reference/api-reference/). + Es enthält alle Informationen über die aktuell gerenderte Seite, einschließlich der aktuellen URL und `locals`. + + In diesem Beispiel werden wir unsere Dokumente spannender machen, indem wir ein Ausrufezeichen am Ende jedes Seitentitels hinzufügen. + + ```ts + // src/routeData.ts + import { defineRouteMiddleware } from '@astrojs/starlight/route-data'; + + export const onRequest = defineRouteMiddleware((context) => { + // Hol dir den Eintrag der Inhaltssammlung für diese Seite. + const { entry } = context.locals.starlightRoute; + // Aktualisiere den Titel, um ein Ausrufezeichen hinzuzufügen. + entry.data.title = entry.data.title + '!'; + }); + ``` + + + +#### Mehrere Routen-Middleware + +Starlight unterstützt auch die Bereitstellung mehrerer Middlewares. +Setze `routeMiddleware` auf ein Array von Pfaden, um mehr als einen Middleware-Handler hinzuzufügen: + +```js {9} +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; + +export default defineConfig({ + integrations: [ + starlight({ + title: 'Meine Website mit mehreren Middlewares', + routeMiddleware: ['./src/middleware-one.ts', './src/middleware-two.ts'], + }), + ], +}); +``` + +#### Warten auf spätere Routen-Middleware + +Um darauf zu warten, dass die Middleware später im Stapel ausgeführt wird, bevor du deinen Code ausführst, kannst du den `next()` Callback abwarten, der als zweites Argument an deine Middleware-Funktion übergeben wird. +Das kann z.B. nützlich sein, um zu warten, bis die Middleware eines Plugins läuft, bevor du Änderungen vornimmst. + +```ts "next" "await next();" +// src/routeData.ts +import { defineRouteMiddleware } from '@astrojs/starlight/route-data'; + +export const onRequest = defineRouteMiddleware(async (context, next) => { + // Warte darauf, dass die spätere Middleware ausgeführt wird. + await next(); + // Ändere die Routendaten. + const { entry } = context.locals.starlightRoute; + entry.data.title = entry.data.title + '!'; +}); +``` diff --git a/docs/src/content/docs/de/guides/sidebar.mdx b/docs/src/content/docs/de/guides/sidebar.mdx index a3e7ab74146..e63190ab5b4 100644 --- a/docs/src/content/docs/de/guides/sidebar.mdx +++ b/docs/src/content/docs/de/guides/sidebar.mdx @@ -191,7 +191,7 @@ Die obige Konfiguration erzeugt die folgende Seitenleiste: Starlight kann automatisch eine Gruppe in deiner Seitenleiste erzeugen, die auf einem Verzeichnis deiner Dokumente basiert. Dies ist hilfreich, wenn du nicht jedes Element der Seitenleiste manuell in eine Gruppe eintragen willst. -Standardmäßig werden die Seiten in alphabetischer Reihenfolge nach der Datei [`slug`](/de/reference/overrides/#slug) sortiert. +Standardmäßig werden die Seiten in alphabetischer Reihenfolge nach der Datei [`slug`](/de/reference/route-data/#slug) sortiert. Füge eine automatisch generierte Gruppe hinzu, indem du ein Objekt mit den Eigenschaften `label` und `autogenerate` verwendest. In der Konfiguration von `autogenerate` muss das `directory` angegeben werden, das für die Einträge in der Seitenleiste verwendet werden soll. Zum Beispiel, mit der folgenden Konfiguration: diff --git a/docs/src/content/docs/de/reference/overrides.md b/docs/src/content/docs/de/reference/overrides.md index 0e14fff553a..305cb2836c6 100644 --- a/docs/src/content/docs/de/reference/overrides.md +++ b/docs/src/content/docs/de/reference/overrides.md @@ -12,147 +12,6 @@ Diese Seite listet alle Komponenten auf, die überschrieben werden können, und Erfahre mehr in der [Anleitung zum Überschreiben von Komponenten](/de/guides/overriding-components/). -## Komponenteneigenschaften (Props) - -Alle Komponenten können auf ein Standardobjekt `Astro.props` zugreifen, welches Informationen über die aktuelle Seite enthält. - -Um deine eigenen Komponenten zu schreiben, importiere den `Props`-Typ von Starlight: - -```astro ---- -// src/components/Custom.astro -import type { Props } from '@astrojs/starlight/props'; - -const { hasSidebar } = Astro.props; -// ^ Typ: boolean ---- -``` - -So erhaltest du die Autovervollständigung und Angabe des Datentyps beim Zugriff auf `Astro.props`. - -### Eigenschaften - -Starlight wird die folgenden Props an deine eigenen Komponenten übergeben. - -#### `dir` - -**Typ:** `'ltr' | 'rtl'` - -Schreibrichtung der Seite. - -#### `lang` - -**Typ:** `string` - -BCP-47-Sprachkennzeichen für das Gebietsschema dieser Seite, z.B. `de`, `zh-CN` oder `pt-BR`. - -#### `locale` - -**Typ:** `string | undefined` - -Der Basispfad, unter dem eine Sprache angeboten wird. `undefined` für Root-Locale-Slugs. - -#### `siteTitle` - -**Typ:** `string` - -Der Seitentitel für das Gebietsschema dieser Seite. - -#### `siteTitleHref` - -**Typ:** `string` - -Der Wert für das Attribut `href` des Seitentitels, der auf die Homepage zurückverweist, z. B. `/`. -Bei mehrsprachigen Websites wird hier das aktuelle Gebietsschema angegeben, z. B. `/en/` oder `/zh-cn/`. - -#### `slug` - -**Typ:** `string` - -Der aus dem Dateinamen des Inhalts generierte Slug für diese Seite. - -Diese Eigenschaft ist veraltet und wird in einer zukünftigen Version von Starlight entfernt werden. -Stelle auf die neue Content Layer API um, indem du [Starlights `docsLoader`](/de/manual-setup/#konfigurieren-von-inhaltssammlungen) benutzt und verwende stattdessen die Eigenschaft [`id`](#id). - -#### `id` - -**Typ:** `string` - -Der Slug für diese Seite oder die eindeutige ID für diese Seite, die auf dem Dateinamen des Inhalts basiert, wenn du das Flag [`legacy.collections`](https://docs.astro.build/de/reference/legacy-flags/#collections) benutzt. - -#### `isFallback` - -**Typ:** `true | undefined` - -`true`, wenn diese Seite in der aktuellen Sprache unübersetzt ist und Fallback-Inhalte aus dem Standardgebietsschema verwendet. -Wird nur in mehrsprachigen Sites verwendet. - -#### `entryMeta` - -**Typ:** `{ dir: 'ltr' | 'rtl'; lang: string }` - -Gebietsschema-Metadaten für den Seiteninhalt. Du kannst von den Werten der Top-Level-Locale unterscheiden, wenn eine Seite Fallback-Inhalte verwendet. - -#### `entry` - -Der Astro-Inhaltssammlungseintrag für die aktuelle Seite. -Beinhaltet Frontmatter-Werte für die aktuelle Seite in `entry.data`. - -```ts -entry: { - data: { - title: string; - description: string | undefined; - // usw. - } -} -``` - -Erfahre mehr über die Form dieses Objekts in der [Astros Eintragstyp-Sammlung](https://docs.astro.build/de/reference/modules/astro-content/#collectionentry) Referenz. - -#### `sidebar` - -**Typ:** `SidebarEntry[]` - -Seitennavigationseinträge für diese Seite. - -#### `hasSidebar` - -**Typ:** `boolean` - -Ob die Seitenleiste auf dieser Seite angezeigt werden soll oder nicht. - -#### `pagination` - -**Typ:** `{ prev?: Link; next?: Link }` - -Links zur vorherigen und nächsten Seite in der Seitenleiste, falls aktiviert. - -#### `toc` - -**Typ:** `{ minHeadingLevel: number; maxHeadingLevel: number; items: TocItem[] } | undefined` - -Inhaltsverzeichnis für diese Seite, falls aktiviert. - -#### `headings` - -**Typ:** `{ depth: number; slug: string; text: string }[]` - -Array aller Markdown-Überschriften, die aus der aktuellen Seite extrahiert wurden. -Verwende stattdessen [`toc`](#toc), wenn du einen Inhaltsverzeichnis-Komponenten erstellen willst, welches die Konfigurationsoptionen von Starlight berücksichtigt. - -#### `lastUpdated` - -**Typ:** `Date | undefined` - -JavaScript `Date` Objekt, welches angibt, wann diese Seite zuletzt aktualisiert wurde, falls aktiviert. - -#### `editUrl` - -**Typ:** `URL | undefined` - -`URL`-Objekt für die Adresse, unter der diese Seite bearbeitet werden kann, falls aktiviert. - --- ## Komponenten @@ -232,7 +91,7 @@ Diese Komponenten stellen die obere Navigationsleiste von Starlight dar. **Standardkomponente:** [`Header.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Header.astro) Dies ist eine Kopfzielen-Komponente, welche oben auf jeder Seite angezeigt wird. -Die Standardimplementierung zeigt [``](#sitetitle-1), [``](#search), [``](#socialicons), [``](#themeselect), und [``](#languageselect). +Die Standardimplementierung zeigt [``](#sitetitle), [``](#search), [``](#socialicons), [``](#themeselect), und [``](#languageselect). #### `SiteTitle` diff --git a/docs/src/content/docs/de/reference/plugins.md b/docs/src/content/docs/de/reference/plugins.md index a14340ca0f1..6603999696b 100644 --- a/docs/src/content/docs/de/reference/plugins.md +++ b/docs/src/content/docs/de/reference/plugins.md @@ -17,6 +17,7 @@ Erfahre mehr über die Verwendung eines Starlight-Plugins in der [Konfigurations Ein Starlight-Plugin hat die folgende Form. Siehe unten für Details zu den verschiedenen Eigenschaften und Hook-Parametern. + ```ts interface StarlightPlugin { name: string; @@ -25,15 +26,17 @@ interface StarlightPlugin { config: StarlightUserConfig; updateConfig: (newConfig: StarlightUserConfig) => void; addIntegration: (integration: AstroIntegration) => void; + addRouteMiddleware: (config: { entrypoint: string; order?: 'pre' | 'post' | 'default' }) => void; astroConfig: AstroConfig; command: 'dev' | 'build' | 'preview'; isRestart: boolean; logger: AstroIntegrationLogger; - injectTranslations: (Record>) => void; + injectTranslations: (dict: { [lang: string]: Record }) => void; }) => void | Promise; }; } ``` + ## `name` @@ -116,6 +119,40 @@ export default { }; ``` +#### `addRouteMiddleware` + +**Typ:** `(config: { entrypoint: string; order?: 'pre' | 'post' | 'default'}) => void` + +Eine Callback-Funktion, um der Website einen [Routen-Middleware-Handler](/de/guides/route-data/) hinzuzufügen. + +Die Eigenschaft `entrypoint` muss ein Modulbezeichner für die Middleware-Datei deines Plugins sein, die einen `onRequest`-Handler exportiert. + +Im folgenden Beispiel fügt ein Plugin, das unter dem Namen `@example/starlight-plugin` veröffentlicht wurde, eine Route-Middleware über einen npm-Modul-Spezifizierer hinzu: + +```js {6-9} +// plugin.ts +export default { + name: '@example/starlight-plugin', + hooks: { + setup({ addRouteMiddleware }) { + addRouteMiddleware({ + entrypoint: '@example/starlight-plugin/route-middleware', + }); + }, + }, +}; +``` + +##### Kontrolle der Ausführungsreihenfolge + +Standardmäßig wird die Plugin-Middleware in der Reihenfolge ausgeführt, in der die Plugins hinzugefügt werden. + +Verwende die optionale Eigenschaft `order`, wenn du mehr Kontrolle darüber brauchst, wann deine Middleware läuft. +Setze `order: "pre"`, um vor der Middleware eines Benutzers zu laufen. +Setze `order: "post"`, um nach allen anderen Middlewares zu laufen. + +Wenn zwei Plugins Middleware mit demselben `order`-Wert hinzufügen, wird das zuerst hinzugefügte Plugin zuerst ausgeführt. + #### `astroConfig` **Typ:** `AstroConfig` diff --git a/docs/src/content/docs/de/reference/route-data.mdx b/docs/src/content/docs/de/reference/route-data.mdx new file mode 100644 index 00000000000..afa033a4c65 --- /dev/null +++ b/docs/src/content/docs/de/reference/route-data.mdx @@ -0,0 +1,199 @@ +--- +title: Routendaten Referenz +description: Die vollständige Referenzdokumentation für Starlights Routendatenobjekt. +sidebar: + label: Routendaten +--- + +Das Routendatenobjekt von Starlight enthält Informationen über die aktuelle Seite. +Erfahre mehr darüber, wie das Datenmodell von Starlight funktioniert, in der [„Routendaten“-Anleitung](/de/guides/route-data/). + +In Astro-Komponenten greifst du auf die Routendaten von `Astro.locals.starlightRoute` zu: + +```astro {4} +--- +// src/components/Custom.astro + +const { hasSidebar } = Astro.locals.starlightRoute; +--- +``` + +In der [Routen-Middleware](/de/guides/route-data/#anpassen-der-routendaten) greifst du auf die Routendaten aus dem Kontextobjekt zu, das an deine Middleware-Funktion übergeben wird: + +```ts {5} +// src/routeData.ts +import { defineRouteMiddleware } from '@astrojs/starlight/route-data'; + +export const onRequest = defineRouteMiddleware((context) => { + const { hasSidebar } = context.locals.starlightRoute; +}); +``` + +## `starlightRoute` + +Das Objekt `starlightRoute` hat die folgenden Eigenschaften: + +### `dir` + +**Typ:** `'ltr' | 'rtl'` + +Schreibrichtung der Seite. + +### `lang` + +**Typ:** `string` + +BCP-47-Sprachkennzeichen für das Gebietsschema dieser Seite, z.B. `de`, `zh-CN` oder `pt-BR`. + +### `locale` + +**Typ:** `string | undefined` + +Der Basispfad, unter dem eine Sprache angeboten wird. `undefined` für Root-Locale-Slugs. + +### `siteTitle` + +**Typ:** `string` + +Der Seitentitel für das Gebietsschema dieser Seite. + +### `siteTitleHref` + +**Typ:** `string` + +Der Wert für das Attribut `href` des Seitentitels, der auf die Homepage zurückverweist, z. B. `/`. +Bei mehrsprachigen Websites wird hier das aktuelle Gebietsschema angegeben, z. B. `/en/` oder `/zh-cn/`. + +### `slug` + +**Typ:** `string` + +Der aus dem Dateinamen des Inhalts generierte Slug für diese Seite. + +Diese Eigenschaft ist veraltet und wird in einer zukünftigen Version von Starlight entfernt werden. +Stelle auf die neue Content Layer API um, indem du [Starlights `docsLoader`](/de/manual-setup/#konfigurieren-von-inhaltssammlungen) benutzt und verwende stattdessen die Eigenschaft [`id`](#id). + +### `id` + +**Typ:** `string` + +Der Slug für diese Seite oder die eindeutige ID für diese Seite, die auf dem Dateinamen des Inhalts basiert, wenn du das Flag [`legacy.collections`](https://docs.astro.build/de/reference/legacy-flags/#collections) benutzt. + +### `isFallback` + +**Typ:** `true | undefined` + +`true`, wenn diese Seite in der aktuellen Sprache unübersetzt ist und Fallback-Inhalte aus dem Standardgebietsschema verwendet. +Wird nur in mehrsprachigen Sites verwendet. + +### `entryMeta` + +**Typ:** `{ dir: 'ltr' | 'rtl'; lang: string }` + +Gebietsschema-Metadaten für den Seiteninhalt. Du kannst von den Werten der Top-Level-Locale unterscheiden, wenn eine Seite Fallback-Inhalte verwendet. + +### `entry` + +Der Astro-Inhaltssammlungseintrag für die aktuelle Seite. +Beinhaltet Frontmatter-Werte für die aktuelle Seite in `entry.data`. + +```ts +entry: { + data: { + title: string; + description: string | undefined; + // usw. + } +} +``` + +Erfahre mehr über die Form dieses Objekts in der [Astros Eintragstyp-Sammlung](https://docs.astro.build/de/reference/modules/astro-content/#collectionentry) Referenz. + +### `sidebar` + +**Typ:** `SidebarEntry[]` + +Seitennavigationseinträge für diese Seite. + +### `hasSidebar` + +**Typ:** `boolean` + +Ob die Seitenleiste auf dieser Seite angezeigt werden soll oder nicht. + +### `pagination` + +**Typ:** `{ prev?: Link; next?: Link }` + +Links zur vorherigen und nächsten Seite in der Seitenleiste, falls aktiviert. + +### `toc` + +**Typ:** `{ minHeadingLevel: number; maxHeadingLevel: number; items: TocItem[] } | undefined` + +Inhaltsverzeichnis für diese Seite, falls aktiviert. + +### `headings` + +**Typ:** `{ depth: number; slug: string; text: string }[]` + +Array aller Markdown-Überschriften, die aus der aktuellen Seite extrahiert wurden. +Verwende stattdessen [`toc`](#toc), wenn du einen Inhaltsverzeichnis-Komponenten erstellen willst, welches die Konfigurationsoptionen von Starlight berücksichtigt. + +### `lastUpdated` + +**Typ:** `Date | undefined` + +JavaScript `Date` Objekt, welches angibt, wann diese Seite zuletzt aktualisiert wurde, falls aktiviert. + +### `editUrl` + +**Typ:** `URL | undefined` + +`URL`-Objekt für die Adresse, unter der diese Seite bearbeitet werden kann, falls aktiviert. + +## Hilfsmittel + +### `defineRouteMiddleware()` + +Verwende das Hilfsmethode `defineRouteMiddleware()`, um dein Route-Middleware-Modul zu definieren: + +```ts "defineRouteMiddleware" +// src/routeData.ts +import { defineRouteMiddleware } from '@astrojs/starlight/route-data'; + +export const onRequest = defineRouteMiddleware((context) => { + // ... +}); +``` + +### `StarlightRouteData`-Typ + +Wenn du Code schreibst, der mit den Routendaten von Starlight arbeiten muss, kannst du den Typ `StarlightRouteData` importieren, damit er der Form von `Astro.locals.starlightRoute` entspricht. + +Im folgenden Beispiel aktualisiert die Funktion `usePageTitleInTOC()` die Routedaten so, dass der Titel der aktuellen Seite als Beschriftung für den ersten Eintrag im Inhaltsverzeichnis verwendet wird und die Standardbeschriftung „Übersicht“ ersetzt. +Mit dem Typ `StarlightRouteData` kannst du prüfen, ob die Änderungen der Routendaten gültig sind. + +```ts "StarlightRouteData" +// src/route-utils.ts +import type { StarlightRouteData } from '@astrojs/starlight/route-data'; + +export function usePageTitleInTOC(starlightRoute: StarlightRouteData) { + const overviewLink = starlightRoute.toc?.items[0]; + if (overviewLink) { + overviewLink.text = starlightRoute.entry.data.title; + } +} +``` + +Diese Funktion kann dann von einer Route Middleware aufgerufen werden: + +```ts {3,6} +// src/route-middleware.ts +import { defineRouteMiddleware } from '@astrojs/starlight/route-data'; +import { usePageTitleInTOC } from './route-utils'; + +export const onRequest = defineRouteMiddleware((context) => { + usePageTitleInTOC(context.locals.starlightRoute); +}); +```