跳转到内容

文件树

要显示带有文件图标和可折叠子目录的目录结构,请使用 <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 an **important** file
- 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.astro

<FileTree> 组件不接受任何属性。