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/
    • …

Importation

Section intitulée « Importation »
import { FileTree } from '@astrojs/starlight/components';

Utilisation

Section intitulée « 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

Section intitulée « 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

Section intitulée « Ajouter des commentaires »

Ajoutez un commentaire à un fichier ou à un répertoire en ajoutant du texte après le nom. La syntaxe de mise en forme Markdown, telle que le gras et l’italique, est prise 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

Section intitulée « 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
      • …

Échapper les caractères spéciaux

Section intitulée « Échapper les caractères spéciaux »

Échappez les caractères spéciaux tels que les tirets bas ou les espaces dans les noms de fichiers en entourant le nom de fichier avec des accents graves.

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


<FileTree>


- `__init__.py`
- `Hello world.txt`
- **`À LIRE EN PREMIER.md`**


</FileTree>
Aperçu
  • __init__.py
  • Hello world.txt
  • À LIRE EN PREMIER.md

Props de <FileTree>

Section intitulée « Props de <FileTree> »

Implémentation : FileTree.astro

Le composant <FileTree> n’accepte aucune props.