docs: improve docs (#332)

docs/.vuepress/navbar.ts

@@ -1,28 +1,19 @@
-import type { NavItem } from 'vuepress-theme-plume'
+import { defineNavbarConfig } from 'vuepress-theme-plume'
 import { version } from '../../package.json'
 
-export const zhNavbar = [
+export const zhNavbar = defineNavbarConfig([
   {
     text: '指南',
     icon: 'icon-park-outline:guide-board',
-    // link: '/guide/intro/',
     link: '/notes/theme/guide/介绍.md',
     activeMatch: '^/guide/',
   },
   {
     text: '配置',
     icon: 'icon-park-outline:setting-two',
-    // link: '/config/intro/',
     link: '/notes/theme/config/配置说明.md',
     activeMatch: '^/config/',
   },
-  // {
-  //   text: '插件',
-  //   icon: 'clarity:plugin-line',
-  //   // link: '/plugins/',
-  //   link: '/notes/plugins/README.md',
-  //   activeMatch: '^/plugins/',
-  // },
   {
     text: '博客',
     link: '/blog/',
@@ -60,9 +51,9 @@ export const zhNavbar = [
       { text: '参与贡献', link: '/contributing/' },
     ],
   },
-] as NavItem[]
+])
 
-export const enNavbar = [
+export const enNavbar = defineNavbarConfig([
   {
     text: 'Guide',
     icon: 'icon-park-outline:guide-board',
@@ -102,4 +93,4 @@ export const enNavbar = [
       { text: 'Contributing', link: '/contributing/' },
     ],
   },
-] as NavItem[]
+])

docs/notes/theme/config/notes配置.md

@@ -152,3 +152,5 @@ title: 主题介绍
 icon: mdi:tooltip-text-outline
 ---
 ```
+
+完整侧边栏使用说明，请查看 [此文档](../guide/知识笔记.md) 。

docs/notes/theme/config/plugins/README.md

@@ -11,6 +11,9 @@ permalink: /config/plugins/
 
 所有主题内部使用的插件， 均在 `plugins` 字段中进行配置。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ``` js
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -24,6 +27,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 :::tip
 您无需重复安装这些内置插件，也无需在 [vuepress配置 > plugins](https://v2.vuepress.vuejs.org/zh/reference/config.html#plugins) 中添加它们。主题已在内部完成了这些工作。
 :::

docs/notes/theme/config/plugins/markdownImage.md

@@ -14,6 +14,9 @@ permalink: /config/plugins/markdown-image/
 
 插件默认不启用任何功能，你需要手动开启它们。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -38,3 +41,5 @@ export default defineUserConfig({
   }),
 })
 ```
+
+:::

docs/notes/theme/config/plugins/markdownMath.md

@@ -16,6 +16,9 @@ permalink: /config/plugins/markdown-math/
 
 插件默认启用 `katex`。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -30,3 +33,5 @@ export default defineUserConfig({
   }),
 })
 ```
+
+:::

docs/notes/theme/config/plugins/markdownPower.md

@@ -14,6 +14,9 @@ permalink: /config/plugins/markdown-power/
 
 默认配置：
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -44,6 +47,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ## 功能
 
 ### 嵌入 PDF

docs/notes/theme/config/plugins/markdown增强.md

@@ -13,6 +13,9 @@ permalink: /config/plugins/markdown-enhance/
 
 默认配置：
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -48,6 +51,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ## 配置
 
 详见 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/config.html)

docs/notes/theme/config/plugins/代码复制.md

@@ -1,69 +0,0 @@
----
-title: 代码复制
-author: pengzhanbo
-createTime: 2024/03/06 16:24:34
-permalink: /config/plugins/copy-code/
----
-
-## 概述
-
-主题内置的代码复制插件，在代码块中插入复制按钮。
-
-关联插件： [@vuepress-plume/plugin-copy-code](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-copy-code)
-
-默认配置：
-
-```ts{7-9}
-import { plumeTheme } from 'vuepress-theme-plume'
-import { defineUserConfig } from 'vuepress'
-
-export default defineUserConfig({
-  theme: plumeTheme({
-    plugins: {
-      copyCode: {
-        selector: '.page-content div[class*="language-"] pre',
-      },
-    }
-  }),
-})
-```
-
-## 配置
-
-### selector
-
-- 类型： `string`
-- 默认值： `'.page-content div[class*="language-"] pre'`
-
-用于指定复制按钮应用的代码块选择器。
-
-### duration
-
-- 类型： `number`
-- 默认值： `1500`
-
-用于置顶 提示消息显示时间。 设置为 `0` 将会禁用提示。
-
-### showInMobile
-
-- 类型： `boolean`
-- 默认值： `false`
-
-用于控制是否在移动端显示复制按钮。
-
-## 禁用
-
-你可以指定 `copyCode: false` 来禁用插件。
-
-```ts{7}
-import { plumeTheme } from 'vuepress-theme-plume'
-import { defineUserConfig } from 'vuepress'
-
-export default defineUserConfig({
-  theme: plumeTheme({
-    plugins: {
-      copyCode: false,
-    }
-  }),
-})
-```

