Aller au contenu
Starlight

Arborescence de fichiers

Pour afficher la structure d’un répertoire avec des icônes de fichiers et des sous-répertoires repliables, utilisez le composant <FileTree>.

Aperçu
  • astro.config.mjs un fichier important
  • package.json
  • README.md
  • Répertoiresrc
    • Répertoirecomponents
      • Header.astro
    • …
  • Répertoirepages/
    • …

Import

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

Utilisation

Affichez une arborescence de fichiers avec des icônes de fichiers et des sous-répertoires repliables en utilisant le composant <FileTree>.

Spécifiez la structure de vos fichiers et répertoires avec une liste Markdown non ordonnée à l’intérieur de <FileTree>. Créez un sous-répertoire à l’aide d’une liste imbriquée ou ajoutez un / à la fin d’un élément de liste pour l’afficher comme un répertoire sans contenu spécifique.

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


<FileTree>


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


</FileTree>
Aperçu
  • astro.config.mjs
  • package.json
  • Répertoiresrc
    • Répertoirecomponents
      • Header.astro
      • Title.astro
    • Répertoirepages/
      • …

Mettre en évidence les entrées

Faites ressortir un fichier ou un répertoire en mettant son nom en gras, par exemple **README.md**.

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


<FileTree>


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


</FileTree>
Aperçu
  • Répertoiresrc
    • Répertoirecomponents
      • Header.astro
      • Title.astro

Ajouter des commentaires

Ajoutez un commentaire à un fichier ou à un répertoire en ajoutant du texte après le nom. Le formatage Markdown en ligne, tel que le gras et l’italique, est pris en charge dans les commentaires.

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


<FileTree>


- src
  - components
    - Header.astro un fichier **important**
    - Title.astro


</FileTree>
Aperçu
  • Répertoiresrc
    • Répertoirecomponents
      • Header.astro un fichier important
      • Title.astro

Ajouter des entrées fictives

Ajoutez des fichiers et des répertoires fictifs en utilisant soit ... soit … comme nom. Cela peut être utile pour indiquer à un lecteur qu’un dossier est censé contenir plus d’éléments sans les spécifier tous explicitement.

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


<FileTree>


- src
  - components
    - Header.astro
    - …


</FileTree>
Aperçu
  • Répertoiresrc
    • Répertoirecomponents
      • Header.astro
      • …

Props de <FileTree>

Implémentation : FileTree.astro

Le composant <FileTree> n’accepte aucune props.