file-tree.mdx

title	description
Verzeichnisbaum	Lerne, wie du die Struktur eines Verzeichnisses mit Dateisymbolen und einklappbaren Unterverzeichnissen in Starlight anzeigen kannst.

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

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

import Preview from '~/components/component-preview.astro';

• astro.config.mjs eine wichtige Datei
• package.json
• README.md
• src
  • components
    • Header.astro
  • …
• pages/

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>

{% filetree %}
- astro.config.mjs
- package.json
- src
  - components
    - Header.astro
    - Title.astro
  - pages/
{% /filetree %}

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

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>

{% filetree %}
- src
  - components
    - **Header.astro**
    - Title.astro
{% /filetree %}

• src
  • components
    • 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>

{% filetree %}
- src
  - components
    - Header.astro eine **wichtige** Datei
    - Title.astro
{% /filetree %}

• src
  • components
    • 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>

{% filetree %}
- src
  - components
    - Header.astro
    - …
{% /filetree %}

• src
  • components
    • Header.astro
    • …

<FileTree>-Eigenschaften

Implementation: FileTree.astro

Die Komponente <FileTree> akzeptiert keine Eigenschaften.