文件树 变更
概述
在 Markdown 中，你可以使用 file-tree 容器 来显示带有文件图标和可折叠子目录的目录结构。
语法
在 ::: file-tree 容器，使用内置的 Markdown 无序列表语法 指定文件和目录的组织结构。 使用嵌套的列表项创建子目录；若希望某个目录不显示具体内容，只需在列表项末尾添加斜杠 / 即可。
以下语法可用于自定义文件树的外观：
- 通过加粗文件名或目录名来突出显示，例如
**README.md** - 通过在名称后添加以
#开头的注释来为文件或目录添加注释，例如README.md # 这是一个 README 文件 - 通过在名称前添加
++或--来标记文件或目录为 新增 或 删除 - 使用
...或…作为名称来添加占位符文件和目录。 - 在
:::file-tree后添加icon="simple"或 添加icon="colored"可以切换为简单图标或彩色图标，默认为彩色图标。 - 在
:::file-tree后添加title="xxxx"可以为文件树添加标题。
rc.193 主题更新说明
过去 file-tree 使用 空格 来区分文件名和注释，这在某些情况下会导致问题，例如文件名中包含空格时。 为了解决这个问题，我们引入了 # 号注释 语法，您可以在文件名后添加以 # 开头的注释，例如 README.md # 这是一个 README 文件。
此修改为 破坏性更新 更新。
输入：
::: 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 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+ 不同的图标，对最终的构建包体积影响 也不会很大。