docs/notes/theme/config/plugins/代码高亮.md

@@ -39,6 +39,9 @@ Shiki 支持多种编程语言。
 
 默认配置：
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -54,6 +57,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ### theme
 
 - 类型: `string | { light: string, dark: string }`

docs/notes/theme/config/plugins/搜索.md

@@ -17,6 +17,9 @@ permalink: /config/plugins/search/
 
 默认配置：
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -32,6 +35,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ### 配置
 
 ```ts

docs/notes/theme/config/plugins/水印.md

@@ -11,6 +11,43 @@ permalink: /config/watermark/
 
 关联插件：[@vuepress/plugin-watermark](https://ecosystem.vuejs.press/zh/plugins/features/watermark.html)
 
+## 使用
+
+::: code-tabs
+@tab .vuepress/config.ts
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+  theme: plumeTheme({
+    plugins: {
+      // watermark: true,
+      watermark: {
+        // enabled: false,  // boolean 类型控制是否全局启用
+        enabled: page => true, // function 类型 过滤哪些页面启用水印
+        delay: 500, // 添加水印的延时。以毫秒为单位。
+
+        /**
+         * 是否全屏水印，默认为 `true`，
+         * 设置为 `false` 时，水印仅在 内容区域中显示。
+         */
+        fullPage: true,
+
+        /** @see https://zhensherlock.github.io/watermark-js-plus/zh/config/ */
+        watermarkOptions: {
+          content: 'your watermark',
+          // ...
+        }
+      }
+    }
+  })
+})
+```
+
+:::
+
 ## 配置项
 
 ### enabled

docs/notes/theme/config/plugins/百度统计.md

