Komponenten

Hinweise

Jeder Hinweistyp verwendet die ::: Umrandungssyntax 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 Vorgehensweise 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

Custom Note Title

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

Pro Tip

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

Watch Out

Seien Sie vorsichtig beim Aktualisieren von Abhängigkeiten – prüfen Sie zuerst das Changelog.

Destructive Action

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

Reichhaltiger Inhalt innerhalb von Hinweisen

Aside mit gemischtem Inhalt

Hier ist ein Code-Block 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 integrierten 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

Overview

Dies ist der Inhalt des Übersichts-Tabs. Er enthält einfachen 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 gemischtem Inhalt

Text

Einfacher Absatzinhalt im ersten Tab.

Code

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

List

• Element eins in einem Tab
• 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 Website ist unter http://localhost:4321 verfügbar.

Karten

Einzelne Karte

Single Card

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

Karten-Raster

Performance

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

Customizable

Starlight bietet umfangreiche Optionen für Themes und Plugins.

Accessible

Integrierte Barrierefreiheitsfunktionen stellen sicher, dass Inhalte jeden erreichen.

Documented

Eine umfassende Dokumentation erleichtert den Einstieg.

Versetztes Layout

Step One

Konfigurieren Sie Ihre Projekteinstellungen und Umgebungsvariablen.

Step Two

Erstellen Sie Ihre Inhaltsseiten im MDX-Format.

Step Three

Vorschau lokal mit dem Entwicklungsserver.

Step Four

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 – den vollständigen Katalog finden Sie in der Dokumentation der Symbolpakete.

Lucide (lucide:)

Web App FirewallFirewall policies and configuration.

Multi-Cloud NetworkingSite connectivity across clouds.

Carbon (carbon:)

Security ServicesIBM Carbon security icon set.

Cloud ServicesIBM Carbon cloud icon set.

Material Design Icons (mdi:)

Access ControlMaterial Design shield lock icon.

Data ManagementMaterial Design database icon.

Phosphor (phosphor:)

Threat DefensePhosphor shield icon.

Global NetworkPhosphor globe icon.

Tabler (tabler:)

Cloud PlatformTabler cloud icon.

DeploymentTabler rocket icon.

F5 Brand (f5-brand:)

Cloud SecurityF5 branded cloud shield icon.

FirewallF5 branded firewall icon.

F5 Distributed Cloud (f5xc:)

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

App & API ProtectionF5 XC web app and API protection icon.

Bot DefenseF5 XC bot defense icon.

HashiCorp Flight (hashicorp-flight:)

TerraformHashiCorp Terraform icon.

ConsulHashiCorp Consul icon.

Abzeichen

Abzeichen-Varianten (inline)

Alle sechs Abzeichen-Varianten inline dargestellt:

Default Note Danger Success Tip Caution

Abzeichen-Größen

Small Medium Large

Jede Größe mit einer Variante:

Small Tip Medium Danger Large Success

Überschriften-Abzeichen

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

Funktionsumfang vollständig Stable

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

Experimentelle API Beta

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

Legacy-System Deprecated

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

Neue Funktion New

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

Dokumentation Updated

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 „New”-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 im Header angezeigt wird
description	string	""	Meta-Beschreibung für SEO
sidebar.order	number	0	Sortierreihenfolge in der Seitenleiste
sidebar.badge	object	null	Abzeichen neben dem Seitenleisten-Label
template	"doc" | "splash"	"doc"	Seitenlayout-Vorlage

Bilder

Das folgende Bild testet das starlight-image-zoom-Plugin. Klicken 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 Rahmenfarbe links unterscheidet sich je nach Aside-Variante (blau, lila, gelb, rot)
• Der Aside-Hintergrundton ist sowohl im Hell- als auch im Dunkelmodus sichtbar
• Der Schatten ist subtil, aber um jeden Aside sichtbar
• Abgerundete Ecken (0.75rem) 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 synchron
• Code-Blö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-Kopfzeilen dargestellt
• Abzeichen-Hintergrundfarben je 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-Kopfzeile hat einen deutlich unterschiedlichen Hintergrund
• Der Bild-Zoom-Overlay funktioniert beim Klicken (starlight-image-zoom)
• Der Dateibaum-Hintergrund verwendet themaangemessene Farben
• Symbole übernehmen die aktuelle Textfarbe