跳转到内容
Starlight

文件树

要显示带有文件图标和可折叠子目录的目录结构，请使用 <FileTree> 组件。

预览
  • astro.config.mjs 一个 重要 文件
  • package.json
  • README.md
  • 文件夹src
    • 文件夹components
      • Header.astro
    • …
  • 文件夹pages/
    • …

导入

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

用法

使用 <FileTree> 组件可以显示带有文件图标和可折叠子目录的文件树。

使用 <FileTree> 内的 无序 Markdown 列表 来指定文件和目录的结构。 使用嵌套列表可以创建子目录，或在列表项末尾添加 / 以将其渲染为没有特定内容的目录。

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> 组件不接受任何 props。