diff --git a/docs/.vuepress/navbar.ts b/docs/.vuepress/navbar.ts
index 028c3a5e..dc402ffc 100644
--- a/docs/.vuepress/navbar.ts
+++ b/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[]
+])
diff --git a/docs/notes/theme/config/notes配置.md b/docs/notes/theme/config/notes配置.md
index ddb5455d..a1f57036 100644
--- a/docs/notes/theme/config/notes配置.md
+++ b/docs/notes/theme/config/notes配置.md
@@ -152,3 +152,5 @@ title: 主题介绍
icon: mdi:tooltip-text-outline
---
```
+
+完整侧边栏使用说明,请查看 [此文档](../guide/知识笔记.md) 。
diff --git a/docs/notes/theme/config/plugins/README.md b/docs/notes/theme/config/plugins/README.md
index 45591f55..5022aa53 100644
--- a/docs/notes/theme/config/plugins/README.md
+++ b/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) 中添加它们。主题已在内部完成了这些工作。
:::
diff --git a/docs/notes/theme/config/plugins/markdownImage.md b/docs/notes/theme/config/plugins/markdownImage.md
index 5c5e8e57..ec4fb509 100644
--- a/docs/notes/theme/config/plugins/markdownImage.md
+++ b/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({
}),
})
```
+
+:::
diff --git a/docs/notes/theme/config/plugins/markdownMath.md b/docs/notes/theme/config/plugins/markdownMath.md
index 518bbcf2..a7aab1b3 100644
--- a/docs/notes/theme/config/plugins/markdownMath.md
+++ b/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({
}),
})
```
+
+:::
diff --git a/docs/notes/theme/config/plugins/markdownPower.md b/docs/notes/theme/config/plugins/markdownPower.md
index cecfee2d..c2b50745 100644
--- a/docs/notes/theme/config/plugins/markdownPower.md
+++ b/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
diff --git a/docs/notes/theme/config/plugins/markdown增强.md b/docs/notes/theme/config/plugins/markdown增强.md
index 425eceb2..1aa79359 100644
--- a/docs/notes/theme/config/plugins/markdown增强.md
+++ b/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)
diff --git a/docs/notes/theme/config/plugins/代码复制.md b/docs/notes/theme/config/plugins/代码复制.md
deleted file mode 100644
index dca66a04..00000000
--- a/docs/notes/theme/config/plugins/代码复制.md
+++ /dev/null
@@ -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,
- }
- }),
-})
-```
diff --git a/docs/notes/theme/config/plugins/代码高亮.md b/docs/notes/theme/config/plugins/代码高亮.md
index f12f75e0..3364df8a 100644
--- a/docs/notes/theme/config/plugins/代码高亮.md
+++ b/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 }`
diff --git a/docs/notes/theme/config/plugins/搜索.md b/docs/notes/theme/config/plugins/搜索.md
index e2da8505..2c19aa7e 100644
--- a/docs/notes/theme/config/plugins/搜索.md
+++ b/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
diff --git a/docs/notes/theme/config/plugins/水印.md b/docs/notes/theme/config/plugins/水印.md
index 83931748..09b36c2f 100644
--- a/docs/notes/theme/config/plugins/水印.md
+++ b/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
diff --git a/docs/notes/theme/config/plugins/百度统计.md b/docs/notes/theme/config/plugins/百度统计.md
deleted file mode 100644
index badcb06f..00000000
--- a/docs/notes/theme/config/plugins/百度统计.md
+++ /dev/null
@@ -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) 代替。
-:::
diff --git a/docs/notes/theme/config/plugins/阅读统计.md b/docs/notes/theme/config/plugins/阅读统计.md
index 51319270..6555eab3 100644
--- a/docs/notes/theme/config/plugins/阅读统计.md
+++ b/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
diff --git a/docs/notes/theme/config/侧边栏配置.md b/docs/notes/theme/config/侧边栏配置.md
index 813e718b..a5ba2ab3 100644
--- a/docs/notes/theme/config/侧边栏配置.md
+++ b/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) 。
diff --git a/docs/notes/theme/config/多语言配置.md b/docs/notes/theme/config/多语言配置.md
index d4ea24b7..8c8e35ec 100644
--- a/docs/notes/theme/config/多语言配置.md
+++ b/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
diff --git a/docs/notes/theme/config/导航栏配置.md b/docs/notes/theme/config/导航栏配置.md
index d8a27b3e..6dd59622 100644
--- a/docs/notes/theme/config/导航栏配置.md
+++ b/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` 用于控制当前链接元素何时被激活。其值为一个类正则表达式的字符串。
diff --git a/docs/notes/theme/guide/markdown/npm-to.md b/docs/notes/theme/guide/markdown/npm-to.md
index 6b70ddc8..4da5a878 100644
--- a/docs/notes/theme/guide/markdown/npm-to.md
+++ b/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` 。
## 命令行支持
diff --git a/docs/notes/theme/guide/markdown/文件树.md b/docs/notes/theme/guide/markdown/文件树.md
index 8211e6bc..92424cdd 100644
--- a/docs/notes/theme/guide/markdown/文件树.md
+++ b/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` 中的图标数据解析为本地图标资源,即使您在不同的页面
diff --git a/docs/notes/theme/guide/代码/twoslash.md b/docs/notes/theme/guide/代码/twoslash.md
index a55bb2e8..310e0d9c 100644
--- a/docs/notes/theme/guide/代码/twoslash.md
+++ b/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` 关键词即可:
diff --git a/docs/notes/theme/guide/代码/介绍.md b/docs/notes/theme/guide/代码/介绍.md
index 4a88331a..a6420635 100644
--- a/docs/notes/theme/guide/代码/介绍.md
+++ b/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({
})
```
+:::
+
---
diff --git a/docs/notes/theme/guide/代码/特性支持.md b/docs/notes/theme/guide/代码/特性支持.md
index ea7ab42a..fd17bcaa 100644
--- a/docs/notes/theme/guide/代码/特性支持.md
+++ b/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` 开始。
diff --git a/docs/notes/theme/guide/功能/公告板.md b/docs/notes/theme/guide/功能/公告板.md
index 0a93fdaf..70c54435 100644
--- a/docs/notes/theme/guide/功能/公告板.md
+++ b/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
diff --git a/docs/notes/theme/guide/功能/内容搜索.md b/docs/notes/theme/guide/功能/内容搜索.md
index 7b6b6c76..16f99e2d 100644
--- a/docs/notes/theme/guide/功能/内容搜索.md
+++ b/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({
})
})
```
+
+:::
diff --git a/docs/notes/theme/guide/功能/加密.md b/docs/notes/theme/guide/功能/加密.md
index 1a4b1ed8..1af12d73 100644
--- a/docs/notes/theme/guide/功能/加密.md
+++ b/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({
})
})
```
+
+:::
diff --git a/docs/notes/theme/guide/功能/文章变更历史.md b/docs/notes/theme/guide/功能/文章变更历史.md
index ecc352ac..f04f13a5 100644
--- a/docs/notes/theme/guide/功能/文章变更历史.md
+++ b/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/
---
diff --git a/docs/notes/theme/guide/功能/文章贡献者.md b/docs/notes/theme/guide/功能/文章贡献者.md
index bfeeb228..e4a2e334 100644
--- a/docs/notes/theme/guide/功能/文章贡献者.md
+++ b/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/
---
diff --git a/docs/notes/theme/guide/博客.md b/docs/notes/theme/guide/博客.md
index 518c18f7..10f1686c 100644
--- a/docs/notes/theme/guide/博客.md
+++ b/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({
})
})
```
+
+:::
diff --git a/docs/notes/theme/guide/国际化.md b/docs/notes/theme/guide/国际化.md
index d9ce90bf..e5eb709b 100644
--- a/docs/notes/theme/guide/国际化.md
+++ b/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-配置)
diff --git a/docs/notes/theme/guide/安装与使用.md b/docs/notes/theme/guide/安装与使用.md
index adf6f56d..caaae840 100644
--- a/docs/notes/theme/guide/安装与使用.md
+++ b/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'
diff --git a/docs/notes/theme/guide/布局插槽.md b/docs/notes/theme/guide/布局插槽.md
index bca61646..fbebd4b3 100644
--- a/docs/notes/theme/guide/布局插槽.md
+++ b/docs/notes/theme/guide/布局插槽.md
@@ -87,7 +87,7 @@ export default defineClientConfig({
})
```
-@tab ./components/CustomContent.vue
+@tab .vuepress/components/CustomContent.vue
```vue
diff --git a/docs/notes/theme/guide/知识笔记.md b/docs/notes/theme/guide/知识笔记.md
index 7d3142ac..2a9b88c3 100644
--- a/docs/notes/theme/guide/知识笔记.md
+++ b/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
diff --git a/docs/notes/theme/guide/编写文章.md b/docs/notes/theme/guide/编写文章.md
index 2a626407..d66a3712 100644
--- a/docs/notes/theme/guide/编写文章.md
+++ b/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 提示