概述

在 Markdown 中，你可以使用 file-tree 容器 来显示带有文件图标和可折叠子目录的目录结构。

语法

在 ::: file-tree 容器，使用内置的 Markdown 无序列表语法 指定文件和目录的组织结构。 使用嵌套的列表项创建子目录；若希望某个目录不显示具体内容，只需在列表项末尾添加斜杠 / 即可。

以下语法可用于自定义文件树的外观：

• 通过加粗文件名或目录名来突出显示，例如 **README.md**
• 通过在名称后添加更多文本来为文件或目录添加注释
• 通过在名称前添加 ++ 或 -- 来标记文件或目录为 新增 或 删除
• 使用 ... 或 … 作为名称来添加占位符文件和目录。
• 在 :::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
- …
:::

输出：

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

…

使用简单图标

输入：

::: file-tree icon="simple"
- docs
  - .vuepress
    - config.ts
  - page1.md
  - README.md
- package.json
:::

输出：

docs

.vuepress

config.ts

page1.md

README.md

package.json

配置

你可以在 markdown.fileTree 选项中配置 文件树的图标默认类型：

.vuepress/config.ts

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      fileTree: {
        icon: 'simple', // 'simple' | 'colored'
      }
    },
  })
})

担心彩色图标会影响构建包体积？

您无需担心，文件树的彩色图标 也是从 iconify 解析获取，推荐您在本地安装 @iconify/json 项目， 主题会自动将 @iconify/json 中的图标数据解析为本地图标资源，即使您在不同的页面 多次使用，这包括了 导航栏、侧边栏、图标组件等，相同图标仅会存在一份资源！

每个彩色图标的大小约在 1kb ~ 2kb 之间，即使您的文件树非常夸张的使用了 100+ 不同的图标，对最终的构建包体积影响 也不会很大。

贡献者

pengzhanbo

更新日志

2025/4/30 14:34

查看所有更新日志

• d1496-docs: update docs于 2025/4/30
• 10708-feat(plugin-md-power): add diff syntax in file-tree container, close #577 (#578)于 2025/4/29
• 0fd6c-refactor(theme): improve types and flat config (#524)于 2025/3/15
• 0c53b-docs: improve docs (#332)于 2024/11/8
• c177f-docs: improve docs (#240)于 2024/9/30