代码树新

约 685 字大约 2 分钟

2025-05-02

概述

在 markdown 中，使用 ::: code-tress 容器，或者使用 @[code-tree](dir_path)，可以显示一个带有文件树的代码块区域。

相比于代码块分组，代码树可以更加清晰地展示代码文件的组织结构，以及文件的依赖关系。

启用

该功能默认不启用，你需要在 theme 配置中启用。

.vuepress/config.ts
export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      codeTree: true, 
    }
  })
})

使用

主题提供了两种使用方式：

code-tree 容器

::: code-tree title="Project Name" height="400px" entry="filepath"
```lang title="filepath" :active
<!-- code content-->
```

```lang title="filepath"
<!-- code content-->
```
<!-- 更多代码块 -->
:::

使用 ::: code-tree 容器包裹多个代码块。

在 ::: code-tree 后使用 title="Project Name" 声明代码树的标题
在 ::: code-tree 后使用 height="400px" 声明代码树的高度
在 ::: code-tree 后使用 entry="filepath" 声明默认展开的文件路径
在代码块 ``` lang 后使用 title="filepath" 声明当前代码块的文件路径
如果在 ::: code-tree 未声明 entry="filepath"，可以在代码块 ``` lang 后使用 :active 声明当前代码块为展开状态
如果未指定展开的文件路径，默认展开第一个文件

代码块上为什么是 title="filepath" 而不是 filepath="filepath" ?

因为主题已经在代码块上提供了标题语法的支持，沿用已有的语法支持可以减少学习成本。

输入：

::: code-tree title="Vue App" height="400px" entry="src/main.ts"
```vue title="src/components/HelloWorld.vue"
<template>
  <div class="hello">
    <h1>Hello World</h1>
  </div>
</template>
```

```vue title="src/App.vue"
<template>
  <div id="app">
    <h3>vuepress-theme-plume</h3>
    <HelloWorld />
  </div>
</template>
```

```ts title="src/main.ts"
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
```

```json title="package.json"
{
  "name": "Vue App",
  "scripts": {
    "dev": "vite"
  }
}
```
:::

输出：

Vue App

src

components

HelloWorld.vue

App.vue

main.ts

package.json

src/components/HelloWorld.vue
<template>
  <div class="hello">
    <h1>Hello World</h1>
  </div>
</template>
src/App.vue
<template>
  <div id="app">
    <h3>vuepress-theme-plume</h3>
    <HelloWorld />
  </div>
</template>
src/main.ts
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
package.json
{
  "name": "Vue App",
  "scripts": {
    "dev": "vite"
  }
}

从目录导入 code-tree

主题支持通过以下语法从目录导入 code-tree:

<!-- 简单导入 -->
@[code-tree](dir_path)

<!-- 添加的配置 -->
@[code-tree title="Project Name" height="400px" entry="filepath"](dir_path)

dir_path: 当传入绝对路径，即以 / 开头时，从文档站点的源目录开始查找。当传入相对路径时，即以 . 开头时，表示相对于当前 markdown 文件。
title: 代码树标题，可选，默认为空
height: 代码树高度，可选，默认为空
entry: 默认展开的文件路径，可选，默认为第一个文件

输入：

<!-- 此目录为主题仓库 `docs/.vuepress/notes/` -->
@[code-tree title="Notes 配置" height="400px" entry="index.ts"](/.vuepress/notes)

输出：

Notes 配置

index.ts

theme-config.ts

theme-guide.ts

index.ts

plugins.ts

theme-config.ts

theme-guide.ts

tools.ts

index.ts

en/index.ts
import type { ThemeNoteListOptions } from 'vuepress-theme-plume'
import { defineNotesConfig } from 'vuepress-theme-plume'
import { themeConfig } from './theme-config'
import { themeGuide } from './theme-guide'

export const enNotes: ThemeNoteListOptions = defineNotesConfig({
  dir: 'en/notes',
  link: '/',
  notes: [
    themeGuide,
    themeConfig,
  ],
})
en/theme-config.ts
import type { ThemeNote } from 'vuepress-theme-plume'
import { defineNoteConfig } from 'vuepress-theme-plume'

