跳转到内容
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 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> 属性

“<FileTree> 属性”部分

实现： FileTree.astro

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