Zum Inhalt springen

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 { FileTree } from '@astrojs/starlight/components';

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/

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

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

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

Implementation: FileTree.astro

Die Komponente <FileTree> akzeptiert keine Eigenschaften.