export const themeConfig: ThemeNote = defineNoteConfig({
  dir: 'theme/config',
  link: '/config/',
  sidebar: [
    {
      text: 'Config',
      collapsed: false,
      items: [
        'intro',
        'basic',
        'locales',
        'notes',
      ],
    },
    {
      text: 'frontmatter',
      prefix: 'frontmatter',
      collapsed: false,
      items: [
        'basic',
        'article',
      ],
    },
  ],
})
en/theme-guide.ts
import type { ThemeNote } from 'vuepress-theme-plume'
import { defineNoteConfig } from 'vuepress-theme-plume'

export const themeGuide: ThemeNote = defineNoteConfig({
  dir: 'theme/guide',
  link: '/guide/',
  sidebar: [
    {
      text: 'Quick Start',
      collapsed: false,
      icon: 'carbon:idea',
      prefix: 'quick-start',
      items: [
        'intro',
        'usage',
        'project-structure',
        'write',
        'blog',
        'document',
        'international',
        'deployment',
        'optimize-build',
      ],
    },
    {
      text: 'Write',
      icon: 'fluent-mdl2:edit-create',
      collapsed: false,
      items: [
        {
          text: 'markdown',
          icon: 'material-symbols:markdown-outline',
          prefix: 'markdown',
          collapsed: true,
          items: [
            'basic',
            'extensions',
            'icons',
            'mark',
            'plot',
            'abbr',
            'annotation',
            'card',
            'steps',
            'file-tree',
            'tabs',
            'timeline',
            'demo-wrapper',
            'collapse',
            'npm-to',
            'caniuse',
            'include',
          ],
        },
      ],
    },
    {
      text: 'Customization',
      icon: 'material-symbols:dashboard-customize-outline-rounded',
      collapsed: false,
      prefix: 'custom',
      items: [
        'home',
        'style',
      ],
    },
  ],
})
zh/index.ts
import type { ThemeNoteListOptions } from 'vuepress-theme-plume'
import { defineNotesConfig } from 'vuepress-theme-plume'
// import { plugins } from './plugins'
import { themeConfig } from './theme-config'
import { themeGuide } from './theme-guide'
import { tools } from './tools'

export const zhNotes: ThemeNoteListOptions = defineNotesConfig({
  dir: 'notes',
  link: '/',
  notes: [
    themeGuide,
    themeConfig,
    // plugins,
    tools,
  ],
})
zh/plugins.ts
import type { ThemeNote } from 'vuepress-theme-plume'
import { defineNoteConfig } from 'vuepress-theme-plume'

export const plugins: ThemeNote = defineNoteConfig({
  dir: 'plugins',
  link: '/plugins/',
  sidebar: [
    {
      text: '插件',
      link: '/plugins/',
      items: [
        // 'caniuse',
        // 'iconify',
        'shiki',
        'md-power',
        'content-updated',
        {
          text: 'plugin-netlify-functions',
          dir: 'netlify-functions',
          link: '/plugins/plugin-netlify-functions/',
          collapsed: true,
          items: [
            '介绍',
            '使用',
            '功能',
            'api',
            'functions',
          ],
        },
      ],
    },
  ],
})
zh/theme-config.ts
import type { ThemeNote } from 'vuepress-theme-plume'
import { defineNoteConfig } from 'vuepress-theme-plume'

export const themeConfig: ThemeNote = defineNoteConfig({
  dir: 'theme/config',
  link: '/config/',
  sidebar: [
    {
      text: '配置',
      collapsed: false,
      items: [
        'intro',
        'theme',
        'locales',
        'navbar',
        'notes',
        'sidebar',
        'markdown',
      ],
    },
    {
      text: '页面配置',
      prefix: 'frontmatter',
      collapsed: false,
      items: [
        'basic',
        'home',
        'post',
        'friend',
      ],
    },
    {
      text: '内置插件',
      prefix: 'plugins',
      collapsed: false,
      items: [
        '',
        'shiki',
        'search',
        'reading-time',
        'markdown-enhance',
        'markdown-power',
        'markdown-image',
        'markdown-math',
        'markdown-include',
        'watermark',
      ],
    },
  ],
})
zh/theme-guide.ts
import type { ThemeNote } from 'vuepress-theme-plume'
import { defineNoteConfig } from 'vuepress-theme-plume'

