# 文件树

编辑 Astro 和 MDX 文档中的文件与目录树，不会修改仓库文件。

import ContentEditor from '@/components/editor/ContentEditor.astro';

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

## 支持的配置

同一个编辑器支持 [Astro](/zh-cn/frameworks/astro/)、[Starlight](/zh-cn/frameworks/starlight/)、[Fumadocs](/zh-cn/frameworks/fumadocs/) 和 [Prosefly](/zh-cn/frameworks/lotus/) 配置。选择与你的网站匹配的配置，即可查看该集成支持的组件语法和编辑控件。

## 可视化编辑

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

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

<ContentEditor content="file-tree" />

## 源码示例

```mdx
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 指南

继续阅读：[卡片](/docs/zh-cn/editor/components/card/) · [步骤](/docs/zh-cn/editor/components/steps/) · [提示块](/docs/zh-cn/editor/components/callout/).