515 字
3 分钟
页面浏览--访问次数--
Markdown 文件树

文件树有两种等价写法:嵌套列表(容器语法)和终端 tree 输出(代码围栏语法)。两者都会自动识别扩展名图标、支持目录折叠与变更状态标注。

容器语法:嵌套列表#

效果

Shirone 目录结构
  • src
    • config
      • siteConfig.ts
      • sidebarConfig.ts
    • content
      • posts
        • hello-world.md
    • content.config.ts关键配置文件
  • public
    • favicon.svg
  • package.json

源码(容器名与花括号紧贴;每级缩进 2 个空格)

:::file-tree{title="Shirone 目录结构"}
- src
- config/
- siteConfig.ts
- sidebarConfig.ts
- content
- posts/
- hello-world.md
- **content.config.ts** # 关键配置文件
- public/
- favicon.svg
- package.json
:::

围栏语法:终端 tree 输出#

效果

构建输出
  • dist
    • _astro
      • index.css
      • page.js
    • posts
      • hello-world
        • index.html
    • favicon.ico

源码(围栏信息串用空格分隔的 title="...",不是花括号)

```file-tree title="构建输出" icon="simple"
dist
├── _astro/
│ ├── index.css
│ └── page.js
├── posts/
│ └── hello-world/
│ └── index.html
└── favicon.ico
```

变更状态与标记#

效果

本次改动
  • src
    • components
      • +NewCard.astro新增组件
      • -OldCard.astro删除组件
      • Card.astro未改动
    • content.config.ts重点文件

源码

:::file-tree{title="本次改动"}
- src
- components
- ++ NewCard.astro # 新增组件
- -- OldCard.astro # 删除组件
- Card.astro # 未改动
- **content.config.ts** # 重点文件
:::
标记含义
++ 名称新增(绿色背景 + 徽章)
-- 名称删除(红色背景 + 删除线)
# 文字行尾注释(右对齐、弱化显示)
**名称**加粗,突出关键文件
目录名末尾加 /该目录默认折叠,读者可点击展开;不加斜杠的目录默认展开

参数#

参数取值默认说明
title字符串(≤200 字符)空标题栏与无障碍标签
iconcolored / simplecolored彩色扩展名图标或单色极简图标

第 14 篇,共 23 篇本文属于系列

Markdown 文件树
https://www.klucen.cn/posts/syntax/markdown-file-tree/
作者
KLucen
发布于
2025-12-14
许可协议
CC BY-NC-SA 4.0

分享文章

生成精美分享图或复制链接,与更多人分享本文。

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取

评论

正在加载评论...

最后更新于 ,距今已过 301 天

部分内容可能已过时