export const themeGuide: ThemeNote = defineNoteConfig({
  dir: 'theme/guide',
  link: '/guide/',
  sidebar: [
    {
      text: '从这里开始',
      collapsed: false,
      icon: 'carbon:idea',
      prefix: 'quick-start',
      items: [
        'intro',
        'usage',
        'project-structure',
        'write',
        'blog',
        'document',
        'locales',
        'deployment',
        'optimize-build',
      ],
    },
    {
      text: '写作',
      icon: 'fluent-mdl2:edit-create',
      collapsed: false,
      items: [
        {
          text: 'markdown',
          icon: 'material-symbols:markdown-outline',
          prefix: 'markdown',
          collapsed: true,
          items: [
            'basic',
            'extensions',
            'icons',
            'mark',
            'plot',
            'abbr',
            'annotation',
            'card',
            'steps',
            'file-tree',
            'code-tree',
            'field',
            'tabs',
            'timeline',
            'demo-wrapper',
            'flex',
            'collapse',
            'npm-to',
            'caniuse',
            'chat',
            'include',
          ],
        },
        {
          text: '代码块',
          prefix: 'code',
          icon: 'ph:code-bold',
          collapsed: true,
          items: [
            'intro',
            'features',
            'copy-code',
            'code-tabs',
            'import',
            'twoslash',
          ],
        },
        {
          text: '代码演示',
          prefix: 'repl',
          icon: 'carbon:demo',
          collapsed: true,
          items: [
            'frontend',
            'rust',
            'golang',
            'kotlin',
            'codepen',
            'jsFiddle',
            'codeSandbox',
            'replit',
            'frontend-deprecated',
          ],
        },
        {
          text: '图表',
          icon: 'mdi:chart-line',
          prefix: 'chart',
          collapsed: true,
          items: [
            'chart',
            'echarts',
            'mermaid',
            'flowchart',
            'markmap',
            'plantuml',
          ],
        },
        {
          text: '资源嵌入',
          icon: 'dashicons:embed-video',
          prefix: 'embed',
          collapsed: true,
          items: [
            'pdf',
            'bilibili',
            'youtube',
            'artplayer',
            'audioReader',
          ],
        },
      ],
    },
    {
      text: '功能',
      icon: 'lucide:box',
      collapsed: false,
      prefix: 'features',
      items: [
        'icon',
        'search',
        'comments',
        'bulletin',
        'encryption',
        'contributors',
        'changelog',
        'copyright',
        'watermark',
        'friend-links',
        'replace-assets',
        'seo',
        'sitemap',
      ],
    },
    {
      text: '组件',
      prefix: 'components',
      icon: 'uiw:component',
      collapsed: false,
      items: [
        'badge',
        'icon',
        'plot',
        'card',
        'link-card',
        'image-card',
        'card-grid',
        'card-masonry',
        'home-box',
        'repo-card',
        'npm-badge',
        'swiper',
      ],
    },
    {
      text: '自定义',
      icon: 'material-symbols:dashboard-customize-outline-rounded',
      collapsed: false,
      prefix: 'custom',
      items: [
        'home',
        'style',
        'slots',
        'component-overrides',
      ],
    },
    {
      text: 'API',
      icon: 'mdi:api',
      prefix: 'api',
      collapsed: false,
      items: [
        'client',
        'node',
      ],
    },
  ],
})
zh/tools.ts
import type { ThemeNote } from 'vuepress-theme-plume'
import { defineNoteConfig } from 'vuepress-theme-plume'

export const tools: ThemeNote = defineNoteConfig({
  dir: 'tools',
  link: '/tools/',
  sidebar: [
    {
      text: '工具',
      icon: 'tabler:tools',
      items: [
        'custom-theme',
        'home-hero-tint-plate',
        'caniuse',
      ],
    },
  ],
})
index.ts
export * from './en/index.js'
export * from './zh/index.js'