@@ -1,12 +0,0 @@
----
-title: 百度统计
-author: pengzhanbo
-createTime: 2024/03/06 12:22:57
-permalink: /config/plugins/baidu-tongji/
----
-
-::: caution
-此插件已从主题内置插件中移除。
-
-如需使用相关功能，请使用 [@vuepress/plugin-baidu-analytics](https://ecosystem.vuejs.press/zh/plugins/analytics/baidu-analytics.html) 代替。
-:::

docs/notes/theme/config/plugins/阅读统计.md

@@ -12,6 +12,9 @@ permalink: /config/plugins/reading-time/
 
 默认配置：
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -27,6 +30,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ## 配置
 
 ### wordPerMinute

docs/notes/theme/config/侧边栏配置.md

@@ -22,6 +22,9 @@ permalink: /config/sidebar/
 
 你可以在 `notes` 目录下创建多个 `note` ，在每一个 `note` 中单独配置 `sidebar`:
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { defineNoteConfig, plumeTheme } from 'vuepress-theme-plume'
@@ -47,6 +50,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 主题提供了 `defineNoteConfig` 来帮助你配置 note , 你可以参考 [这里](./notes配置.md)来查看如何配置。
 
 ## 通用 Sidebar 配置
@@ -54,6 +59,9 @@ export default defineUserConfig({
 如果你不想使用 `notes` 的方式来管理系列文章，但又期望通过侧边栏来导航到不同的文章，
 可以通过 [sidebar](../config/主题配置.md#sidebar) 通用配置来实现。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -70,3 +78,7 @@ export default defineUserConfig({
   })
 })
 ```
+
+:::
+
+完整侧边栏使用说明，请查看 [此文档](../guide/知识笔记.md) 。

docs/notes/theme/config/多语言配置.md

@@ -72,6 +72,9 @@ export default defineUserConfig({
 
 与站点配置和 `@vuepress/theme-default` 的主题配置相同，`vuepress-theme-plume` 也支持你在主题选项中设置 locale 选项，并为每种语言设置不同的配置。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts :no-line-numbers
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -103,6 +106,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 **使用主题配置文件：**
 
 ::: code-tabs

docs/notes/theme/config/导航栏配置.md

@@ -122,6 +122,9 @@ type NavItem = string | {
 
 ### 嵌套配置示例
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -184,6 +187,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ### `activeMatch`
 
 `activeMatch` 用于控制当前链接元素何时被激活。其值为一个类正则表达式的字符串。

docs/notes/theme/guide/markdown/npm-to.md

@@ -87,6 +87,9 @@ npm install -D vuepress vuepress-theme-plume
 
 该功能默认不启用，您需要在 `theme` 配置中启用它。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 export default defineUserConfig({
   theme: plumeTheme({
@@ -102,6 +105,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 `npm-to` 支持将 `npm` 命令行转换为 `pnpm / yarn / deno / bun` 的命令行。可以根据需求进行配置 `tabs` 。
 
 ## 命令行支持

docs/notes/theme/guide/markdown/文件树.md

@@ -106,6 +106,9 @@ permalink: /guide/markdown/file-tree/
 
 你可以在 `plugins.mdPower.fileTree` 选项中配置 文件树的图标默认类型：
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 export default defineUserConfig({
   theme: plumeTheme({
@@ -120,6 +123,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ::: tip 担心彩色图标会影响构建包体积？
 您无需担心，文件树的彩色图标 也是从 `iconify` 解析获取，推荐您在本地安装 `@iconify/json` 项目，
 主题会自动将 `@iconify/json` 中的图标数据解析为本地图标资源，即使您在不同的页面

docs/notes/theme/guide/代码/twoslash.md

@@ -85,6 +85,9 @@ const c = 1
 
 在 主题配置中，启用 `twoslash` 选项。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 export default defineUserConfig({
   theme: plumeTheme({
@@ -95,6 +98,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ### 使用
 
 启用该功能后，你只需要在 原有的 markdown 代码块语法中，在代码语言声明后添加 `twoslash` 关键词即可：

docs/notes/theme/guide/代码/介绍.md

@@ -18,6 +18,9 @@ permalink: /guide/code/intro/
 
 示例：
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 export default defineUserConfig({
   theme: plumeTheme({
@@ -30,6 +33,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ---
 
 <Badge type="warning" text="v1.0.0-rc.105 更新" />

docs/notes/theme/guide/代码/特性支持.md

@@ -12,6 +12,9 @@ permalink: /guide/code/features/
 
 主题默认显示代码行号，它通过 `plugins.shiki.line-numbers` 来控制。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 export default defineUserConfig({
   theme: plumeTheme({
@@ -22,6 +25,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 你还可以通过 `:line-numbers` / `:no-line-numbers` 来控制当前代码块是否显示代码行号。
 还可以通过在 `:line-numbers` 之后添加 `=` 来自定义起始行号，例如 `:line-numbers=2` 表示代码块中的行号从 `2` 开始。
 

docs/notes/theme/guide/功能/公告板.md

@@ -20,6 +20,9 @@ permalink: /guide/features/bulletin/
 
 ### 配置说明
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -33,6 +36,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ```ts
 interface BulletinOptions {
   /**
@@ -112,6 +117,9 @@ interface BulletinOptions {
 
 当您仅需要配置 简单的公告板，仅包含一些简要的内容 时，可以直接使用 `bulletin.content` 添加内容。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 export default defineUserConfig({
   theme: plumeTheme({
@@ -124,8 +132,13 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 还可以声明 `bulletin.contentType` 为 `markdown` ，这可以在 `content` 中使用 markdown 语法。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 export default defineUserConfig({
   theme: plumeTheme({
@@ -144,6 +157,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ## 长内容公告
 
 当您需要配置 长内容的公告板时，将长内容写在配置文件中会显得比较臃肿和难以阅读，
@@ -151,6 +166,9 @@ export default defineUserConfig({
 
 `bulletin.contentFile` 需要传入一个 `markdown` 或 `html` 文件的绝对路径。主题将使用该文件内容作为公告内容。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 export default defineUserConfig({
   theme: plumeTheme({
@@ -163,8 +181,7 @@ export default defineUserConfig({
 })
 ```
 
-::: code-tabs
-@tab _bulletin.md
+@tab .vuepress/_bulletin.md
 
 ```md
 **更新说明**
@@ -186,6 +203,9 @@ export default defineUserConfig({
 
 首先，配置 `bulletin` 的基础内容，此时您无需再配置 `bulletin.content` 或 `bulletin.contentFile` 。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 export default defineUserConfig({
   theme: plumeTheme({
@@ -197,6 +217,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 然后，在 `.vuepress/client.ts` 中注册全局组件 `BulletinContent` ，主题将会自动检索该插件并作为公告板的内容。
 
 ::: code-tabs

docs/notes/theme/guide/功能/内容搜索.md

@@ -24,6 +24,9 @@ permalink: /guide/features/content-search/
 
 主题默认 启用 本地内容搜索 功能。您也可以对其进行自定义配置。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -39,6 +42,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 该插件会根据你的页面，在本地生成搜索索引，然后在用户访问站点时加载搜索索引文件。
 换句话说，这是一个轻量级的内置搜索能力，不会进行任何外部请求。
 
@@ -51,6 +56,9 @@ export default defineUserConfig({
 
 ### 启用
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -66,6 +74,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ### 获取搜索索引
 
 你需要 [提交你的网站 URL](https://docsearch.algolia.com/apply/) 来加入 DocSearch 项目。
@@ -220,6 +230,9 @@ new Crawler({
 
 以下是本主题使用的配置：
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -236,3 +249,5 @@ export default defineUserConfig({
   })
 })
 ```
+
+:::

docs/notes/theme/guide/功能/加密.md

@@ -24,6 +24,9 @@ permalink: /guide/features/encryption/
 
 在 主题配置中，添加 `encrypt` 选项。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -37,12 +40,17 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ## 全站加密
 
 有些情况下，你可能 需要对 全站进行加密。
 因此，你可以通过 `encrypt.global` 选项配置全站加密。
 然后，通过配置 `encrypt.admin` 选项，设置一个或多个密码。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 export default defineUserConfig({
   theme: plumeTheme({
@@ -54,11 +62,16 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ## 部分加密
 
 大多数情况下，你可能只需需要 加密 某一篇文章、某一个目录 等。
 因此，你可以通过 `encrypt.rules` 选项配置部分加密。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 export default defineUserConfig({
   theme: plumeTheme({
@@ -80,6 +93,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 `encrypt.rules` 的 **键** 将作为 匹配规则，**值** 将作为 该规则对应的密码，可以设置 一个或多个密码。
 
 :::tip 说明
@@ -128,6 +143,9 @@ export default defineUserConfig({
 
 ### 示例
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -145,3 +163,5 @@ export default defineUserConfig({
   })
 })
 ```
+
+:::

docs/notes/theme/guide/功能/文章变更历史.md

@@ -1,6 +1,9 @@
 ---
 title: 文章变更历史
 icon: radix-icons:activity-log
+badge:
+  type: tip
+  text: v1.0.0-rc.115 +
 createTime: 2024/11/07 18:16:25
 permalink: /guide/features/changelog/
 ---

docs/notes/theme/guide/功能/文章贡献者.md

@@ -1,6 +1,9 @@
 ---
 title: 文章贡献者
 icon: simple-icons:contributorcovenant
+badge:
+  type: tip
+  text: v1.0.0-rc.115 +
 createTime: 2024/11/07 16:26:54
 permalink: /guide/features/contributors/
 ---

docs/notes/theme/guide/博客.md

@@ -292,6 +292,9 @@ cover: # [!code ++:5]
 虽然主题支持为每个文章的封面图使用不同的配置，出于整体布局风格的考虑，以及简化配置的目的，
 主题还支持为封面图预设配置：
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 export default defineUserConfig({
   theme: plumeTheme({
@@ -310,6 +313,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ```ts
 type BlogPostCoverLayout = 'left' | 'right' | 'odd-left' | 'odd-right' | 'top'
 
@@ -474,6 +479,9 @@ config:
 
 （还可以在重新修改 分类页/标签页/归档页的链接地址）
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -489,3 +497,5 @@ export default defineUserConfig({
   })
 })
 ```
+
+:::

docs/notes/theme/guide/国际化.md

@@ -39,7 +39,10 @@ tags:
 
 ## vuepress 配置
 
-接下来，在 `.vuepress/config.js` 中配置：
+接下来，在 `.vuepress/config.ts` 中配置：
+
+::: code-tabs
+@tab .vuepress/config.ts
 
 ```js
 import { defineUserConfig } from 'vuepress'
@@ -57,6 +60,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 `locales` 中的 `key` 对应着 `docs` 目录下的语言路径，同时，`key` 也将作为 不同语言的页面访问链接的前缀。
 
 ## 主题配置
@@ -65,6 +70,9 @@ export default defineUserConfig({
 
 `locales` 支持 所有主题配置项。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```js
 import { plumeTheme } from '@vuepress-plume/vuepress-theme-plume'
 import { defineUserConfig } from 'vuepress'
@@ -106,4 +114,6 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 更多 `locales` 配置请查看 [主题配置 > Locales 配置](../config/主题配置.md#locale-配置)

docs/notes/theme/guide/安装与使用.md

@@ -167,7 +167,7 @@ cd open-source # 进入 D: 分区下的 open-source 目录
 - ### 在 `docs/.vuepress/config.{js,ts}` 中配置主题
 
   ::: code-tabs
-  @tab docs/.vuepress/config.js
+  @tab docs/.vuepress/config.ts
 
   ``` ts :no-line-numbers
   import { viteBundler } from '@vuepress/bundler-vite'

docs/notes/theme/guide/布局插槽.md

@@ -87,7 +87,7 @@ export default defineClientConfig({
 })
 ```
 
-@tab ./components/CustomContent.vue
+@tab .vuepress/components/CustomContent.vue
 
 ```vue
 <template>

docs/notes/theme/guide/知识笔记.md

@@ -39,7 +39,10 @@ tags:
 
 接下来，在配置文件中配置 `notes`：
 
-```js :collapsed-lines=20
+::: code-tabs
+@tab .vuepress/config.ts
+
+```js
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
@@ -74,6 +77,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ::: tip
 
 你应该在创建文件之前，建议先把笔记的目录和链接前缀等配置好。
@@ -136,6 +141,94 @@ export default defineUserConfig({
 
 :::
 
+:::: details 笔记比较多时怎么配置？
+如果您拥有比较多的笔记，全部放到一个 `notes.ts` 中配置，可能会显得文件比较大且不好维护。
+您可以对文件进行拆分，以 `.vuepress/notes/` 目录作为 笔记配置的目录。
+::: file-tree
+
+- docs
+  - .vuepress
+    - notes
+      - typescript.ts
+      - rust.ts
+      - index.ts
+      - …
+  - notes
+    - typescript/
+    - rust/
+:::
+
+代码如下所示：
+
+::: code-tabs
+@tab .vuepress/config.ts
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+import notes from './notes/index.js' // [!code ++]
+
+export default defineUserConfig({
+  theme: plumeTheme({
+    notes // [!code ++]
+  }),
+})
+```
+
+@tab .vuepress/notes/index.ts
+
+```ts
+import { defineNotesConfig } from 'vuepress-theme-plume'
+import rust from './rust' // [!code ++]
+import typescript from './typescript' // [!code ++]
+
+export default defineNotesConfig({
+  // 声明所有笔记的目录，(默认配置，通常您不需要声明它)
+  dir: '/notes/',
+  link: '/',
+  // 在这里添加 note 配置
+  notes: [ // [!code ++:4]
+    typescript,
+    rust,
+  ]
+})
+```
+
+@tab .vuepress/notes/typescript.ts
+
+```ts
+import { defineNoteConfig } from 'vuepress-theme-plume'
+
+export default defineNoteConfig({
+  dir: 'typescript',
+  link: '/typescript/',
+  sidebar: [
+    '/guide/intro.md',
+    '/guide/getting-start.md',
+    '/config/config-file.md',
+  ]
+})
+```
+
+@tab .vuepress/notes/rust.ts
+
+```ts
+import { defineNoteConfig } from 'vuepress-theme-plume'
+
+export default defineNoteConfig({
+  dir: 'rust',
+  link: '/rust/',
+  sidebar: [
+    '/guide/intro.md',
+    '/guide/getting-start.md',
+    '/config/config-file.md',
+  ]
+})
+```
+
+:::
+::::
+
 ### 侧边栏配置
 
 以 `typescript` 目录为例，它拥有如下的文件结构：
@@ -227,10 +320,13 @@ interface SidebarItem {
 
 当 传入类型为 `string` 时，表示 markdown 文件的路径：
 
+::: code-tabs
+@tab .vuepress/notes.ts
+
 ```ts
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
-export default defineNoteConfig({
+const typescript = defineNoteConfig({
   dir: 'typescript',
   link: '/typescript/',
   sidebar: [
@@ -240,17 +336,24 @@ export default defineNoteConfig({
     // ...
   ]
 })
+
+// ... other code
 ```
 
+:::
+
 你也可以省略 `.md` 文件后缀，简写为 `/guide/intro` 。主题会解析 对应的文件，获取 **标题** 和 **页面链接地址**
 并将其转换为 `{ text: string, link: string }` 的数据形式。
 
 当传入类型为 `SidebarItem` 时:
 
+::: code-tabs
+@tab .vuepress/notes.ts
+
 ```ts
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
-export default defineNoteConfig({
+const typescript = defineNoteConfig({
   dir: 'typescript',
   link: '/typescript/',
   sidebar: [
@@ -259,14 +362,21 @@ export default defineNoteConfig({
   // ...
   ]
 })
+
+// ... other code
 ```
 
+:::
+
 也可以进行多层嵌套：
 
+::: code-tabs
+@tab .vuepress/notes.ts
+
 ```ts
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
-export default defineNoteConfig({
+const typescript = defineNoteConfig({
   dir: 'typescript',
   link: '/typescript/',
   sidebar: [
@@ -286,8 +396,12 @@ export default defineNoteConfig({
     },
   ]
 })
+
+// ... other code
 ```
 
+:::
+
 ### 关于 `prefix`
 
 `prefix` 的目的是为了简写与其同层级的 `items` 项内的 链接，它允许你将这些链接的相同的前缀提取到
@@ -295,10 +409,14 @@ export default defineNoteConfig({
 
 需要注意的是，`items` 中的链接 仅有 相对路径的链接才会与 `prefix` 拼接，而绝对路径则不进行处理。
 
+::: code-tabs
+
+@tab .vuepress/notes.ts
+
 ```ts
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
-export default defineNoteConfig({
+const typescript = defineNoteConfig({
   dir: 'typescript',
   link: '/typescript/',
   sidebar: [
@@ -321,14 +439,19 @@ export default defineNoteConfig({
 })
 ```
 
+:::
+
 同时，`items` 内还支持 深层嵌套，内部还依然支持 `prefix`，这里也遵循相同的规则，`prefix` 如果是相对路径，
 则会与 上一层的 `prefix` 拼接，再与 当前层级 `items` 内的 `link` 拼接，如果 `prefix` 是绝对路径，则不与
 上一层级 `prefix` 拼接。
 
+::: code-tabs
+@tab .vuepress/notes.ts
+
 ```ts
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
-export default defineNoteConfig({
+const typescript = defineNoteConfig({
   dir: 'typescript',
   link: '/typescript/',
   sidebar: [
@@ -356,6 +479,8 @@ export default defineNoteConfig({
 })
 ```
 
+:::
+
 **是否是绝对路径的判断标准是，如果以 `/` 开头，则为绝对路径，否则为相对路径**
 
 :::warning
@@ -367,10 +492,13 @@ export default defineNoteConfig({
 为侧边栏添加 图标 有助于 侧边栏更好的呈现。得益于 [iconify](https://iconify.design/) 这个强大的开源图标库，
 你可以使用超过 `200k` 的图标，仅需要添加 `icon` 配置即可。
 
+::: code-tabs
+@tab .vuepress/notes.ts
+
 ```ts
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
-export default defineNoteConfig({
+const typescript = defineNoteConfig({
   dir: 'typescript',
   link: '/typescript/',
   sidebar: [
@@ -386,12 +514,17 @@ export default defineNoteConfig({
 })
 ```
 
+:::
+
 也可以使用本地图标，或者本地图片：
 
+::: code-tabs
+@tab .vuepress/notes.ts
+
 ```ts
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
-export default defineNoteConfig({
+const typescript = defineNoteConfig({
   dir: 'typescript',
   link: '/typescript/',
   sidebar: [
@@ -409,6 +542,8 @@ export default defineNoteConfig({
 })
 ```
 
+:::
+
 **请注意，使用本地图片必须以 `/` 开头，表示为 静态资源路径，它将从 `.vuepress/public/` 目录中加载。**
 
 ::: file-tree

docs/notes/theme/guide/编写文章.md

@@ -91,6 +91,9 @@ __永久链接__ 指的是，文章发布后的 访问地址，这个地址一
 你可能不想主题做额外的自动生成，希望由自己完全掌控。这完全没问题，主题支持通过配置来控制 自动生成 frontmatter 的行为。
 通过 [主题配置 > autoFrontmatter](../config/主题配置.md#autofrontmatter) 即可轻松做到。
 
+::: code-tabs
+@tab .vuepress/config.ts
+
 ```ts
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -110,6 +113,8 @@ export default defineUserConfig({
 })
 ```
 
+:::
+
 ## 约定
 
 ::: info 提示