Komponenten

Hinweise

Jeder Hinweistyp verwendet die :::-Syntaxeinrahmung mit seinem Standardtitel.

Hinweis

Dies ist ein Hinweis-Aside. Er lenkt die Aufmerksamkeit auf ergänzende Informationen, die der Leser kennen sollte.

Tipp

Dies ist ein Tipp-Aside. Er hebt eine bewährte Methode oder eine nützliche Abkürzung hervor.

Achtung

Dies ist ein Vorsicht-Aside. Er warnt vor einer möglichen Fehlerquelle oder einem nicht offensichtlichen Verhalten.

Gefahr

Dies ist ein Gefahr-Aside. Er kennzeichnet eine destruktive oder nicht umkehrbare Aktion.

Benutzerdefinierte Titel

Benutzerdefinierter Hinweistitel

Dieser Aside verwendet die <Aside>-Komponente mit einem benutzerdefinierten Titelüberschreibung.

Profi-Tipp

Sie können Fett, Kursiv und Inline-Code innerhalb von Aside-Komponenten verschachteln.

Vorsicht

Seien Sie vorsichtig beim Aktualisieren von Abhängigkeiten — prüfen Sie zuerst das Änderungsprotokoll.

Destruktive Aktion

Das Ausführen von git reset --hard verwirft dauerhaft nicht gespeicherte Änderungen.

Umfangreiche Inhalte in Hinweisen

Aside mit gemischten Inhalten

Hier ist ein Codeblock innerhalb eines Asides:

npm install @astrojs/starlight

Eine Liste von Elementen:

• Erstes Element mit fettem Text
• Zweites Element mit Inline-Code
• Drittes Element mit einem Link zur Starlight-Dokumentation

Aside-CSS

Die eingebauten Aside-Komponenten von Starlight erhalten abgerundete Ecken und einen mehrschichtigen Schatten:

.starlight-aside {
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.12);
}

Tabs

Einfache Tabs

Übersicht

Dies ist der Inhalt des Übersicht-Tabs. Er enthält reinen Text zur Überprüfung der grundlegenden Tab-Darstellung.

Details

Dies ist der Details-Tab. Das Wechseln zwischen Tabs sollte sofort ohne Seitenneuladen erfolgen.

Tabs mit gemischten Inhalten

Text

Einfacher Absatzinhalt im ersten Tab.

Code

const greeting = "Hello from a code block inside a tab!";
console.log(greeting);

Liste

• Element eins innerhalb eines Tabs
• Element zwei mit fettem Text
• Element drei mit Inline-Code

Synchronisierte Tabs

Diese beiden Tab-Gruppen teilen syncKey="pkg". Die Auswahl eines Tabs in einer Gruppe sollte die andere aktualisieren.

Installationsbefehl:

npm

npm install @f5-sales-demo/docs-theme

pnpm

pnpm add @f5-sales-demo/docs-theme

yarn

yarn add @f5-sales-demo/docs-theme

Ausführungsbefehl:

npm

npm run dev

pnpm

pnpm dev

yarn

yarn dev

Schritte

1. Repository klonen

   git clone https://github.com/example/repo.git
   cd repo

2. Abhängigkeiten installieren

   npm install

3. Entwicklungsserver starten

   npm run dev

   Die Seite ist unter http://localhost:4321 verfügbar.

Karten

Einzelne Karte

Einzelne Karte

Dies ist eine eigenständige Karte mit einem Symbol. Karten eignen sich gut zum Hervorheben wichtiger Informationen oder Funktionen.

Kartenraster

Leistung

Astro liefert standardmäßig kein JavaScript für schnelle Seitenladevorgänge.

Anpassbar

Starlight bietet umfangreiche Design- und Plugin-Optionen.

Barrierefrei

Eingebaute Barrierefreiheitsfunktionen stellen sicher, dass Inhalte jeden erreichen.

Dokumentiert

Eine umfassende Dokumentation macht den Einstieg unkompliziert.

