Zum Inhalt springen
Starlight

Verzeichnisbaum

Um die Struktur eines Verzeichnisses mit Dateisymbolen und einklappbaren Unterverzeichnissen anzuzeigen, verwende die Komponente <FileTree>.

Vorschau
  • astro.config.mjs eine wichtige Datei
  • package.json
  • README.md
  • Ordnersrc
    • Ordnercomponents
      • Header.astro
    • …
  • Ordnerpages/
    • …

Import

Abschnitt betitelt „Import“
import { FileTree } from '@astrojs/starlight/components';

Verwendung

Abschnitt betitelt „Verwendung“

Zeige einen Dateibaum mit Dateisymbolen und zusammenklappbaren Unterverzeichnissen unter Verwendung der Komponente <FileTree> an.

Gib die Struktur deiner Dateien und Verzeichnisse mit einer ungeordneten Markdown-Liste innerhalb von <FileTree> an. Erstelle ein Unterverzeichnis mit einer verschachtelten Liste oder füge ein / am Ende eines Listenelements hinzu, um es als Verzeichnis ohne spezifischen Inhalt darzustellen.

import { FileTree } from '@astrojs/starlight/components';


<FileTree>


- astro.config.mjs
- package.json
- src
  - components
    - Header.astro
    - Title.astro
  - pages/


</FileTree>
Vorschau
  • astro.config.mjs
  • package.json
  • Ordnersrc
    • Ordnercomponents
      • Header.astro
      • Title.astro
    • Ordnerpages/
      • …

Einträge hervorheben

Abschnitt betitelt „Einträge hervorheben“

Hebe eine Datei oder ein Verzeichnis hervor, indem du seinen Namen fett druckst, z. B. **README.md**.

import { FileTree } from '@astrojs/starlight/components';


<FileTree>


- src
  - components
    - **Header.astro**
    - Title.astro


</FileTree>
Vorschau
  • Ordnersrc
    • Ordnercomponents
      • Header.astro
      • Title.astro

Kommentare hinzufügen

Abschnitt betitelt „Kommentare hinzufügen“

Füge einen Kommentar zu einer Datei oder einem Verzeichnis hinzu, indem du nach dem Namen weiteren Text hinzufügst. Inline-Markdown-Formatierung wie Fett- und Kursivdruck wird in Kommentaren unterstützt.

import { FileTree } from '@astrojs/starlight/components';


<FileTree>


- src
  - components
    - Header.astro eine **wichtige** Datei
    - Title.astro


</FileTree>
Vorschau
  • Ordnersrc
    • Ordnercomponents
      • Header.astro eine wichtige Datei
      • Title.astro

Platzhalter hinzufügen

Abschnitt betitelt „Platzhalter hinzufügen“

Füge Platzhalterdateien und Verzeichnisse hinzu, indem du entweder ... oder … als Namen verwendest. Dies kann nützlich sein, um einem Leser zu zeigen, dass ein Ordner mehr Elemente enthalten soll, ohne sie alle explizit anzugeben.

import { FileTree } from '@astrojs/starlight/components';


<FileTree>


- src
  - components
    - Header.astro
    - …


</FileTree>
Vorschau
  • Ordnersrc
    • Ordnercomponents
      • Header.astro
      • …

Sonderzeichen umgehen

Abschnitt betitelt „Sonderzeichen umgehen“

Sichere Sonderzeichen wie Unterstriche oder Leerzeichen in Dateinamen, indem du den Dateinamen in Code-Backticks einschließt.

import { FileTree } from '@astrojs/starlight/components';


<FileTree>


- `__init__.py`
- `Hallo Welt.txt`
- **`LIES MICH ZUERST.md`**


</FileTree>
Vorschau
  • __init__.py
  • Hallo Welt.txt
  • LIES MICH ZUERST.md

<FileTree>-Eigenschaften

Abschnitt betitelt „<FileTree>-Eigenschaften“

Implementation: FileTree.astro

Die Komponente <FileTree> akzeptiert keine Eigenschaften.