FileTree

可折叠的目录树，使用嵌套 Markdown 列表编写——支持文件夹、文件、高亮和占位行。

安装

npx @cloudflare/nimbus-docs add file-tree

yarn dlx @cloudflare/nimbus-docs add file-tree

pnpm dlx @cloudflare/nimbus-docs add file-tree

bunx @cloudflare/nimbus-docs add file-tree

预览

src/
- components/
  - ui/
    - Badge.astro
    - Card.astro
- content/
  - docs/
    - index.mdx
- styles/
  - globals.css
package.json
astro.config.mjs

<FileTree>
- src/
- components/
  - ui/
    - **Badge.astro**
    - Card.astro
- content/
  - docs/
    - index.mdx
- styles/
  - globals.css
- package.json
- astro.config.mjs
</FileTree>

示例

扁平结构

单层列表——仅显示顶级文件，不包含嵌套目录。

README.md
package.json
astro.config.mjs
tsconfig.json

<FileTree>
- README.md
- package.json
- astro.config.mjs
- tsconfig.json
</FileTree>

嵌套结构

末尾带 / 表示目录；在行内嵌套列表可添加子项。

src/
- components/
  - Header.astro
  - Footer.astro
- pages/
  - index.astro

<FileTree>
- src/
- components/
  - Header.astro
  - Footer.astro
- pages/
  - index.astro
</FileTree>

高亮和占位

用 **...** 包裹条目可高亮显示。使用 ...（单独一行）作为省略占位符。

src/
- components/
  - Header.astro
  - Footer.astro
  - …
- pages/
  - …

<FileTree>
- src/
- components/
  - **Header.astro**
  - Footer.astro
  - ...
- pages/
  - ...
</FileTree>