Перейти к содержимому
Starlight

Дерево файлов

Для отображения структуры каталога с иконками файлов и сворачиваемыми подкаталогами используйте компонент <FileTree>.

Превью
  • astro.config.mjs — важный файл
  • package.json
  • README.md
  • Директорияsrc
    • Директорияcomponents
      • Header.astro
    • …
  • Директорияpages/
    • …

Импорт

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

Использование

Отображайте дерево файлов с иконками файлов и сворачиваемыми подкаталогами с помощью компонента <FileTree>.

Укажите структуру ваших файлов и каталогов с помощью неупорядоченного списка Markdown внутри <FileTree>. Создайте подкаталог с помощью вложенного списка или добавьте / в конец элемента списка, чтобы отобразить его как каталог без определённого содержимого.

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


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

Выделение элементов

Выделите файл или каталог, сделав его имя жирным, например: **README.md**.

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


<FileTree>


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


</FileTree>
Превью
  • Директорияsrc
    • Директорияcomponents
      • Header.astro
      • Title.astro

Добавление комментариев

Добавьте комментарий к файлу или каталогу с помощью дополнительного текста после имени. В комментариях поддерживается встроенное форматирование Markdown, такое как полужирное и курсивное начертание.

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


<FileTree>


- src
  - components
    - Header.astro — **важный** файл
    - Title.astro


</FileTree>
Превью
  • Директорияsrc
    • Директорияcomponents
      • Header.astro — важный файл
      • Title.astro

Добавление заглушек

Добавьте заглушки файлов и каталогов, используя в качестве имени либо ..., либо _. Это может быть полезно для указания читателю, что папка должна содержать больше элементов, не указывая их все в явном виде.

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


<FileTree>


- src
  - components
    - Header.astro
    - …


</FileTree>
Превью
  • Директорияsrc
    • Директорияcomponents
      • Header.astro
      • …

Параметры <FileTree>

Реализация: FileTree.astro

Компонент <FileTree> не принимает никаких параметров.