文件树
概述
在 Markdown 中，你可以使用 file-tree 容器或代码块来显示带有文件图标和可折叠子目录的目录结构。
语法
容器语法
在 ::: file-tree 容器，使用内置的 Markdown 无序列表语法 指定文件和目录的组织结构。 使用嵌套的列表项创建子目录；若希望某个目录不显示具体内容，只需在列表项末尾添加斜杠 / 即可。
::: file-tree
<!-- 在这里添加文件树的组织结构 -->
:::代码块语法
在命名为 file-tree 或者 tree 的代码块中，使用 tree 命令行工具的输出内容（使用 Unicode 制表符） 来渲染文件树。
```file-tree
# 在这里添加文件树的组织结构
```
```tree
# 在这里添加文件树的组织结构
```自定义文件树外观
以下语法可用于自定义文件树的外观：
- 通过加粗文件名或目录名来突出显示，例如
**README.md** - 通过在名称后添加以
#开头的注释来为文件或目录添加注释，例如README.md # 这是一个 README 文件 - 通过在名称前添加
++或--来标记文件或目录为 新增 或 删除 - 使用
...或…作为名称来添加占位符文件和目录。 - 在
:::file-tree后添加icon="simple"或添加icon="colored"可以切换为简单图标或彩色图标，默认为彩色图标。 - 在
:::file-tree后添加title="xxxx"可以为文件树添加标题。
示例
容器语法
输入：
::: file-tree
- docs
- .vuepress
- ++ config.ts
- -- page1.md
- README.md
- theme # 一个 **主题** 目录
- client
- components
- **Navbar.vue**
- composables
- useNavbar.ts
- styles
- navbar.css
- config.ts
- node/
- package.json
- pnpm-lock.yaml
- .gitignore
- README.md
- …
:::输出：
config.ts
page1.md
README.md
Navbar.vue
useNavbar.ts
navbar.css
config.ts
node
package.json
pnpm-lock.yaml
.gitignore
README.md
…
代码块语法
输入：
```file-tree
.
├── docs
│ ├── .vuepress
│ │ └── config.ts
│ ├── page1.md
│ └── README.md
├── theme
│ ├── client
│ │ ├── components
│ │ │ ├── Navbar.vue
│ │ │ └── useNavbar.ts
│ │ ├── styles
│ │ │ └── navbar.css
│ │ └── config.ts
│ └── node/
├── package.json
├── pnpm-lock.yaml
├── .gitignore
├── README.md
└── …
```输出：
config.ts
page1.md
README.md
Navbar.vue
useNavbar.ts
navbar.css
config.ts
node
package.json
pnpm-lock.yaml
.gitignore
README.md
…
使用简单图标
输入：
::: file-tree icon="simple"
- docs
- .vuepress
- config.ts
- page1.md
- README.md
- package.json
:::
<!-- 或者 -->
```file-tree icon="simple"
.
├── docs
│ ├── .vuepress
│ │ └── config.ts
│ ├── page1.md
│ └── README.md
└── package.json
```输出：
config.ts
page1.md
README.md
package.json
配置
你可以在 markdown.fileTree 选项中配置文件树的图标默认类型：
export default defineUserConfig({
theme: plumeTheme({
markdown: {
fileTree: {
icon: 'simple', // 'simple' | 'colored'
}
},
})
})担心彩色图标会影响构建包体积？
您无需担心，文件树的彩色图标也是从 iconify 解析获取，推荐您在本地安装 @iconify/json 项目， 主题会自动将 @iconify/json 中的图标数据解析为本地图标资源，即使您在不同的页面 多次使用，这包括了导航栏、侧边栏、图标组件等，相同图标仅会存在一份资源！
每个彩色图标的大小约在 1kb ~ 2kb 之间，即使您的文件树非常夸张的使用了 100+ 不同的图标，对最终的构建包体积影响 也不会很大。
