Ersetzung von Komponenten Referenz
Du kannst Starlights eingebaute Komponenten überschreiben, indem du Pfade zu Ersatzkomponenten in Starlights components
-Konfigurationsoption angibst.
Diese Seite listet alle Komponenten auf, die überschrieben werden können, und verweist auf ihre Standardimplementierungen auf GitHub.
Erfahre mehr in der Anleitung zum Überschreiben von Komponenten.
Komponenten
Abschnitt betitelt „Komponenten“Diese Komponenten werden innerhalb des <head>
-Elements jeder Seite gerendert.
Sie sollten nur innerhalb von <head>
erlaubte Elemente enthalten.
Standardkomponente: Head.astro
Diese Komponente wird innerhalb des <head>
einer jeden Seite gerendert.
Überschreibe diese Komponente nur, wenn es unbedingt notwendig ist.
Bevorzuge die Konfigurationsoption head
, das Frontmatter-Feld head
oder eine Routendaten-Middleware, um die von der Standardkomponente dargestellten Routendaten nach Möglichkeit anzupassen.
ThemeProvider
Abschnitt betitelt „ThemeProvider“Standardkomponente: ThemeProvider.astro
Diese Komponente wird innerhalb von <head>
gerendert und richtet die Unterstützung für dunkle/helle Themen ein.
Die Standard-Implementierung enthält ein Inline-Skript und ein <template>
, welches vom Skript in <ThemeSelect />
verwendet wird.
Barrierefreiheit
Abschnitt betitelt „Barrierefreiheit“SkipLink
Abschnitt betitelt „SkipLink“Standardkomponente: SkipLink.astro
Diese Komponente wird als erstes Element innerhalb von <body>
dargestellt und verweist aus Gründen der Barrierefreiheit auf den Hauptinhalt der Seite.
Die Standardimplementierung ist ausgeblendet, bis ein Benutzer sie durch Tabulatorbewegungen mit der Tastatur aktiviert.
Diese Komponenten sind für das Layout der Starlight-Komponenten und die Verwaltung von Ansichten über verschiedene Haltepunkte hinweg verantwortlich. Das Überschreiben dieser Komponenten ist mit erheblicher Komplexität verbunden. Wenn möglich, bevorzuge das Überschreiben einer Komponente auf einer niedrigeren Ebene.
PageFrame
Abschnitt betitelt „PageFrame“Standardkomponente: PageFrame.astro
Benannte Slots: header
, sidebar
Diese Layout-Komponente beinhaltet den größten Teil des Seiteninhalts.
Die Standardimplementierung konfiguriert das Kopfzeilen-Seitennavigation-Haupt-Layout und beinhaltet header
und sidebar
benannte Slots zusammen mit einem Standard-Slot für den Hauptinhalt.
Sie rendert auch <MobileMenuToggle />
, um das Umschalten der Seitenleistennavigation auf kleinen (mobilen) Viewports zu unterstützen.
MobileMenuToggle
Abschnitt betitelt „MobileMenuToggle“Standardkomponente: MobileMenuToggle.astro
Diese Komponente wird innerhalb von <PageFrame>
gerendert und ist für das Umschalten der Seitenleistennavigation auf kleinen (mobilen) Viewports verantwortlich.
TwoColumnContent
Abschnitt betitelt „TwoColumnContent“Standardkomponente: TwoColumnContent.astro
Benannter Slot: right-sidebar
Dies ist die Layout-Komponente, welche die Hauptinhaltsspalte und die rechte Seitenleiste (Inhaltsverzeichnis) beinhaltet. Die Standardimplementierung behandelt den Wechsel zwischen einem einspaltigen Layout mit kleinem Sichtfeld und einem zweispaltigen Layout mit größerem Sichtfeld.
Kopfzeile
Abschnitt betitelt „Kopfzeile“Diese Komponenten stellen die obere Navigationsleiste von Starlight dar.
Standardkomponente: Header.astro
Dies ist eine Kopfzielen-Komponente, welche oben auf jeder Seite angezeigt wird.
Die Standardimplementierung zeigt <SiteTitle />
, <Search />
, <SocialIcons />
, <ThemeSelect />
, und <LanguageSelect />
.
SiteTitle
Abschnitt betitelt „SiteTitle“Standardkomponente: SiteTitle.astro
Die Komponente wird die am Anfang des Website-Headers gerendert, um den Titel der Website darzustellen. Die Standardimplementierung enthält die Logik für die Darstellung von Logos, die in der Starlight-Konfiguration definiert sind.
Standardkomponente: Search.astro
Diese Komponente wird verwendet, um Starlights Suchoberfläche darzustellen. Die Standardimplementierung enthält die Schaltfläche in der Kopfzeile und den Code für die Anzeige eines Suchmodals, wenn darauf geklickt wird, und das Laden von Pagefinds UI.
Wenn pagefind
deaktiviert ist, wird die Standard-Suchkomponente nicht angezeigt.
Wenn du jedoch Search
überschreibst, wird deine benutzerdefinierte Komponente immer angezeigt, auch wenn die Konfigurationsoption pagefind
auf false
gesetzt ist.
So kannst du eine Benutzeroberfläche für alternative Suchanbieter hinzufügen, wenn du Pagefind deaktivierst.
SocialIcons
Abschnitt betitelt „SocialIcons“Standardkomponente: SocialIcons.astro
Diese Komponente wird in der Kopfzeile der Website gerendert und enthält Symbol-Links zu sozialen Netzwerken.
Die Standardimplementierung verwendet die Option social
in der Starlight-Konfiguration, um Symbole und Links darzustellen.
ThemeSelect
Abschnitt betitelt „ThemeSelect“Standardkomponente: ThemeSelect.astro
Diese Komponente wird in der Kopfzeile der Website gerendert und ermöglicht es den Benutzern, ihr bevorzugtes Farbschema auszuwählen.
LanguageSelect
Abschnitt betitelt „LanguageSelect“Standardkomponente: LanguageSelect.astro
Die Komponente wird in der Kopfzeile der Website angezeigt und ermöglicht es den Nutzern, die Sprache auszuwählen.
Globale Seitenleiste
Abschnitt betitelt „Globale Seitenleiste“Die globale Seitenleiste von Starlight enthält die Hauptnavigation der Website. Bei schmalen Ansichtsfenstern ist diese hinter einem Dropdown-Menü versteckt.
Sidebar
Abschnitt betitelt „Sidebar“Standardkomponente: Sidebar.astro
Die Komponente wird die vor dem Seiteninhalt gerendert und enthält eine globale Navigation.
Die Standardimplementierung wird als Seitenleiste in ausreichend breiten Ansichtsfenstern und innerhalb eines Dropdown-Menüs in kleinen (mobilen) Ansichtsfenstern angezeigt.
Sie rendert auch <MobileMenuFooter />
, um zusätzliche Elemente innerhalb des mobilen Menüs anzuzeigen.
MobileMenuFooter
Abschnitt betitelt „MobileMenuFooter“Standardkomponente: MobileMenuFooter.astro
Diese Komponente wird die am unteren Ende des mobilen Dropdown-Menüs gerendert.
Die Standardimplementierung rendert <ThemeSelect />
und <LanguageSelect />
.
Seitenleiste des Inhalts
Abschnitt betitelt „Seitenleiste des Inhalts“Die Seitenleiste von Starlight ist für die Anzeige eines Inhaltsverzeichnisses verantwortlich, welches die Untertitel der aktuellen Seite anzeigt. Bei schmalen Ansichtsfenstern wird diese Leiste zu einem Dropdown-Menü.
PageSidebar
Abschnitt betitelt „PageSidebar“Standardkomponente: PageSidebar.astro
Diese Komponente wird die vor dem Inhalt der Hauptseite gerendert, um ein Inhaltsverzeichnis anzuzeigen.
Die Standardimplementierung rendert <TableOfContents />
und <MobileTableOfContents />
.
TableOfContents
Abschnitt betitelt „TableOfContents“Standardkomponente: TableOfContents.astro
Eine Komponente zur Darstellung des Inhaltsverzeichnisses der aktuellen Seite in breiteren Ansichtsfenstern.
MobileTableOfContents
Abschnitt betitelt „MobileTableOfContents“Standardkomponente: MobileTableOfContents.astro
Diese Komponete zeigt das Inhaltsverzeichnis der aktuellen Seite auf kleinen (mobilen) Bildschirmen an.
Folgende Komponenten werden in der Hauptspalte des Seiteninhalts wiedergegeben.
Standardkomponente: Banner.astro
Diese Bannerkomponente wird oben auf jeder Seite angezeigt.
Die Standard-Implementierung verwendet den banner
-Frontmatter-Wert der Seite, um zu entscheiden, ob sie gerendert wird oder nicht.
ContentPanel
Abschnitt betitelt „ContentPanel“Standardkomponente: ContentPanel.astro
Diese Layout-Komponente beinhaltet Abschnitte der Hauptinhaltsspalte.
PageTitle
Abschnitt betitelt „PageTitle“Standardkomponente: PageTitle.astro
Eine Komponente, welche das <h1>
-Element für die aktuelle Seite enthält.
Implementierungen sollten sicherstellen, dass sie id="_top"
auf dem <h1>
Element wie in der Standardimplementierung setzen.
DraftContentNotice
Abschnitt betitelt „DraftContentNotice“Standardkomponente: DraftContentNotice.astro
Hinweis, der den Nutzern während der Entwicklung angezeigt wird, wenn die aktuelle Seite als Entwurf markiert ist.
FallbackContentNotice
Abschnitt betitelt „FallbackContentNotice“Standardkomponente: FallbackContentNotice.astro
Ein Hinweis, welcher den Benutzern auf der Seite angezeigt wird, für die keine Übersetzung in der aktuellen Sprache verfügbar ist. Wird nur auf mehrsprachigen Websites verwendet.
Standardkomponente: Hero.astro
Diese Komponente wird am oberen Rand der Seite angezeigt, wenn hero
in frontmatter eingestellt ist.
Die Standardimplementierung zeigt einen großen Titel, eine Tagline und Call-to-Action-Links neben einem optionalen Bild.
MarkdownContent
Abschnitt betitelt „MarkdownContent“Standardkomponente: MarkdownContent.astro
Die Kompoente wird um den Hauptinhalt jeder Seite gerendert. Die Standardimplementierung richtet grundlegende Stile ein, die auf Markdown-Inhalte angewendet werden.
Die Markdown-Inhaltsstile werden auch in der Datei @astrojs/starlight/style/markdown.css
veröffentlicht und auf die CSS-Klasse .sl-markdown-content
bezogen.
Fußzeile
Abschnitt betitelt „Fußzeile“Diese Komponenten werden am unteren Ende der Hauptspalte des Seiteninhalts dargestellt.
Standardkomponente: Footer.astro
Diese Fußzeile-Komponente wird am unteren Rand jeder Seite angezeigt.
Die Standardimplementierung zeigt <LastUpdated />
, <Pagination />
, und <EditLink />
.
LastUpdated
Abschnitt betitelt „LastUpdated“Standardkomponente: LastUpdated.astro
Eine Komponente, die in der Fußzeile der Seite gerendert wird, um das zuletzt aktualisierte Datum anzuzeigen.
EditLink
Abschnitt betitelt „EditLink“Standardkomponente: EditLink.astro
Die Komponente wird in der Fußzeile der Seite gerendert, um einen Link anzuzeigen, über den die Seite bearbeitet werden kann.
Pagination
Abschnitt betitelt „Pagination“Standardkomponente: Pagination.astro
Diese Komponente wird in der Fußzeile der Seite gerendert, um Navigationspfeile zwischen vorherigen/nächsten Seiten anzuzeigen.