测试 File TreeShortcodes

这篇文章专门测试 File Tree 指令。这里使用当前 Astro 博客支持的 file-tree 代码块语法。

当前实现支持内联 JSON、YAML、TOML、缩进文本树、文章相对资源文件、path 构建时扫描，以及 level、folderSlash、ignoreList、highlightList、name、format 这些参数。

YAML 内联数据

源码：

md
```file-tree {level=1 folderSlash=true highlightList="app.ts,Button.astro"}
- name: src
  type: dir
  children:
    - name: app.ts
      type: file
    - name: components
      type: dir
      children:
        - name: Button.astro
          type: file
        - name: Card.astro
          type: file
- name: package.json
  type: file
```

效果：

    • app.ts
  • package.json

JSON 内联数据

源码：

md
```file-tree {level=-1 folderSlash=true}
[
  {
    "name": "content",
    "type": "dir",
    "children": [
      {
        "name": "blog",
        "type": "dir",
        "children": [
          { "name": "file-tree-test", "type": "dir", "children": [{ "name": "index.md", "type": "file" }] }
        ]
      }
    ]
  },
  { "name": "astro.config.mjs", "type": "file" }
]
```

效果：

        • index.md
  • astro.config.mjs

YAML 资源文件

源码：

md
```file-tree {file="./project-tree.yaml" level=1 folderSlash=true highlightList="Navigation.astro"}
```

效果：

  • README.md

TOML 资源文件

源码：

md
```file-tree {file="./release-tree.toml" level=-1 folderSlash=true highlightList="release/dist/_astro/article.js"}
```

效果：

      • index.html
        • article.js
    • wrangler.toml

缩进文本树

源码：

md
```file-tree {level=2 folderSlash=true highlightList="src/plugins/remark-file-tree.ts"}
src/
  plugins/
    remark-file-tree.ts
    remark-gallery.ts
  scripts/
    article.ts
  styles/
    article.css
astro.config.mjs
```

效果：

      • remark-file-tree.ts
      • remark-gallery.ts
      • article.ts
      • article.css
  • astro.config.mjs

树形字符输入

源码：

md
```file-tree {level=1 folderSlash=true}
.
├── public/
│   ├── favicon.svg
│   └── robots.txt
└── src/
    ├── content/
    │   └── blog/
    └── pages/
        └── index.astro
```

效果：

    • favicon.svg
    • robots.txt

目录扫描模式

源码：

md
```file-tree {path="src/plugins" level=0 folderSlash=true name="{path}" highlightList="remark-file-tree.ts"}
.
```

效果：

忽略列表

源码：

md
```file-tree {path="src/plugins" level=-1 folderSlash=true name="plugins" ignoreList="rehype-pangu.ts,remark-gallery.ts"}
.
```

效果：

    • mermaid-ssr.ts
    • rehype-responsive-images.ts
    • remark-admonition.ts
    • remark-bilibili.ts
    • remark-code-title.ts
    • remark-echarts.ts
    • remark-file-tree.ts
    • remark-footnotes.ts
    • remark-mermaid.ts
    • remark-music.ts
    • remark-tabs.ts
    • remark-timeline.ts

默认根目录扫描

不写内容也不写 path 时，默认扫描项目根目录；内置忽略 .git、.astro、dist、node_modules 等目录。

源码：

md
```file-tree {level=0 folderSlash=true highlightList="src"}
```

效果：

  • .env.example
  • .gitignore
  • .gitmessage
  • .nvmrc
  • AGENTS.md
  • astro.config.mjs
  • bun.lock
  • package.json
  • README.md
  • tsconfig.json