文件树

使用 Prosefly 的 MDX 组件编辑器编辑示意性的文件树，同时保持 Astro 或 MDX 源文件不变。

支持的配置

同一个编辑器支持 Astro、Starlight、Fumadocs 和 Prosefly 配置。选择与你的网站匹配的配置，即可查看该集成支持的组件语法和编辑控件。

可视化编辑

在文件树中修改文件和文件夹名称，通过单项菜单添加、删除条目，并安排它们所属的文件夹。图标和注释控件的支持取决于当前配置。

移动文件树条目只会修改文档示例，不会移动或重命名仓库中的实际文件。

file-tree.mdx

StarlightProsefly

可视化源码

重置示例

正在加载编辑器…

这是一个可编辑的示例，修改仅保留在当前页面。

源码示例

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

## 文档文件

<FileTree>

- src/
  - content/
    - docs/
      - getting-started.mdx
- astro.config.mjs
- package.json

</FileTree>

配置差异

Starlight 和 Prosefly 在 FileTree 中使用嵌套的 Markdown 列表，Fumadocs 使用 Files、Folder 和 File 组件。在源码中修改时，请保留对应的嵌套结构。编辑器中展开文件夹，与设置发布页面的默认展开属性是两回事。

自定义节点和暂不支持的属性仍可在源码模式中编辑。最终的文件树样式，请通过文档页面预览确认。

相关 MDX 指南

继续阅读：卡片 · 步骤 · 提示块.