Versetztes Layout

Schritt eins

Konfigurieren Sie Ihre Projekteinstellungen und Umgebungsvariablen.

Schritt zwei

Erstellen Sie Ihre Inhaltsseiten im MDX-Format.

Schritt drei

Lokale Vorschau mit dem Entwicklungsserver.

Schritt vier

Auf der Hosting-Plattform Ihrer Wahl bereitstellen.

Link-Karten

Das Dokumentationsthema stellt eine LinkCard-Komponente bereit, die mit oder ohne Symbole funktioniert. Importieren Sie sie aus dem Dokumentationsthema:

import LinkCard from '@f5-sales-demo/docs-theme/components/LinkCard.astro';

Starlight DocumentationLearn how to build documentation sites with Starlight.

Astro DocumentationExplore the Astro framework for content-driven websites.

Mit Symbolen

Fügen Sie eine icon-Eigenschaft mit der Syntax prefix:name hinzu. Alle acht Symbolpakete werden unterstützt — siehe die Dokumentation der Symbolpakete für den vollständigen Katalog.

Lucide (lucide:)

Web-App-Firewall (WAF)Firewall-Richtlinien und Konfiguration.

Multi-Cloud-NetzwerkSite-Konnektivität über mehrere Clouds hinweg.

Carbon (carbon:)

SicherheitsdiensteIBM Carbon Sicherheitssymbolsatz.

Cloud-DiensteIBM Carbon Cloud-Symbolsatz.

Material Design Icons (mdi:)

ZugangskontrolleMaterial Design Schildschloss-Symbol.

DatenverwaltungMaterial Design Datenbank-Symbol.

Phosphor (phosphor:)

BedrohungsabwehrPhosphor Schild-Symbol.

Globales NetzwerkPhosphor Globus-Symbol.

Tabler (tabler:)

Cloud-PlattformTabler Cloud-Symbol.

BereitstellungTabler Raketen-Symbol.

F5 Brand (f5-brand:)

Cloud-SicherheitF5-Marken-Cloud-Schild-Symbol.

FirewallF5-Marken-Firewall-Symbol.

F5 Distributed Cloud (f5xc:)

Diese Symbole sind mehrfarbig und verwenden benutzerdefinierte CSS-Eigenschaften für die Farbanpassung im Hell-/Dunkelmodus.

App- und API-SchutzF5 XC Web-App- und API-Schutz-Symbol.

Bot-AbwehrF5 XC Bot-Abwehr-Symbol.

HashiCorp Flight (hashicorp-flight:)

TerraformHashiCorp Terraform-Symbol.

ConsulHashiCorp Consul-Symbol.

Abzeichen

Inline-Abzeichenvarianten

Alle sechs Abzeichenvarianten inline dargestellt:

Standard Hinweis Gefahr Erfolg Tipp Vorsicht

Abzeichengrößen

Klein Mittel Groß

Jede Größe mit einer Variante:

Kleiner Tipp Mittlere Gefahr Großer Erfolg

Überschriften-Abzeichen

Die folgenden Überschriften verwenden die Plugin-Syntax starlight-heading-badges.

Funktionsumfang vollständig Stabil

Diese Überschrift hat ein Erfolgs-Abzeichen, das angibt, dass die Funktion stabil ist.

Experimentelle API Beta

Diese Überschrift hat ein Vorsicht-Abzeichen, das angibt, dass die API experimentell ist.

Legacy-System Veraltet

Diese Überschrift hat ein Gefahr-Abzeichen, das auf die Veraltung hinweist.

Neue Funktion Neu

Diese Überschrift hat ein Tipp-Abzeichen, das eine neue Funktion anzeigt.

Dokumentation Aktualisiert

Diese Überschrift hat ein Hinweis-Abzeichen, das auf aktuelle Aktualisierungen hinweist.

Standard-Abzeichen Info

Diese Überschrift hat ein Standard-Abzeichen ohne angegebene Variante.

