-
-
Notifications
You must be signed in to change notification settings - Fork 845
i18n(de): update German translation with #2390 #2878
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
delucis
merged 3 commits into
withastro:main
from
trueberryless:route-data-locals-de-translation
Feb 15, 2025
Merged
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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 = '[email protected]'; | ||
| --- | ||
|
|
||
| <a href="mailto:[email protected]">Schreib mir</a> | ||
| <a href=`mailto:${email}`>Schreib mir</a> | ||
| ``` | ||
|
|
||
| 3. Sage Starlight, dass deine benutzerdefinierte Komponente in der Konfigurationsoption [`components`](/de/reference/configuration/#components) in `astro.config.mjs` verwendet werden soll: | ||
|
|
@@ -70,52 +71,46 @@ 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'; | ||
| --- | ||
|
|
||
| <a href="mailto:[email protected]">Schreib mir</a> | ||
| <Default {...Astro.props}><slot /></Default> | ||
| <Default><slot /></Default> | ||
| ``` | ||
|
|
||
| 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 [`<slot />`](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 [`<slot />`](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'; | ||
| --- | ||
|
|
||
| <Default {...Astro.props}> | ||
| <Default> | ||
| <slot /> | ||
| <slot name="right-sidebar" slot="right-sidebar" /> | ||
| </Default> | ||
| ``` | ||
|
|
||
| ## 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; | ||
| --- | ||
|
|
||
| <h1 id="_top">{title}</h1> | ||
|
|
@@ -127,28 +122,27 @@ const { title } = Astro.props.entry.data; | |
| </style> | ||
| ``` | ||
|
|
||
| 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 ? ( | ||
| <footer>Verwendet Starlight 🌟</footer> | ||
| ) : ( | ||
| <Default {...Astro.props}> | ||
| <Default> | ||
| <slot /> | ||
| </Default> | ||
| ) | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ein Objekt, das alle Informationen enthält, die zum Rendern einer einzelnen Seite benötigt werden. | ||
trueberryless marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| 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; | ||
| --- | ||
|
|
||
| <p>Der Titel dieser Seite lautet „{siteTitle}“</p> | ||
| ``` | ||
|
|
||
| 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. | ||
|
|
||
| <Steps> | ||
|
|
||
| 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 mit, wo sich deine Routendaten-Middleware-Datei in der Datei `astro.config.mjs` befindet: | ||
trueberryless marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| ```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 + '!'; | ||
| }); | ||
| ``` | ||
|
|
||
| </Steps> | ||
|
|
||
| #### 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 + '!'; | ||
| }); | ||
| ``` | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.