文件树 - 二甲基

文件树组件用于展示项目的目录与文件结构，支持自动识别文件扩展名图标、目录层级折叠以及变更状态标注。

语法格式#

支持容器语法与代码围栏双语法。

容器语法#

1
::: file-tree{title="Shirone 目录结构"}
2
- src/
3
  - config/
4
    - siteConfig.ts
5
    - sidebarConfig.ts
6
  - content/
7
    - posts/
8
      - hello-world.md
9
  - astro.config.mjs
10
- package.json
11
- pnpm-lock.yaml
12
:::

渲染效果：

::: file-tree{title=“Shirone 目录结构”}

src/
- config/
  - siteConfig.ts
  - sidebarConfig.ts
- content/
  - posts/
    - hello-world.md
- astro.config.mjs
package.json
pnpm-lock.yaml :::

围栏代码块语法#

1
```file-tree title="构建输出"
2
dist/
3
├── assets/
4
│   ├── app.js
5
│   └── style.css
6
├── index.html
7
└── pagefind/

1
**渲染效果**：
2

3
```file-tree title="构建输出"
4
dist/
5
├── assets/
6
│   ├── app.js
7
│   └── style.css
8
├── index.html
9
└── pagefind/

变更状态与图标智能匹配#

在条目前添加符号即可标注差异状态：

1
::: file-tree{title="本次提交的改动"}
2
- src/
3
  - content/
4
    ~ posts/
5
      + markdown-file-tree/
6
      - legacy-notes.md
7
  ~ astro.config.mjs
8
  + src/utils/markdown-diff.ts
9
:::

渲染效果：

::: file-tree{title=“本次提交的改动”}

src/
- content/ ~ posts/
  - markdown-file-tree/
  - legacy-notes.md ~ astro.config.mjs
- src/utils/markdown-diff.ts :::

符号	含义	视觉表达
`+`	新增	新增状态指示色
`-`	删除	删除状态指示色
`~`	修改	修改状态指示色

渲染特性#

扩展名识别：自动根据文件后缀（如 .ts、.json、.astro、.md、.css、.png）匹配对应的 Material / Devicon 图标。
差异标记：支持在条目前添加 +（新增）、-（删除）、~（修改）等符号，自动生成带颜色的差异状态指示。
原生折叠：包含子目录的节点默认支持可折叠展开交互。

与代码树的区别#

需求	推荐组件
只看目录结构	`file-tree`
目录 + 多文件源码并排查看	代码树

二甲基

语法格式#

容器语法#

围栏代码块语法#

变更状态与图标智能匹配#

渲染特性#

与代码树的区别#

Markdown 语法

继续阅读

换条路线

评论

二甲基

语法格式#

容器语法#

围栏代码块语法#

变更状态与图标智能匹配#

渲染特性#

与代码树的区别#

分享文章

沿着主题读

换条路线

评论