Seitenleisten-Abzeichen

Überprüfen Sie die Seitenleiste: Diese Seite hat ein „Neu”-Abzeichen mit der tip-Variante, die über das Frontmatter angewendet wird.

Tabellen

Einfache Tabelle

Funktion	Status	Priorität
Dunkelmodus	Unterstützt	Hoch
Bild-Zoom	Unterstützt	Mittel
Mermaid-Diagramme	Unterstützt	Mittel
Überschriften-Abzeichen	Unterstützt	Niedrig

Tabelle mit Ausrichtung und Code

Eigenschaft	Typ	Standard	Beschreibung
title	string	—	Seitentitel, der in der Kopfzeile angezeigt wird
description	string	""	Meta-Beschreibung für SEO
sidebar.order	number	0	Sortierreihenfolge in der Seitenleiste
sidebar.badge	object	null	Abzeichen neben dem Seitenleistenlabel
template	"doc" | "splash"	"doc"	Seitenlayout-Vorlage

Bilder

Das folgende Bild testet das Plugin starlight-image-zoom. Klicken Sie zum Vergrößern.

Dateibaum

• Ordnersrc/

  • Ordnercontent/

    • Ordnerdocs/

      • index.mdx
      • 01-environment-variables.mdx
      • 02-build-pipeline.mdx
      • 03-astro-config.mdx
      • 04-logo.mdx
      • 05-colors.mdx
      • 07-typography.mdx
      • 08-code-blocks.mdx
      • 09-components.mdx Diese Seite
      • 10-mermaid.mdx
      • 11-footer.mdx
      • 12-style-enhancement-guide.mdx
  • Ordnerplugins/

    • remark-mermaid.mjs
• Ordnerstyles/

  • custom.css
• astro.config.mjs
• package.json

Designprüfungen

• Die Farbe des linken Rahmens unterscheidet sich je nach Aside-Variante (blau, lila, gelb, rot)
• Der Aside-Hintergrundton ist in Hell- und Dunkelmodus sichtbar
• Der Kastenschatten ist subtil, aber um jeden Aside herum sichtbar
• Abgerundete Ecken (0,75 rem) bei allen Asides
• Die Farbe des aktiven Tab-Indikators verwendet die Akzentfarbe
• Die Verbindungslinie zwischen nummerierten Schritten ist sichtbar
• Synchronisierte Tabs bleiben beim Wechsel zwischen Gruppen synchronisiert
• Codeblöcke innerhalb von Tabs werden mit korrekter Syntaxhervorhebung dargestellt
• Die Kartenrahmenfarbe passt sich zwischen Hell- und Dunkelmodus an
• Der Hover-Hintergrundeffekt ist auf Karten sichtbar
• Die Pfeilsymbolfarbe der LinkCard entspricht der Akzentfarbe
• Das versetzte Layout verschiebt abwechselnde Karten vertikal
• Symbole werden korrekt in Kartenüberschriften dargestellt
• Abzeichen-Hintergrundfarben pro Variante unterscheiden sich zwischen Dunkel- und Hellmodus
• Dunkelmodus-Abzeichen verwenden dunkle Töne (red-4, jade-4, tangerine-4, eggplant-4, bay-4)
• Hellmodus-Abzeichen verwenden helle Töne (red-1, jade-1, tangerine-1, eggplant-1, bay-1)
• Überschriften-Abzeichen sind inline mit dem Überschriftentext ausgerichtet
• Das Seitenleisten-Abzeichen wird neben dem Seitenlabel dargestellt
• Tabellenrahmenfarben passen sich zwischen Hell- und Dunkelmodus an
• Die Tabellenüberschriftenzeile hat einen deutlichen Hintergrund
• Das Bild-Zoom-Overlay funktioniert beim Klicken (starlight-image-zoom)
• Der Dateibaum-Hintergrund verwendet designgerechte Farben
• Symbole übernehmen die aktuelle Textfarbe