代码树 新
约 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 配置
en
index.ts
theme-config.ts
theme-guide.ts
zh
index.ts
plugins.ts
theme-config.ts
theme-guide.ts
tools.ts
index.ts
en/index.ts
import { defineNotesConfig } from 'vuepress-theme-plume'
import { themeConfig } from './theme-config'
import { themeGuide } from './theme-guide'
export const enNotes = defineNotesConfig({
dir: 'en/notes',
link: '/',
notes: [
themeGuide,
themeConfig,
],
})
en/theme-config.ts
import { defineNoteConfig } from 'vuepress-theme-plume'
export const themeConfig = 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 { defineNoteConfig } from 'vuepress-theme-plume'
export const themeGuide = 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 { 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 = defineNotesConfig({
dir: 'notes',
link: '/',
notes: [
themeGuide,
themeConfig,
// plugins,
tools,
],
})
zh/plugins.ts
import { defineNoteConfig } from 'vuepress-theme-plume'
export const plugins = 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 { defineNoteConfig } from 'vuepress-theme-plume'
export const themeConfig = 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 { defineNoteConfig } from 'vuepress-theme-plume'
export const themeGuide = 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',
'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 { defineNoteConfig } from 'vuepress-theme-plume'
export const tools = 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'