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
  • Directorysrc
    • Directorycomponents
      • Header.astro
    • …
  • Directorypages/
    • …

Import

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

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
  • Directorysrc
    • Directorycomponents
      • Header.astro
      • Title.astro
    • Directorypages/
      • …

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
  • Directorysrc
    • Directorycomponents
      • Header.astro
      • Title.astro

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
  • Directorysrc
    • Directorycomponents
      • Header.astro eine wichtige Datei
      • Title.astro

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
  • Directorysrc
    • Directorycomponents
      • Header.astro
      • …

<FileTree>-Eigenschaften

Implementation: FileTree.astro

Die Komponente <FileTree> akzeptiert keine Eigenschaften.