yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

refactor(theme): improve types and flat config (#524)

Browse Source 
* refactor(theme): improve types
This commit is contained in:
pengzhanbo 2025-03-16 02:29:30 +08:00 committed by GitHub
parent 3061c1085c
commit 0fd6cac574
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
294 changed files with 5216 additions and 4742 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
cli/package.json
View File

@ -30,12 +30,12 @@
"build": "tsup"
},
"dependencies": {
"@clack/prompts": "^0.10.0",
"@pengzhanbo/utils": "^1.2.0",
"cac": "^6.7.14",
"execa": "^9.5.2",
"handlebars": "^4.7.8",
"picocolors": "^1.1.1"
"@clack/prompts": "catalog:prod",
"@pengzhanbo/utils": "catalog:prod",
"cac": "catalog:prod",
"execa": "catalog:prod",
"handlebars": "catalog:prod",
"picocolors": "catalog:prod"
},
"plume-deps": {
"vuepress": "2.0.0-rc.20",

197
cli/templates/.vuepress/config.ts.handlebars
View File

@ -76,123 +76,98 @@ export default defineUserConfig({
// title: true, // 是否生成标题
// },
plugins: {
/**
* Shiki 代码高亮
* @see https://theme-plume.vuejs.press/config/plugins/code-highlight/
*/
// shiki: {
// // 强烈建议预设代码块高亮语言，插件默认加载所有语言会产生不必要的时间开销
// languages: ['shell', 'bash', 'typescript', 'javascript'],
// twoslash: true, // 启用 twoslash
// whitespace: true, // 启用 空格/Tab 高亮
// lineNumbers: true, // 启用行号
// },
/* 本地搜索, 默认启用 */
search: { provider: 'local' },
/* 本地搜索, 默认启用 */
// search: true,
/**
* Algolia DocSearch
* 启用此搜索需要将 本地搜索 search 设置为 false
* @see https://theme-plume.vuejs.press/config/plugins/search/#algolia-docsearch
*/
// search: {
// provider: 'algolia',
// appId: '',
// apiKey: '',
// indexName: '',
// },
/**
* Algolia DocSearch
* 启用此搜索需要将 本地搜索 search 设置为 false
* @see https://theme-plume.vuejs.press/config/plugins/search/#algolia-docsearch
*/
// docsearch: {
// appId: '',
// apiKey: '',
// indexName: '',
// },
/**
* Shiki 代码高亮
* @see https://theme-plume.vuejs.press/config/plugins/code-highlight/
*/
// codeHighlighter: {
// twoslash: true, // 启用 twoslash
// whitespace: true, // 启用 空格/Tab 高亮
// lineNumbers: true, // 启用行号
// },
/* 文章字数统计、阅读时间，设置为 false 则禁用 */
// readingTime: true,
/* 文章字数统计、阅读时间，设置为 false 则禁用 */
// readingTime: true,
/**
* markdown enhance
* @see https://theme-plume.vuejs.press/config/plugins/markdown-enhance/
*/
// markdownEnhance: {
// chartjs: true,
// echarts: true,
// mermaid: true,
// flowchart: true,
// },
/**
* markdown
* @see https://theme-plume.vuejs.press/config/markdown/
*/
// markdown: {
// abbr: true, // 启用 abbr 语法 *[label]: content
// annotation: true, // 启用 annotation 语法 [+label]: content
// pdf: true, // 启用 PDF 嵌入 @[pdf](/xxx.pdf)
// caniuse: true, // 启用 caniuse 语法 @[caniuse](feature_name)
// plot: true, // 启用隐秘文本语法 !!xxxx!!
// bilibili: true, // 启用嵌入 bilibili视频 语法 @[bilibili](bid)
// youtube: true, // 启用嵌入 youtube视频 语法 @[youtube](video_id)
// artPlayer: true, // 启用嵌入 artPlayer 本地视频 语法 @[artPlayer](url)
// audioReader: true, // 启用嵌入音频朗读功能 语法 @[audioReader](url)
// icons: true, // 启用内置图标语法 :[icon-name]:
// codepen: true, // 启用嵌入 codepen 语法 @[codepen](user/slash)
// replit: true, // 启用嵌入 replit 语法 @[replit](user/repl-name)
// codeSandbox: true, // 启用嵌入 codeSandbox 语法 @[codeSandbox](id)
// jsfiddle: true, // 启用嵌入 jsfiddle 语法 @[jsfiddle](user/id)
// npmTo: true, // 启用 npm-to 容器 ::: npm-to
// demo: true, // 启用 demo 容器 ::: demo
// repl: { // 启用 代码演示容器
// go: true, // ::: go-repl
// rust: true, // ::: rust-repl
// kotlin: true, // ::: kotlin-repl
// },
// math: { // 启用数学公式
// type: 'katex',
// },
// chartjs: true, // 启用 chart.js
// echarts: true, // 启用 ECharts
// mermaid: true, // 启用 mermaid
// flowchart: true, // 启用 flowchart
// image: {
// figure: true, // 启用 figure
// lazyload: true, // 启用图片懒加载
// mark: true, // 启用图片标记
// size: true, // 启用图片大小
// },
// include: true, // 在 Markdown 文件中导入其他 markdown 文件内容
// imageSize: 'local', // 启用 自动填充 图片宽高属性，避免页面抖动
// },
/**
* markdown power
* @see https://theme-plume.vuejs.press/config/plugin/markdown-power/
*/
// markdownPower: {
// abbr: true, // 启用 abbr 语法 *[label]: content
// annotation: true, // 启用 annotation 语法 [+label]: content
// pdf: true, // 启用 PDF 嵌入 @[pdf](/xxx.pdf)
// caniuse: true, // 启用 caniuse 语法 @[caniuse](feature_name)
// plot: true, // 启用隐秘文本语法 !!xxxx!!
// bilibili: true, // 启用嵌入 bilibili视频 语法 @[bilibili](bid)
// youtube: true, // 启用嵌入 youtube视频 语法 @[youtube](video_id)
// artPlayer: true, // 启用嵌入 artPlayer 本地视频 语法 @[artPlayer](url)
// audioReader: true, // 启用嵌入音频朗读功能 语法 @[audioReader](url)
// icons: true, // 启用内置图标语法 :[icon-name]:
// codepen: true, // 启用嵌入 codepen 语法 @[codepen](user/slash)
// replit: true, // 启用嵌入 replit 语法 @[replit](user/repl-name)
// codeSandbox: true, // 启用嵌入 codeSandbox 语法 @[codeSandbox](id)
// jsfiddle: true, // 启用嵌入 jsfiddle 语法 @[jsfiddle](user/id)
// npmTo: true, // 启用 npm-to 容器 ::: npm-to
// demo: true, // 启用 demo 容器 ::: demo
// repl: { // 启用 代码演示容器
// go: true, // ::: go-repl
// rust: true, // ::: rust-repl
// kotlin: true, // ::: kotlin-repl
// },
// imageSize: 'local', // 启用 自动填充 图片宽高属性，避免页面抖动
// },
/**
* 水印
* @see https://theme-plume.vuejs.press/guide/features/watermark/
*/
// watermark: true,
/**
* 为 Markdown 图像添加附加功能。
* @see https://theme-plume.vuejs.press/config/plugins/markdown-image/
*/
// markdownImage: {
// figure: true, // 启用 figure
// lazyload: true, // 启用图片懒加载
// mark: true, // 启用图片标记
// size: true, // 启用图片大小
// },
/**
* 在 Markdown 文件中导入其他 markdown 文件内容。
* @see https://theme-plume.vuejs.press/guide/markdown/include/
*/
// markdownInclude: true,
/**
* Markdown 数学公式
* @see https://theme-plume.vuejs.press/config/plugins/markdown-math/
*/
// markdownMath: {
// type: 'katex',
// },
/**
* 水印
* @see https://theme-plume.vuejs.press/guide/features/watermark/
*/
// watermark: true,
/**
* 评论 comments
* @see https://theme-plume.vuejs.press/guide/features/comments/
*/
// comment: {
// provider: '', // "Artalk" | "Giscus" | "Twikoo" | "Waline"
// comment: true,
// repo: '',
// repoId: '',
// category: '',
// categoryId: '',
// mapping: 'pathname',
// reactionsEnabled: true,
// inputPosition: 'top',
// },
},
/**
* 评论 comments
* @see https://theme-plume.vuejs.press/guide/features/comments/
*/
// comment: {
// provider: '', // "Artalk" | "Giscus" | "Twikoo" | "Waline"
// comment: true,
// repo: '',
// repoId: '',
// category: '',
// categoryId: '',
// mapping: 'pathname',
// reactionsEnabled: true,
// inputPosition: 'top',
// },
/**
* 加密功能

6
docs/.vuepress/client.ts
View File

@ -1,17 +1,11 @@
import { defineClientConfig } from 'vuepress/client'
import CanIUseConfig from './themes/components/CanIUseConfig.vue'
import Contributors from './themes/components/Contributors.vue'
import Demos from './themes/components/Demos.vue'
import HeroTintPlateConfig from './themes/components/HeroTintPlateConfig.vue'
import ThemeColors from './themes/components/ThemeColors.vue'
import { setupThemeColors } from './themes/composables/theme-colors.js'
export default defineClientConfig({
enhance({ app }) {
app.component('HeroTintPlateConfig', HeroTintPlateConfig)
app.component('CanIUseConfig', CanIUseConfig)
app.component('Demos', Demos)
app.component('ThemeColors', ThemeColors)
app.component('Contributors', Contributors)
},
setup() {

3
docs/.vuepress/config.ts
View File

@ -7,13 +7,14 @@ import { defineUserConfig } from 'vuepress'
import { theme } from './theme.js'
const pnpmWorkspace = fs.readFileSync(path.resolve(__dirname, '../../pnpm-workspace.yaml'), 'utf-8')
const vuepress = pnpmWorkspace.match(/vuepress:\s(.*)/)?.[1] || ''
const vuepress = pnpmWorkspace.match(/vuepress:\s(2.+)/)?.[1] || ''
export default defineUserConfig({
base: '/',
lang: 'zh-CN',
source: path.resolve(__dirname, '../'),
public: path.resolve(__dirname, 'public'),
locales: {
'/': { title: 'Plume 主题', lang: 'zh-CN' },
'/en/': { title: 'Plume Theme', lang: 'en-US' },

4
docs/.vuepress/navbar.ts
View File

@ -5,13 +5,13 @@ export const zhNavbar = defineNavbarConfig([
{
text: '指南',
icon: 'icon-park-outline:guide-board',
link: '/notes/theme/guide/介绍.md',
link: '/notes/theme/guide/quick-start/intro.md',
activeMatch: '^/guide/',
},
{
text: '配置',
icon: 'icon-park-outline:setting-two',
link: '/notes/theme/config/配置说明.md',
link: '/notes/theme/config/intro.md',
activeMatch: '^/config/',
},
{

33
docs/.vuepress/notes/zh/theme-config.ts
View File

@ -8,16 +8,17 @@ export const themeConfig = defineNoteConfig({
text: '配置',
collapsed: false,
items: [
'配置说明',
'主题配置',
'多语言配置',
'导航栏配置',
'notes配置',
'侧边栏配置',
'intro',
'theme',
'locales',
'navbar',
'notes',
'sidebar',
'markdown',
],
},
{
text: 'frontmatter',
text: '页面配置',
prefix: 'frontmatter',
collapsed: false,
items: [
@ -33,15 +34,15 @@ export const themeConfig = defineNoteConfig({
collapsed: false,
items: [
'',
'代码高亮',
'搜索',
'阅读统计',
'markdown增强',
'markdownPower',
'markdownImage',
'markdownMath',
'markdownInclude',
'水印',
'shiki',
'search',
'reading-time',
'markdown-enhance',
'markdown-power',
'markdown-image',
'markdown-math',
'markdown-include',
'watermark',
],
},
],

129
docs/.vuepress/notes/zh/theme-guide.ts
View File

@ -8,16 +8,17 @@ export const themeGuide = defineNoteConfig({
text: '从这里开始',
collapsed: false,
icon: 'carbon:idea',
prefix: 'quick-start',
items: [
'介绍',
'安装与使用',
'项目结构',
'编写文章',
'博客',
'知识笔记',
'国际化',
'部署',
'构建优化',
'intro',
'usage',
'project-structure',
'write',
'blog',
'document',
'locales',
'deployment',
'optimize-build',
],
},
{
@ -31,43 +32,43 @@ export const themeGuide = defineNoteConfig({
prefix: 'markdown',
collapsed: true,
items: [
'基础',
'扩展',
'图标',
'马克笔',
'隐秘文本',
'缩写词',
'内容注释',
'卡片',
'步骤',
'文件树',
'选项组',
'示例容器',
'basic',
'extensions',
'icons',
'mark',
'plot',
'abbr',
'annotation',
'card',
'steps',
'file-tree',
'tabs',
'demo-wrapper',
'npm-to',
'caniuse',
'导入文件',
'include',
],
},
{
text: '代码块',
prefix: '代码',
prefix: 'code',
icon: 'ph:code-bold',
collapsed: true,
items: [
'介绍',
'特性支持',
'代码组',
'导入代码',
'intro',
'features',
'code-tabs',
'import',
'twoslash',
],
},
{
text: '代码演示',
prefix: '代码演示',
prefix: 'repl',
icon: 'carbon:demo',
collapsed: true,
items: [
'前端演示',
'frontend',
'rust',
'golang',
'kotlin',
@ -75,13 +76,13 @@ export const themeGuide = defineNoteConfig({
'jsFiddle',
'codeSandbox',
'replit',
{ link: '前端', text: '前端（弃用）' },
{ link: 'frontend-deprecated', text: '前端（弃用）' },
],
},
{
text: '图表',
icon: 'mdi:chart-line',
prefix: '图表',
prefix: 'chart',
collapsed: true,
items: [
'chart',
@ -95,7 +96,7 @@ export const themeGuide = defineNoteConfig({
{
text: '资源嵌入',
icon: 'dashicons:embed-video',
prefix: '嵌入',
prefix: 'embed',
collapsed: true,
items: [
'pdf',
@ -111,61 +112,63 @@ export const themeGuide = defineNoteConfig({
text: '功能',
icon: 'lucide:box',
collapsed: false,
prefix: '功能',
prefix: 'features',
items: [
'图标',
'代码复制',
'内容搜索',
'评论',
'公告板',
'加密',
'文章贡献者',
'文章变更历史',
'文章版权所有',
'文章水印',
'友情链接页',
'icon',
'copy-code',
'search',
'comments',
'bulletin',
'encryption',
'contributors',
'changelog',
'copyright',
'watermark',
'friend-links',
'seo',
'sitemap',
],
},
{
text: '组件',
prefix: '组件',
prefix: 'components',
icon: 'uiw:component',
collapsed: false,
items: [
'徽章',
'图标',
'隐秘文本',
'卡片',
'链接卡片',
'图片卡片',
'卡片容器',
'瀑布流容器',
'首页布局容器',
'repoCard',
'npmBadge',
'轮播图',
'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: [
'api-客户端',
'api-node',
'client',
'node',
],
},
],

118
docs/.vuepress/theme.ts
View File

@ -4,70 +4,70 @@ import { plumeTheme } from 'vuepress-theme-plume'
export const theme: Theme = plumeTheme({
hostname: process.env.SITE_HOST || 'https://theme-plume.vuejs.press',
docsRepo: 'https://github.com/pengzhanbo/vuepress-theme-plume',
docsDir: 'docs',
changelog: { maxCount: 10 },
contributors: { mode: 'block' },
plugins: {
shiki: {
twoslash: true,
lineNumbers: 10,
},
markdownEnhance: {
demo: true,
chartjs: true,
echarts: true,
markmap: true,
plantuml: true,
mermaid: true,
flowchart: true,
},
markdownPower: {
annotation: true,
abbr: true,
imageSize: 'all',
pdf: true,
caniuse: true,
bilibili: true,
youtube: true,
artPlayer: true,
audioReader: true,
codepen: true,
replit: true,
codeSandbox: true,
jsfiddle: true,
demo: true,
npmTo: ['pnpm', 'yarn', 'npm'],
repl: {
go: true,
rust: true,
kotlin: true,
},
},
comment: {
provider: 'Giscus',
comment: true,
repo: 'pengzhanbo/vuepress-theme-plume',
repoId: 'R_kgDOG_ebNA',
category: 'docs-comment',
categoryId: 'DIC_kwDOG_ebNM4Cd0uF',
mapping: 'pathname',
reactionsEnabled: true,
inputPosition: 'top',
darkTheme: 'dark_protanopia',
lightTheme: 'light_protanopia',
},
watermark: {
enabled: false,
watermarkOptions: {
content: 'vuepress-theme-plume',
},
},
search: { provider: 'local' },
codeHighlighter: {
twoslash: true,
lineNumbers: 10,
},
markdown: {
oldDemo: true,
chartjs: true,
echarts: true,
markmap: true,
plantuml: true,
mermaid: true,
flowchart: true,
annotation: true,
abbr: true,
imageSize: 'all',
pdf: true,
caniuse: true,
bilibili: true,
youtube: true,
artPlayer: true,
audioReader: true,
codepen: true,
replit: true,
codeSandbox: true,
jsfiddle: true,
demo: true,
npmTo: ['pnpm', 'yarn', 'npm'],
repl: {
go: true,
rust: true,
kotlin: true,
},
},
comment: {
provider: 'Giscus',
comment: true,
repo: 'pengzhanbo/vuepress-theme-plume',
repoId: 'R_kgDOG_ebNA',
category: 'docs-comment',
categoryId: 'DIC_kwDOG_ebNM4Cd0uF',
mapping: 'pathname',
reactionsEnabled: true,
inputPosition: 'top',
darkTheme: 'dark_protanopia',
lightTheme: 'light_protanopia',
},
watermark: {
enabled: false,
watermarkOptions: {
content: 'vuepress-theme-plume',
},
},
plugins: { git: true },
})

10
docs/.vuepress/themes/components/CanIUseConfig.vue
View File

@ -80,7 +80,7 @@ const { output, rendered } = useCaniuse({ feature, embedType, past, future })
border: solid 1px var(--vp-c-divider);
border-radius: 5px;
transition: var(--vp-t-color);
transition-property: background border;
transition-property: border;
}
@media(min-width: 768px) {
@ -103,7 +103,7 @@ const { output, rendered } = useCaniuse({ feature, embedType, past, future })
.feature-input {
position: relative;
flex: 1;
flex: 1 2;
margin-left: 10px;
}
@ -121,7 +121,7 @@ const { output, rendered } = useCaniuse({ feature, embedType, past, future })
background-color: var(--vp-c-bg);
border: solid 1px var(--vp-c-divider);
transition: var(--vp-t-color);
transition-property: border background;
transition-property: border;
}
.feature-input__input:focus {
@ -166,7 +166,7 @@ const { output, rendered } = useCaniuse({ feature, embedType, past, future })
}
.caniuse-browser-version {
flex: 1;
flex: 1 2;
margin-left: 10px;
}
@ -175,7 +175,7 @@ const { output, rendered } = useCaniuse({ feature, embedType, past, future })
}
.caniuse-browser-version select {
flex: 1;
flex: 1 2;
width: 100%;
padding: 3px 16px;
background-color: var(--vp-c-bg);

8
docs/.vuepress/themes/components/Demos.vue
View File

@ -59,7 +59,7 @@ defineProps<{
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: var(--vp-t-color);
transition-property: border background box-shadow;
transition-property: border;
}
.demo-item:hover {
@ -79,10 +79,10 @@ defineProps<{
left: 0;
width: 100%;
height: 100%;
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
transform: scale(1);
object-fit: cover;
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
transform: scale(1);
}
.demo-item:hover .demo-img img {
@ -112,7 +112,7 @@ defineProps<{
}
.demo-title .title {
flex: 1;
flex: 1 2;
width: auto;
overflow: hidden;
text-overflow: ellipsis;

2
docs/.vuepress/themes/components/HeroTintPlateConfig.vue
View File

@ -133,7 +133,7 @@ const output = computed(() => {
}
.mode-content .mode {
flex: 1;
flex: 1 2;
padding: 5px 0;
color: var(--vp-c-text-1);
text-align: center;

2
docs/.vuepress/themes/components/InputRange.vue
View File

@ -24,7 +24,7 @@ const value = defineModel<number>({
<style scoped>
input[type="range"] {
flex: 1;
flex: 1 2;
}
input[type="number"] {

1
docs/1.示例/markdown基础.md
View File

@ -1,6 +1,5 @@
---
title: Markdown 基础
author: pengzhanbo
createTime: 2024/03/06 22:43:52
permalink: /article/mcz1csb4/
tags:

1
docs/1.示例/markdown扩展.md
View File

@ -1,6 +1,5 @@
---
title: markdown 扩展
author: pengzhanbo
createTime: 2024/03/05 22:49:39
permalink: /article/mcgayb5w/
tags:

1
docs/1.示例/全屏水印.md
View File

@ -1,6 +1,5 @@
---
title: 全屏水印
author: Plume Theme
createTime: 2024/04/10 20:28:18
permalink: /article/97s6ha1e/
watermark:

1
docs/1.示例/内容水印.md
View File

@ -1,6 +1,5 @@
---
title: 内容水印
author: Plume Theme
createTime: 2024/04/10 20:28:32
permalink: /article/2z59hh8g/
watermark:

1
docs/1.示例/加密文章.md
View File

@ -1,6 +1,5 @@
---
title: 加密文章，密码：123456
author: pengzhanbo
createTime: 2023/12/25 01:28:29
permalink: /article/enx7c9s/
tags:

1
docs/1.示例/图片水印.md
View File

@ -1,6 +1,5 @@
---
title: 图片水印
author: Plume Theme
createTime: 2024/04/11 06:07:50
permalink: /article/i4cuuonn/
watermark:

1
docs/1.示例/照片类作品示例.md
View File

@ -1,6 +1,5 @@
---
title: 照片类作品示例
author: Plume Theme
createTime: 2024/08/17 14:30:23
permalink: /article/30995vcd/
---

1
docs/1.示例/示例文章.md
View File

@ -1,6 +1,5 @@
---
title: 示例文章
author: pengzhanbo
createTime: 2023/12/25 01:28:29
permalink: /article/xld23tu1/
tags:

1
docs/1.示例/示例文章2.md
View File

@ -1,6 +1,5 @@
---
title: 示例文章2
author: pengzhanbo
createTime: 2024/03/01 22:52:43
permalink: /article/elac3ddb/
---

1
docs/1.示例/示例文章3.md
View File

@ -1,6 +1,5 @@
---
title: 示例文章3
author: pengzhanbo
createTime: 2024/03/01 22:53:34
permalink: /article/9eh4d6ao/
---

1
docs/1.示例/示例文章4.md
View File

@ -1,6 +1,5 @@
---
title: 示例文章4
author: pengzhanbo
createTime: 2024/03/01 22:53:58
permalink: /article/qk81wscb/
---

1
docs/1.示例/示例文章5.md
View File

@ -1,6 +1,5 @@
---
title: 示例文章5
author: Plume Theme
createTime: 2024/03/01 22:55:23
permalink: /article/2seng2ou/
---

1
docs/1.示例/示例文章6.md
View File

@ -1,6 +1,5 @@
---
title: 示例文章6
author: Plume Theme
createTime: 2024/03/01 22:55:35
permalink: /article/v9fejej9/
---

1
docs/1.示例/示例文章7.md
View File

@ -1,6 +1,5 @@
---
title: 示例文章7
author: Plume Theme
createTime: 2024/03/01 22:55:49
permalink: /article/5xbhl125/
---

1
docs/1.示例/示例文章8.md
View File

@ -1,6 +1,5 @@
---
title: 示例文章8
author: Plume Theme
createTime: 2024/03/01 22:55:56
permalink: /article/m4gen76w/
---

1
docs/1.示例/示例文章9.md
View File

@ -1,6 +1,5 @@
---
title: 示例文章9
author: Plume Theme
createTime: 2024/03/01 22:56:03
permalink: /article/z8zvx0ru/
---

1
docs/2.preview/主题效果预览.md
View File

@ -1,6 +1,5 @@
---
title: 主题效果预览
author: pengzhanbo
createTime: 2023/12/25 01:28:29
permalink: /article/0lk24ty5/
sticky: true

48
docs/README.md
View File

@ -32,11 +32,11 @@ config:
-
title: 开箱即用
icon: twemoji:rocket
details: 支持零配置开箱即用，也支持丰富的自定义配置
details: 零配置开箱即用，丰富的自定义配置
-
title: 多语言
icon: twemoji:balance-scale
details: 内置 中文/英文支持，还可以自定义添加更多的语言支持
details: 内置 中文、英文等 7 种语言支持，还可以自定义添加更多的语言支持
-
title: 双色主题
icon: twemoji:cityscape
@ -56,7 +56,7 @@ config:
-
title: Markdown 增强
icon: twemoji:writing-hand-light-skin-tone
details: 支持 Markdown 语法，支持 代码块分组、提示容器、任务列表、数学公式、代码演示等
details: 在常规 markdown 语法的基础上，添加数十种增强语法，如自定义容器、文件树、代码分组等
-
type: image-text
title: 功能
@ -115,6 +115,7 @@ config:
<div style="max-width: 960px;margin:0 auto;" class="home-custom-content">
::: center
![GitHub Repo stars](https://img.shields.io/github/stars/pengzhanbo/vuepress-theme-plume)
![npm version](https://img.shields.io/npm/v/vuepress-theme-plume?color=32A9C3&labelColor=1B3C4A&label=npm)
![npm downloads](https://img.shields.io/npm/dm/vuepress-theme-plume?color=32A9C3&labelColor=1B3C4A&label=downloads)
@ -123,46 +124,27 @@ config:
![peer dependency](https://img.shields.io/npm/dependency-version/vuepress-theme-plume/peer/vuepress?color=32A9C3&labelColor=1B3C4A)
![codecov](https://codecov.io/gh/pengzhanbo/vuepress-theme-plume/graph/badge.svg?token=W6KYBX7WO5)
:::
### 安装
### 使用
:::code-tabs
@tab pnpm
使用以下命令，快速创建一个新的使用本主题的 ==VuePress== 项目。
:::npm-to
```sh
pnpm add vuepress@next vuepress-theme-plume vue
```
@tab npm
```sh
npm install vuepress@next vuepress-theme-plume
```
@tab yarn
```sh
yarn add vuepress@next vuepress-theme-plume
npm create vuepress-theme-plume@latest
```
:::
### 配置
### 启动项目
::: code-tabs
@tab .vuepress/config.ts
::: npm-to
```ts :no-line-numbers
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
// vuepress config...
theme: plumeTheme({
// theme config...
})
})
```sh
npm run docs:dev
```
:::
@ -173,6 +155,8 @@ export default defineUserConfig({
### 贡献者
感谢所有的贡献者！
<Contributors
:contributors="[
'pengzhanbo',

1
docs/demos.md
View File

@ -1,6 +1,5 @@
---
title: 案例
author: pengzhanbo
createTime: 2024/04/18 19:22:07
permalink: /demos/
readingTime: false

1
docs/en/1.FE/1.Node/english_blog.md
View File

@ -1,6 +1,5 @@
---
title: english_blog
author: Plume Theme
createTime: 2023/06/15 08:51:31
permalink: /en/article/xw0awouo/
---

1
docs/en/notes/theme/config/frontmatter/article.md
View File

@ -1,6 +1,5 @@
---
title: Blog Article
author: pengzhanbo
createTime: 2025/03/03 19:11:37
permalink: /en/config/frontmatter/article/
---

1
docs/en/notes/theme/config/frontmatter/basic.md
View File

@ -1,6 +1,5 @@
---
title: General configuration
author: pengzhanbo
createTime: 2025/03/04 12:30:38
permalink: /en/config/frontmatter/basic/
badge: badge

1
docs/en/notes/theme/config/intro.md
View File

@ -1,6 +1,5 @@
---
title: Configuration
author: pengzhanbo
createTime: 2024/03/02 10:48:14
permalink: /en/config/intro/
---

1
docs/en/notes/theme/config/notes.md
View File

@ -1,6 +1,5 @@
---
title: Notes Configuration
author: pengzhanbo
createTime: 2025/03/03 14:44:18
permalink: /en/config/notes/
---

1
docs/en/notes/theme/guide/intro.md
View File

@ -1,6 +1,5 @@
---
title: Theme Introduction
author: pengzhanbo
icon: mdi:tooltip-text-outline
createTime: 2024/03/04 11:06:24
permalink: /en/guide/intro/

1
docs/en/notes/theme/guide/markdown/basic.md
View File

@ -1,6 +1,5 @@
---
title: Basic
author: pengzhanbo
icon: fluent:markdown-20-filled
createTime: 2025/03/03 13:55:19
permalink: /en/guide/markdown/basic/

1
docs/en/notes/theme/guide/markdown/extensions.md
View File

@ -1,6 +1,5 @@
---
title: Extensions
author: pengzhanbo
icon: fluent-mdl2:auto-enhance-on
createTime: 2025/03/03 14:04:34
permalink: /en/guide/markdown/extensions/

5
docs/notes/theme/config/frontmatter/basic.md
View File

@ -1,6 +1,5 @@
---
title: 通用配置
author: pengzhanbo
createTime: 2024/03/02 20:01:09
permalink: /config/frontmatter/basic/
badge: 徽章 badge
@ -189,7 +188,7 @@ permalink: /config/frontmatter/basic/
如果您的文章来源于第三方， git 提交不能完整列出所有的作者，您可以在此处补充贡献者。
额外信息补充请查看 [contributors](../../guide/功能/文章贡献者.md#info)
额外信息补充请查看 [contributors](../../guide/features/contributors.md#info)
### changelog
@ -207,7 +206,7 @@ permalink: /config/frontmatter/basic/
当前文章是否 显示 版权信息。
完整信息请查看 [copyright](../../guide/功能/文章版权所有.md)
完整信息请查看 [copyright](../../guide/features/copyright.md)
### editLink

3
docs/notes/theme/config/frontmatter/friend.md
View File

@ -1,6 +1,5 @@
---
title: 友情链接页
author: pengzhanbo
createTime: 2024/03/03 18:00:52
permalink: /config/frontmatter/friends/
---
@ -117,7 +116,7 @@ interface FriendsItem {
}
```
社交链接配置请查看 [配置/主题配置/社交链接](../../config/主题配置.md#social)。
社交链接配置请查看 [配置/主题配置/社交链接](../../config/theme.md#social)。
### groups

5
docs/notes/theme/config/frontmatter/home.md
View File

@ -1,6 +1,5 @@
---
title: 首页
author: pengzhanbo
createTime: 2024/03/03 15:00:43
permalink: /config/frontmatter/home/
---
@ -13,7 +12,7 @@ permalink: /config/frontmatter/home/
```md
---
home: true
pageLayout: home
config:
- type: banner
- type: custom
@ -66,4 +65,4 @@ interface PlumeHomeConfigBase {
}
```
更多详细配置请参考 [自定义首页](../../guide/自定义首页.md)
更多详细配置请参考 [自定义首页](../../guide/custom/home.md)

1
docs/notes/theme/config/frontmatter/post.md
View File

@ -1,6 +1,5 @@
---
title: 博客文章
author: pengzhanbo
createTime: 2024/03/03 11:01:03
permalink: /config/frontmatter/article/
---

184
docs/notes/theme/config/intro.md Normal file
View File

@ -0,0 +1,184 @@
---
title: 配置说明
createTime: 2024/03/02 10:48:14
permalink: /config/intro/
---
## 概述
==vuepress-theme-plume== 是基于 [VuePress](https://v2.vuepress.vuejs.org/) 的主题。
因此，配置需要遵循 VuePress 的配置规范。
**在 VuePress 中，有三种配置类型:**
- **站点配置**: 这是你在 配置文件 _（如 `.vuepress/config.ts`）_ 中直接导出的对象
- **主题配置**: 传递给 `plumeTheme()` 的对象参数
- **页面配置**: 由在页面顶部基于 YAML 语法的 Frontmatter 提供
## VuePress 配置文件
VuePress 站点的基本配置文件是 `.vuepress/config.js` ，但也同样支持 TypeScript 配置文件。
你可以使用 `.vuepress/config.ts` 来得到更好的类型提示。
具体而言，VuePress 对于配置文件的路径有着约定（按照优先顺序）：
当前工作目录 `cwd` 下：
- `vuepress.config.ts`
- `vuepress.config.js`
- `vuepress.config.mjs`
源文件目录 `sourceDir` 下：
- `.vuepress/config.ts` <Badge type="tip" text="推荐使用" />
- `.vuepress/config.js`
- `.vuepress/config.mjs`
基础配置文件示例：
```ts title=".vuepress/config.ts"
import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
// [!code hl:5]
// VuePress 的基本配置
lang: 'zh-CN',
title: '你好， VuePress ！',
description: '这是我的第一个 VuePress 站点',
// ...
// 使用 vite 作为构建工具
bundler: viteBundler(),
// 告诉 VuePress 使用 Plume 主题
theme: plumeTheme({ // [!code ++:4]
// 在这里配置主题
// ...
}),
})
```
## 主题配置文件
一般我们使用 `.vuepress/config.js` 或者 `.vuepress/config.ts` 来配置主题。
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
// 在这里配置主题
}),
// ...
})
```
但是当我们已经启动了 VuePress 服务后，每次对该文件的修改，都会导致 VuePress 服务重启，
然后站点进行全量刷新，这可能需要等待一段时间才能恢复， 当站点内容较少时，这个过程很快，
而对于一些较大的站点，可能需要等待较长的时间。
特别是频繁修改时，很容易使 VuePress ==服务崩溃=={.caution} :[twemoji:angry-face]:，不得不手动重启。
**这给我们在编写站点内容时带来的极大的不便。**
实际上，主题配置中的一部分字段，并不需要重启 VuePress 服务，
比如 `navbar`、`profile` 等字段，可以通过 热更新 的方式实时生效。
主题添加主题配置文件 `plume.config.ts` 的支持，
==对该文件的修改将通过热更新的方式实时生效。=={.tip} :[twemoji:confetti-ball]:
你可以在这个文件中配置支持热更新的字段，比如 `navbar`、`profile` 等字段。
::: tip
这些支持热更新的字段依然可以在 VuePress 配置文件的 `theme` 中进行配置，主题配置文件的配置
最终会合并到 VuePress 配置文件中。
在 主题配置文件配置的字段，避免在 VuePress 配置文件的 `theme` 配置中重复配置。
因为在合并过程可能会出现数据重复的情况。
:::
::: details 什么是 热更新？
**热更新** 是编程的一种技术，在 VuePress 中，体现为：
- 对配置的修改实时生效，不需要重启 VuePress 服务，浏览器不会自动刷新页面
- 对页面的修改实时生效，在浏览器中页面无需刷新即可看到修改后的效果
:::
### 配置
在 [VuePress 配置文件](#vuepress-配置文件) 相同的路径下创建一个 `plume.config.js` 文件，
你也可以使用 TypeScript 来创建一个 `plume.config.ts` 文件，以获得更好的类型提示。
::: file-tree
- docs
- .vuepress
- config.ts
- **plume.config.ts**
:::
```ts title="plume.config.ts"
import { defineThemeConfig } from 'vuepress-theme-plume'
import navbar from './navbar'
export default defineThemeConfig({
// 在这里配置主题
profile: {
name: 'Your name',
},
navbar,
})
```
主题提供了 `defineThemeConfig(config)` 函数，为主题使用者提供主题配置的类型帮助。
你可以直接在这个文件中配置除了 `plugins` 字段外的其他配置。
::: warning 主题配置文件仅能配置部分支持热更新的配置字段
:::
::: warning 配置会被合并到 VuePress 配置的主题配置中，已经在主题配置文件中配置的字段，不需要在 VuePress 配置文件中的 `theme` 配置中重复配置
:::
### 自定义配置文件路径
如果你不希望按照 VuePress 默认的配置文件路径管理你的主题配置文件，
你也可以在 VuePress 配置文件中指定自己的主题配置文件路径。
```ts
import path from 'node:path'
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
// 在这里定义自己的主题配置文件路径
configFile: path.join(__dirname, 'custom/config.ts'), // [!code ++]
}),
})
```
::: warning 如果你是新手用户，不推荐自定义配置文件路径，这可能带来意想不到的问题。
:::
## 页面配置
使用在页面的顶部使用 YAML 语法的 Frontmatter，可以为每个页面进行单独配置主题。
```md {1,5} title="article.md"
---
title: 文章标题
createTime: 2024/09/08 22:53:34
permalink: /article/xxx/
---
```
在 Markdown 文件的顶部，使用 `---` 分隔符，在两个 `---` 之间的部分被称为 Frontmatter。
这部分通过 `YAML` 语法进行配置。
:::tip 如果你不了解 `YAML`，可以通过 [这篇博客](/article/ecxnxxd0/) 了解它的基本用法。
:::

9
docs/notes/theme/config/多语言配置.md → docs/notes/theme/config/locales.md
View File

@ -1,6 +1,5 @@
---
title: 多语言配置
author: pengzhanbo
createTime: 2024/03/02 10:07:15
permalink: /config/locales/
---
@ -27,7 +26,7 @@ permalink: /config/locales/
您可以在 `.vuepress/config.ts` ，或者在 `.vuepress/plume.config.ts` 中进行配置：
::: code-tabs
::: code-tabs#configs
@tab .vuepress/config.ts
@ -64,6 +63,8 @@ export default defineThemeConfig({
:::
详细配置方法请参考：[国际化](../guide/quick-start/locales.md)
### appearanceText
- 类型： `string`
@ -78,7 +79,7 @@ export default defineThemeConfig({
Locale 的语言名称。
该配置项 **仅能在主题配置的 [locales](./主题配置.md#locales) 的内部生效** 。它将被用作 locale 的语言名称，展示在 _选择语言菜单_ 内。
该配置项 **仅能在主题配置的 [locales](./theme.md#locales) 的内部生效** 。它将被用作 locale 的语言名称，展示在 _选择语言菜单_ 内。
### selectLanguageText
@ -88,7 +89,7 @@ export default defineThemeConfig({
_选择语言菜单_ 的文本。
如果你在站点配置中设置了多个 [locales](./主题配置.md#locales) ，那么 _选择语言菜单_ 就会显示在导航栏中仓库按钮的旁边。
如果你在站点配置中设置了多个 [locales](./theme.md#locales) ，那么 _选择语言菜单_ 就会显示在导航栏中仓库按钮的旁边。
### selectLanguageAriaLabel

269
docs/notes/theme/config/markdown.md Normal file
View File

@ -0,0 +1,269 @@
---
title: Markdown 配置
createTime: 2025/03/15 14:54:19
permalink: /config/markdown/
badge:
type: tip
text: 1.0.0-rc.136 +
---
## 概述
Markdown 配置用于控制 Markdown 的行为。此配置聚合了主题为 markdown 增强的各种功能的配置。
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
// [!code ++:3]
markdown: {
// 在这里配置 markdown
},
}),
})
```
::: warning
不要和 [VuePress](https://v2.vuepress.vuejs.org/) 的 [markdown](https://v2.vuepress.vuejs.org/zh/reference/config.html#markdown) 配置混淆。
二者是相互独立的，不要在 [VuePress > markdown](https://v2.vuepress.vuejs.org/zh/reference/config.html#markdown) 中配置主题的 markdown 配置,反之亦然。
:::
**默认配置：**
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
// [!code focus:9]
markdown: {
hint: true,
alert: true,
fileTree: true,
plot: true,
icons: true,
math: { type: 'katex' },
include: true,
codeTabs: true,
tabs: true,
},
}),
})
```
## 配置项
::: tip `hint` 和 `alter` 的功能由 [@vuepress/plugin-markdown-hint](https://ecosystem.vuejs.press/zh/plugins/markdown/markdown-hint.html) 插件实现。
:::
### hint
- **类型：** `boolean`
- **默认值：** `true`
- **详情：** 是否启用提示容器
### alert
- **类型：** `boolean`
- **默认值：** `true`
- **详情：** 是否启用 Github 风格的警告语法
---
::: tip `image` 配置由 [@vuepress/plugin-markdown-image](https://ecosystem.vuejs.press/zh/plugins/markdown/markdown-image.html) 插件实现。
:::
### image
- **类型**: `boolean | MarkdownImagePluginOptions`
- **默认值**: `false`
- **详情**: 是否启用图片增强语法
---
::: tip `math` 配置由 [@vuepress/plugin-markdown-math](https://ecosystem.vuejs.press/zh/plugins/markdown/markdown-math.html) 插件实现。
:::
### math
- **类型**: `boolean | MarkdownMathPluginOptions`
- **默认值**: `{ type: 'katex' }`
- **详情**: 是否启用数学支持
---
### include
::: tip `include` 配置由 [@vuepress/plugin-markdown-include](https://ecosystem.vuejs.press/zh/plugins/markdown/markdown-include.html) 插件实现。
:::
- **类型**: `boolean | MarkdownIncludePluginOptions`
- **默认值**: `true`
- **详情**: 是否启用 Markdown 文件导入
---
::: tip 以下配置字段由 [vuepress-plugin-md-power](./plugins/markdown-power.md) 插件实现。
:::
### annotation
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用内容注释
### abbr
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用缩写语法
### codeTabs
- **类型**: `boolean | CodeTabsOptions`
- **默认值**: `true`
- **详情**: 是否启用代码块分组
### tabs
- **类型**: `boolean | TabsOptions`
- **默认值**: `true`
- **详情**: 是否启用 分组
### npmTo
- **类型**: `boolean | NpmToOptions`
- **默认值**: `false`
- **详情**: 是否启用 `npm-to` 容器
### icons
- **类型**: `boolean | IconsOptions`
- **默认值**: `true`
- **详情**: 是否启用图标语法
### plot
- **类型**: `boolean | PlotOptions`
- **默认值**: `true`
- **详情**: 是否启用隐秘文本语法
### fileTree
- **类型**: `boolean | FileTreeOptions`
- **默认值**: `true`
- **详情**: 是否启用文件树容器语法
### demo
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 Demo 容器
### pdf
- **类型**: `boolean | PdfOptions`
- **默认值**: `false`
- **详情**: 是否启用 PDF 嵌入语法
### bilibili
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 Bilibili 视频嵌入语法
### youtube
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 YouTube 视频嵌入语法
### artPlayer
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 ArtPlayer 视频嵌入语法
### audioReader
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 Audio Reader 音频嵌入语法
### codepen
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 CodePen 嵌入语法
### codeSandbox
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 CodeSandbox 嵌入语法
### jsfiddle
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 JS Fiddle 嵌入语法
### repl
- **类型**: `boolean | ReplOptions`
- **默认值**: `false`
- **详情**: 是否启用 Repl 容器语法
### caniuse
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 Can I Use 嵌入语法
### imageSize
- **类型**: `boolean | 'local' | 'all'`
- **默认值**: `false`
- **详情**: 是否启用 自动填充图片宽高属性
---
::: tip 以下配置字段由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/) 插件实现。
:::
### chartjs
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 Chart.js 图表嵌入语法
### echarts
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 ECharts 图表嵌入语法
### mermaid
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 Mermaid 图表嵌入语法
### markmap
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 Markmap 图表嵌入语法
### plantuml
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 PlantUML 图表嵌入语法
### flowchart
- **类型**: `boolean`
- **默认值**: `false`
- **详情**: 是否启用 Flowchart 图表嵌入语法

28
docs/notes/theme/config/导航栏配置.md → docs/notes/theme/config/navbar.md
View File

@ -1,21 +1,20 @@
---
title: 导航栏配置
author: pengzhanbo
createTime: 2024/03/01 15:07:33
permalink: /config/navigation/
---
## 概述
::: tip 导航栏配置支持在 `.vuepress/config.ts` ，或者在 `plume.config.ts` 中进行配置。
:::
主题默认会自动生成最简单的导航栏配置，仅包括 **首页** 和 **博客文章列表页** 。
你也可以自己配置导航栏，覆盖默认的的导航栏配置。
默认配置如下：
::: code-tabs
@tab default config
```ts
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
@ -32,13 +31,8 @@ export default defineUserConfig({
})
```
:::
当开启了 多语言配置，则会生成对应语言的导航栏的默认配置：
::: code-tabs
@tab default config
```ts
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
@ -72,8 +66,6 @@ export default defineUserConfig({
})
```
:::
随着站点内容变得越来越丰富，包括了 博客文章列表、notes、友情链接、 外部链接等等，
默认生成的导航栏配置满足不了您的需求。
@ -122,10 +114,7 @@ type NavItem = string | {
### 嵌套配置示例
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
@ -187,8 +176,6 @@ export default defineUserConfig({
})
```
:::
### `activeMatch`
`activeMatch` 用于控制当前链接元素何时被激活。其值为一个类正则表达式的字符串。
@ -202,10 +189,7 @@ export default defineUserConfig({
主题提供了 `defineNavbar(config)` 函数，为主题使用者提供导航栏配置的类型帮助。
便于将 `navbar` 配置分离到独立的配置文件中。
::: code-tabs
@tab navbar.ts
```ts
```ts title="navbar.ts"
import { defineNavbar } from 'vuepress-theme-plume'
export default defineNavbar([
@ -214,5 +198,3 @@ export default defineNavbar([
// ... more
])
```
:::

8
docs/notes/theme/config/notes配置.md → docs/notes/theme/config/notes.md
View File

@ -1,12 +1,14 @@
---
title: notes配置
author: pengzhanbo
createTime: 2024/03/02 14:00:06
permalink: /config/notes/
---
## 概述
::: tip notes 配置支持在 `.vuepress/config.ts` ，或者在 `plume.config.ts` 中进行配置。
:::
主题默认将 `sourceDir` 目录下的 `notes` 目录作为 文档/知识笔记 的存放目录，
该目录下的所有文件都会被排除在 博客文章之外。
@ -139,7 +141,7 @@ export type ThemeIcon = string | { svg: string }
当配置某个 笔记 的 `sidebar` 为 `auto` 时，会自动根据目录结构生成侧边栏。
排序根据 [文件夹命名约定](/guide/write/#文件夹命名约定) 。
排序根据 [文件夹命名约定](../guide/quick-start/write.md#文件夹命名约定) 。
### 侧边栏图标
@ -153,4 +155,4 @@ icon: mdi:tooltip-text-outline
---
```
完整侧边栏使用说明，请查看 [此文档](../guide/知识笔记.md) 。
完整侧边栏使用说明，请查看 [此文档](../guide/quick-start/document.md) 。

28
docs/notes/theme/config/plugins/README.md
View File

@ -1,6 +1,5 @@
---
title: 介绍
author: Plume Theme
createTime: 2024/03/06 8:26:44
permalink: /config/plugins/
---
@ -11,10 +10,7 @@ permalink: /config/plugins/
所有主题内部使用的插件， 均在 `plugins` 字段中进行配置。
::: code-tabs
@tab .vuepress/config.ts
``` js
``` js title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
@ -27,7 +23,27 @@ export default defineUserConfig({
})
```
:::
## 插件列表
- [@vuepress/plugin-nprogress](https://ecosystem.vuejs.press/zh/plugins/features/nprogress.html) - 页面加载进度条
- [@vuepress/plugin-photo-swipe](https://ecosystem.vuejs.press/zh/plugins/features/photo-swipe.html) - 图片预览
- [@vuepress/plugin-reading-time](https://ecosystem.vuejs.press/zh/plugins/development/reading-time.html) - 文章阅读时间
- [@vuepress/plugin-watermark](https://ecosystem.vuejs.press/zh/plugins/features/watermark.html) - 文章水印
- [@vuepress-plume/plugin-search](./search.md) - 本地搜索
- [@vuepress/plugin-docsearch](https://ecosystem.vuejs.press/zh/plugins/search/docsearch.html) - Algolia 文档搜索
- [@vuepress/plugin-copy-code](https://ecosystem.vuejs.press/zh/plugins/features/copy-code.html) - 代码复制
- [@vuepress/plugin-shiki](https://ecosystem.vuejs.press/zh/plugins/markdown/shiki.html) - 代码高亮
- [@vuepress/plugin-comment](https://ecosystem.vuejs.press/zh/plugins/blog/comment/) - 文章评论
- [@vuepress/plugin-markdown-hint](https://ecosystem.vuejs.press/zh/plugins/markdown/hint.html) - Markdown 提示
- [@vuepress/plugin-markdown-image](https://ecosystem.vuejs.press/zh/plugins/markdown/image.html) - Markdown 图片
- [@vuepress/plugin-markdown-math](https://ecosystem.vuejs.press/zh/plugins/markdown/math.html) - Markdown 数学公式
- [@vuepress/plugin-markdown-include](https://ecosystem.vuejs.press/zh/plugins/markdown/include.html) - Markdown 导入文件
- [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/) - Markdown 增强
- [vuepress-plugin-md-power](./markdown-power.md) - Markdown Power
- [@vuepress/plugin-git](https://ecosystem.vuejs.press/zh/plugins/development/git.html) - git 提交信息
- [@vuepress/plugin-cache](https://ecosystem.vuejs.press/zh/plugins/tools/cache.html) - 页面编译缓存
- [@vuepress/plugin-seo](https://ecosystem.vuejs.press/zh/plugins/seo/seo/) - SEO 优化
- [@vuepress/plugin-sitemap](https://ecosystem.vuejs.press/zh/plugins/seo/sitemap/) - 站点地图
:::tip
您无需重复安装这些内置插件，也无需在 [vuepress配置 > plugins](https://v2.vuepress.vuejs.org/zh/reference/config.html#plugins) 中添加它们。主题已在内部完成了这些工作。

37
docs/notes/theme/config/plugins/markdown增强.md → docs/notes/theme/config/plugins/markdown-enhance.md
View File

@ -1,6 +1,5 @@
---
title: Markdown Enhance
author: pengzhanbo
createTime: 2024/03/06 20:25:36
permalink: /config/plugins/markdown-enhance/
---
@ -13,37 +12,29 @@ permalink: /config/plugins/markdown-enhance/
默认配置：
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownEnhance: {
// 以下可选项在 主题中默认不启用，
// 请在主题中自行配置
// chartjs: true, // 图表支持
// echarts: true, // ECharts 图表支持
// flowchart: true, // 流程图支持
// markmap: true, // Markmap 图表支持
// stylize: true, // 对行内语法进行样式化以创建代码片段
// playground: true, // 交互演示
// kotlinPlayground: true, // Kotlin 交互演示
// vuePlayground: true, // Vue 交互演示
// sandpack: true, // sandpack 交互演示
// demo: true, // 代码案例
}
}
markdown: {
// 以下可选项在 主题中默认不启用，
// 请在主题中自行配置
// chartjs: true, // 图表支持
// echarts: true, // ECharts 图表支持
// flowchart: true, // 流程图支持
// markmap: true, // Markmap 图表支持
// stylize: true, // 对行内语法进行样式化以创建代码片段
// playground: true, // 交互演示
// kotlinPlayground: true, // Kotlin 交互演示
// vuePlayground: true, // Vue 交互演示
// sandpack: true, // sandpack 交互演示
},
}),
})
```
:::
## 配置
详见 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/config.html)

15
docs/notes/theme/config/plugins/markdownImage.md → docs/notes/theme/config/plugins/markdown-image.md
View File

@ -14,17 +14,14 @@ permalink: /config/plugins/markdown-image/
插件默认不启用任何功能，你需要手动开启它们。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownImage: {
markdown: {
image: {
// 启用 figure
// figure: true,
@ -37,9 +34,11 @@ export default defineUserConfig({
// 启用图片大小
// size: true,
}
},
// 也可以在 `plugins.markdownImage` 配置，但不推荐
plugins: {
markdownImage: {}
}
}),
})
```
:::

17
docs/notes/theme/config/plugins/markdownInclude.md → docs/notes/theme/config/plugins/markdown-include.md
View File

@ -14,23 +14,22 @@ permalink: /config/plugins/markdown-include/
主题默认启用 `markdownInclude`。你还可以通过配置来自定义行为。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
markdown: {
include: {
// ... options
}
},
// 也可以在 `plugins.markdownInclude` 中配置，但不推荐
plugins: {
markdownInclude: {
// ... options,
},
markdownInclude: {},
}
})
})
```
:::
### resolvePath
- 类型：`(path: string, cwd: string | null) => string`

15
docs/notes/theme/config/plugins/markdownMath.md → docs/notes/theme/config/plugins/markdown-math.md
View File

@ -16,22 +16,21 @@ permalink: /config/plugins/markdown-math/
插件默认启用 `katex`。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownMath: {
markdown: {
math: {
type: 'katex',
}
},
// 也可以在 `plugins.markdownMath` 中进行配置，但不推荐
plugins: {
markdownMath: {}
}
}),
})
```
:::

47
docs/notes/theme/config/plugins/markdownPower.md → docs/notes/theme/config/plugins/markdown-power.md
View File

@ -8,47 +8,44 @@ permalink: /config/plugins/markdown-power/
为 主题 提供 Markdown 增强功能。
关联插件: [@vuepress-plume/plugin-md-power](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-md-power)
关联插件: [vuepress-plugin-md-power](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-md-power)
## 配置
默认配置：
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
markdown: {
fileTree: true, // :::file-tree 文件树容器
plot: true, // !!plot!! 隐秘文本
icons: true, // :[collect:name]: 内联 iconify 图标
// 默认不启用以下功能，你需要手动开启它们
// npmTo: true, // :::npm-to
// demo: true, // :::demo
// pdf: true, // @[pdf](url) 嵌入 PDF 文件
// bilibili: true, // @[bilibili](bvid) 嵌入 bilibili 视频
// youtube: true, // @[youtube](id) 嵌入 youtube 视频
// codepen: true, // @[codepen](user/slash) 嵌入 codepen
// replit: true, // @[replit](user/repl-name) 嵌入 Replit
// codeSandbox: true, // @[codesandbox](id) 嵌入 CodeSandbox
// jsfiddle: true, // @[jsfiddle](id) 嵌入 jsfiddle
// caniuse: true, // @[caniuse](feature) 嵌入 caniuse
// repl: true, // :::go-repl :::kotlin-repl :::rust-repl
// imageSize: true, // 在构建阶段为 图片添加 width/height 属性
},
// 也可以在 `plugins.markdownPower` 中配置，但不推荐
plugins: {
markdownPower: {
fileTree: true, // :::file-tree 文件树容器
plot: true, // !!plot!! 隐秘文本
icons: true, // :[collect:name]: 内联 iconify 图标
// 默认不启用以下功能，你需要手动开启它们
// pdf: true, // @[pdf](url) 嵌入 PDF 文件
// bilibili: true, // @[bilibili](bvid) 嵌入 bilibili 视频
// youtube: true, // @[youtube](id) 嵌入 youtube 视频
// codepen: true, // @[codepen](user/slash) 嵌入 codepen
// replit: true, // @[replit](user/repl-name) 嵌入 Replit
// codeSandbox: true, // @[codesandbox](id) 嵌入 CodeSandbox
// jsfiddle: true, // @[jsfiddle](id) 嵌入 jsfiddle
// caniuse: true, // @[caniuse](feature) 嵌入 caniuse
// repl: true, // :::go-repl :::kotlin-repl :::rust-repl
// imageSize: true, // 在构建阶段为 图片添加 width/height 属性
}
markdownPower: {}
}
}),
})
```
:::
## 功能
### 嵌入 PDF

28
docs/notes/theme/config/plugins/阅读统计.md → docs/notes/theme/config/plugins/reading-time.md
View File

@ -12,26 +12,23 @@ permalink: /config/plugins/reading-time/
默认配置：
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
readingTime: {
wordPerMinute: 300
},
// 也可以通过 plugins.readingTime 配置，但不推荐
plugins: {
readingTime: {
wordPerMinute: 300
},
readingTime: {}
}
}),
})
```
:::
## 配置
### wordPerMinute
@ -72,24 +69,17 @@ interface ReadingTimePluginLocaleConfig {
## 禁用
可以通过配置 `plugins.readingTime` 为 `false` 禁用该插件。
可以通过配置 `readingTime` 为 `false` 禁用该功能。
禁用后，文章页不会显示字数统计与预计阅读时间。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
plugins: {
readingTime: false
}
readingTime: false
}),
})
```
:::

34
docs/notes/theme/config/plugins/搜索.md → docs/notes/theme/config/plugins/search.md
View File

@ -1,6 +1,5 @@
---
title: 内容搜索
author: pengzhanbo
createTime: 2024/03/06 09:19:26
permalink: /config/plugins/search/
---
@ -17,26 +16,24 @@ permalink: /config/plugins/search/
默认配置：
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
search: {
provider: 'local', // [!code hl]
// more options...
},
// 也可以通过 plugins.search 配置，但不推荐
plugins: {
search: {
// more options
}
search: {},
}
})
})
```
:::
### 配置
```ts
@ -84,19 +81,22 @@ interface SearchBoxLocale {
### 启用
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
search: {
provider: 'algolia', // [!code hl]
appId: 'YOUR_APP_ID',
apiKey: 'YOUR_API_KEY',
indexName: 'YOUR_INDEX_NAME',
// more options
},
// 也可以通过 plugins.docsearch 配置，但不推荐
plugins: {
docsearch: {
appId: 'YOUR_APP_ID',
apiKey: 'YOUR_API_KEY',
indexName: 'YOUR_INDEX_NAME',
// more options
}
docsearch: {},
}
})
})

39
docs/notes/theme/config/plugins/代码高亮.md → docs/notes/theme/config/plugins/shiki.md
View File

@ -1,6 +1,5 @@
---
title: 代码高亮
author: pengzhanbo
createTime: 2024/03/06 10:21:47
permalink: /config/plugins/code-highlight/
---
@ -18,38 +17,44 @@ Shiki 支持多种编程语言。
## 特性
- [代码行高亮](../../guide/代码/特性支持.md#在代码块中实现行高亮)
- [代码聚焦](../../guide/代码/特性支持.md#代码块中聚焦)
- [代码对比差异](../../guide/代码/特性支持.md#代码块中的颜色差异)
- [代码高亮“错误”和“警告”](../../guide/代码/特性支持.md#高亮-错误-和-警告)
- [代码词高亮](../../guide/代码/特性支持.md#代码块中-词高亮)
- [代码块折叠](../../guide/代码/特性支持.md#折叠代码块)
- [twoslash](../../guide/代码/twoslash.md#twoslash) ：在代码块内提供内联类型提示。
- [代码块标题](../../guide/code/features.md#代码块标题)
- [代码行高亮](../../guide/code/features.md#在代码块中实现行高亮)
- [代码聚焦](../../guide/code/features.md#代码块中聚焦)
- [代码对比差异](../../guide/code/features.md#代码块中的颜色差异)
- [代码高亮“错误”和“警告”](../../guide/code/features.md#高亮-错误-和-警告)
- [代码词高亮](../../guide/code/features.md#代码块中-词高亮)
- [代码块折叠](../../guide/code/features.md#折叠代码块)
- [twoslash](../../guide/code/twoslash.md#twoslash) ：在代码块内提供内联类型提示。
## 配置
默认配置：
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
codeHighlighter: {
themes: { light: 'vitesse-light', dark: 'vitesse-dark' },
notationDiff: true,
notationErrorLevel: true,
notationFocus: true,
notationHighlight: true,
notationWordHighlight: true,
highlightLines: true,
collapsedLines: false,
lineNumbers: true,
},
// 也可以通过 plugins.shiki 配置，但不推荐
plugins: {
shiki: {
themes: { light: 'vitesse-light', dark: 'vitesse-dark' },
},
shiki: {}
}
}),
})
```
:::
### themes
- 类型: `{ light: string, dark: string }`

42
docs/notes/theme/config/plugins/水印.md → docs/notes/theme/config/plugins/watermark.md
View File

@ -1,6 +1,5 @@
---
title: 水印
author: Plume Theme
createTime: 2024/06/17 15:37:18
permalink: /config/watermark/
---
@ -13,41 +12,38 @@ permalink: /config/watermark/
## 使用
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.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, // 添加水印的延时。以毫秒为单位。
// watermark: true,
watermark: {
// enabled: false, // boolean 类型控制是否全局启用
enabled: page => true, // function 类型 过滤哪些页面启用水印
delay: 500, // 添加水印的延时。以毫秒为单位。
/**
* 是否全屏水印，默认为 `true`，
* 设置为 `false` 时，水印仅在 内容区域中显示。
*/
fullPage: true,
/**
* 是否全屏水印，默认为 `true`，
* 设置为 `false` 时，水印仅在 内容区域中显示。
*/
fullPage: true,
/** @see https://zhensherlock.github.io/watermark-js-plus/zh/config/ */
watermarkOptions: {
content: 'your watermark',
// ...
}
/** @see https://zhensherlock.github.io/watermark-js-plus/zh/config/ */
watermarkOptions: {
content: 'your watermark',
// ...
}
},
// 也可以通过 plugins.watermark 配置，但不推荐
plugins: {
watermark: {}
}
})
})
```
:::
## 配置项
### enabled

23
docs/notes/theme/config/侧边栏配置.md → docs/notes/theme/config/sidebar.md
View File

@ -1,6 +1,5 @@
---
title: 侧边栏配置
author: Plume Theme
createTime: 2024/08/15 21:05:36
permalink: /config/sidebar/
---
@ -11,7 +10,7 @@ permalink: /config/sidebar/
在 `vuepress` 的默认主题 `@vuepress/theme-default` 中，侧边栏是通过 `sidebar` 进行配置。
**但在本主题中，为使其更具语义化，主题将侧边栏配置整合到了 [notes 配置](./notes配置.md) 中** 。
**但在本主题中，为使其更具语义化，主题将侧边栏配置整合到了 [notes 配置](./notes.md) 中** 。
通过一个 `note` 对应一个 `sidebar` 的方式，实现更加简洁，语义化的侧边栏配置。
同时，为了满足 用户不希望使用 `notes` 功能的需求，本主题也提供了 `sidebar` 的选项进行侧边栏配置。
@ -22,10 +21,7 @@ permalink: /config/sidebar/
你可以在 `notes` 目录下创建多个 `note` ，在每一个 `note` 中单独配置 `sidebar`:
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { defineNoteConfig, plumeTheme } from 'vuepress-theme-plume'
@ -50,19 +46,14 @@ export default defineUserConfig({
})
```
:::
主题提供了 `defineNoteConfig` 来帮助你配置 note , 你可以参考 [这里](./notes配置.md)来查看如何配置。
主题提供了 `defineNoteConfig` 来帮助你配置 note , 你可以参考 [这里](./notes.md)来查看如何配置。
## 通用 Sidebar 配置
如果你不想使用 `notes` 的方式来管理系列文章，但又期望通过侧边栏来导航到不同的文章，
可以通过 [sidebar](../config/主题配置.md#sidebar) 通用配置来实现。
可以通过 [sidebar](../config/theme.md#sidebar) 通用配置来实现。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
@ -79,6 +70,4 @@ export default defineUserConfig({
})
```
:::
完整侧边栏使用说明，请查看 [此文档](../guide/知识笔记.md) 。
完整侧边栏使用说明，请查看 [此文档](../guide/quick-start/document.md) 。

389
docs/notes/theme/config/主题配置.md → docs/notes/theme/config/theme.md
View File

@ -1,57 +1,180 @@
---
title: 主题配置
createTime: 2024/03/02 18:07:03
permalink: /config/basic/
permalink: /config/theme/
---
## 概述
主题配置用于定制主题的各项功能，以控制主题的行为，
您可以在 `.vuepress/config.ts` 或者 `.vuepress/plume.config.ts` 中进行配置。
当字段说明包含以下声明时，表示该字段不支持在 `.vuepress/plume.config.ts` 中进行配置：
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
无以上声明的字段，你可以在 `.vuepress/config.ts` 或者 `.vuepress/plume.config.ts` 的任意一个文件中
进行配置，一般情况下建议在 `.vuepress/plume.config.ts` 中进行配置。
::: warning 已经在一个配置文件中进行配置的字段，尽量不要在另一个配置文件中重复配置
:::
::: code-tabs#configs
@tab .vuepress/config.ts
```ts
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
// 主题配置
})
})
```
@tab .vuepress/plume.config.ts
```ts
import { defineThemeConfig } from 'vuepress-theme-plume'
export default defineThemeConfig({
// 主题配置
})
```
:::
## 基础配置
### configFile
- 类型： `string`
- 默认值： `''`
- 详情：
- **类型：** `string`
- **默认值：** `''`
- **详情：**
自定义主题配置文件的路径。
查看 [主题配置文件 `plume.config.js`](./配置说明.md#主题配置文件) 了解更多。
查看 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 了解更多。
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### plugins
- 类型：`PlumeThemePluginOptions`
- 默认值： `{}`
- 详情：
- **类型：**`PlumeThemePluginOptions`
- **默认值：** `{}`
- **详情：**
对主题内部使用的插件进行自定义配置。
主题使用的插件默认已进行了配置，大多数情况下您不需要进行修改，如果需要使用到细致的定制化，请查阅
[此文档](./plugins/README.md)
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./配置说明.md#主题配置文件) 中进行配置。
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### markdown <Badge type="tip" text="1.0.0-rc.136 +" />
- **类型：** `MarkdownOptions`
- **默认值：** `{}`
- **详情：**
Markdown 功能配置， 参考 [此文档](./markdown.md)
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### codeHighlighter <Badge type="tip" text="1.0.0-rc.136 +" />
- **类型：** `false | ShikiPluginOptions`
- **默认值：** `{}`
- **详情：**
代码高亮配置， 参考 [此文档](../guide/code/intro.md)
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### search <Badge type="tip" text="1.0.0-rc.136 +" />
- **类型：** `false | SearchOptions`
- **默认值：** `{ provider: 'local' }`
- **详情：**
搜索配置， 参考 [此文档](../guide/features/search.md)
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### comment <Badge type="tip" text="1.0.0-rc.136 +" />
- **类型：** `false | CommentPluginOptions`
- **默认值：** `false`
- **详情：**
评论配置， 参考 [此文档](../guide/features/comments.md)
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### watermark <Badge type="tip" text="1.0.0-rc.136 +" />
- **类型：** `false | WatermarkPluginOptions`
- **默认值：** `false`
- **详情：**
水印配置， 参考 [此文档](../guide/features/watermark.md)
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### readingTime <Badge type="tip" text="1.0.0-rc.136 +" />
- **类型：** `false | ReadingTimePluginOptions`
- **默认值：** `false`
- **详情：**
阅读时长配置， 参考 [此文档](../guide/features/reading-time.md)
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### copyCode <Badge type="tip" text="1.0.0-rc.136 +" />
- **类型：** `false | CopyCodePluginOptions`
- **默认值：** `{}`
- **详情：**
复制代码配置， 参考 [此文档](../guide/features/copy-code.md)
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### hostname
- 类型： `string`
- 默认值： `''`
- 详情：
- **类型：** `string`
- **默认值：** `''`
- **详情：**
部署站点域名。
当 `hostname` 配置为有效域名时，主题将会生成 `sitemap` 和 `seo` 相关的内容。
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./配置说明.md#主题配置文件) 中进行配置。
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### blog
- 类型： `false | BlogOptions`
- 默认值： `{ link: '/blog/', include: ['**/*.md'], exclude: [] }`
- 详情：
- **类型：** `false | BlogOptions`
- **默认值：** `{ link: '/blog/', include: ['**/*.md'], exclude: [] }`
- **详情：**
博客配置。
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./配置说明.md#主题配置文件) 中进行配置。
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
```ts
@ -195,17 +318,17 @@ interface BlogPostCoverStyle {
### article
- 类型： `string`
- 默认值： `/article/`
- 详情： 文章链接前缀
- **类型：** `string`
- **默认值：** `/article/`
- **详情：** 文章链接前缀
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./配置说明.md#主题配置文件) 中进行配置。
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### autoFrontmatter
- 类型： `false | AutoFrontmatterOptions`
- 详情：
- **类型：** `false | AutoFrontmatterOptions`
- **详情：**
是否为 markdown 文件自动添加 frontmatter 配置
@ -248,9 +371,9 @@ interface BlogPostCoverStyle {
### cache
- 类型： `false | 'memory' | 'filesystem'`
- 默认值： `filesystem`
- 详情：
- **类型：** `false | 'memory' | 'filesystem'`
- **默认值：** `filesystem`
- **详情：**
是否启用 编译缓存，或配置缓存方式
@ -263,43 +386,43 @@ interface BlogPostCoverStyle {
- `'filesystem'`：使用文件系统缓存，此方式可获得相对快且稳定的启动速度，更适合内容多的项目使用
::: warning
该字段不支持在 [主题配置文件 `plume.config.js`](./配置说明.md#主题配置文件) 中进行配置。
该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
为了使缓存能够生效，您应该 **删除** `package.json` 中 `vuepress dev` 开发服务启动脚本中的 `--clean-cache` 参数。
:::
### docsRepo
- 类型： `string`
- 默认值： `''`
- 详情： 文档仓库配置, 用于生成 `Edit this page` 链接。
- **类型：** `string`
- **默认值：** `''`
- **详情：** 文档仓库配置, 用于生成 `Edit this page` 链接。
### docsBranch
- 类型： `string`
- 默认值： `''`
- 详情： 文档仓库分支配置，用于生成 `Edit this page` 链接。
- **类型：** `string`
- **默认值：** `''`
- **详情：** 文档仓库分支配置，用于生成 `Edit this page` 链接。
### docsDir
- 类型： `string`
- 默认值： `''`
- 详情： 文档仓库目录配置，用于生成 `Edit this page` 链接。
- **类型：** `string`
- **默认值：** `''`
- **详情：** 文档仓库目录配置，用于生成 `Edit this page` 链接。
### editLink
- 类型： `boolean`
- 默认值： `true`
- 详情： 是否启用 编辑链接
- **类型：** `boolean`
- **默认值：** `true`
- **详情：** 是否启用 编辑链接
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./配置说明.md#主题配置文件) 中进行配置。
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### lastUpdated
- 类型： `false | LastUpdatedOptions`
- 默认值： `{ formatOptions: { dateStyle: 'short', timeStyle: 'short' } }`
- 详情： 最后更新时间
- **类型：** `false | LastUpdatedOptions`
- **默认值：** `{ formatOptions: { dateStyle: 'short', timeStyle: 'short' } }`
- **详情：** 最后更新时间
```ts
interface LastUpdatedOptions {
@ -315,48 +438,51 @@ interface LastUpdatedOptions {
}
```
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./配置说明.md#主题配置文件) 中进行配置。
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### contributors
- 类型： `boolean | ContributorsOptions`
- 默认值： `true`
- 详情： 是否显示贡献者
- **类型：** `boolean | ContributorsOptions`
- **默认值：** `true`
- **详情：** 是否显示贡献者
更多配置请参考 [此文档](../guide/功能/文章贡献者.md)
更多配置请参考 [此文档](../guide/features/contributors.md)
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./配置说明.md#主题配置文件) 中进行配置。
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### changelog
- 类型： `boolean | ChangelogOptions`
- 默认值： `false`
- 详情： 是否显示页面变更历史
- **类型：** `boolean | ChangelogOptions`
- **默认值：** `false`
- **详情：** 是否显示页面变更历史
更多配置请参考 [此文档](../guide/功能/文章变更历史.md)
更多配置请参考 [此文档](../guide/features/changelog.md)
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./配置说明.md#主题配置文件) 中进行配置。
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
### locales
- 类型： `Record<string, PlumeThemeLocaleConfig>`
- 默认值： `{}`
- 详情： 多语言配置
- **类型：** `Record<string, ThemeLocaleData>`
- **默认值：** `{}`
- **详情：** 多语言配置
不同语言的文本配置，参考 [此文档](./多语言配置.md)
不同语言的文本配置，参考 [此文档](./locales.md)
多语言配置支持以下 [Locale](#locale-配置) 所有配置选项以控制不同语言下的主题行为。
## Locale 配置
::: tip 以下所有字段也均是基础配置字段，可以与 `locales` 等字段平级配置。
:::
### home
- 类型： `false | string`
- 默认值： `/`
- 详情：
- **类型：** `false | string`
- **默认值：** `/`
- **详情：**
首页的路径， 它将被用于：
- 导航栏中 logo的链接；
- 404页面的 *返回首页* 的链接；
@ -364,19 +490,19 @@ interface LastUpdatedOptions {
### logo
- 类型: `false | string`
- 默认值： `false`
- 详情： 导航栏中的logo。
- **默认值：** `false`
- **详情：** 导航栏中的logo。
### logoDark
- 类型 `false | string`
- 默认值： `false`
- 详情： Dark模式下，导航栏中的logo。
- **默认值：** `false`
- **详情：** Dark模式下，导航栏中的logo。
### appearance
- 类型： `boolean | 'dark' | 'force-dark`
- 默认值： `true`
- **类型：** `boolean | 'dark' | 'force-dark`
- **默认值：** `true`
是否启用 深色模式。
@ -389,9 +515,9 @@ interface LastUpdatedOptions {
### profile
- 类型： `ProfileOptions`
- 默认值： `{}`
- 详情：配置站点博主的个人信息
- **类型：** `ProfileOptions`
- **默认值：** `{}`
- **详情：**配置站点博主的个人信息
- `profile.avatar`: 头像地址，用于右侧博主信息展示
- `profile.name`: 名称， 用于右侧博主信息展示
- `profile.description`: 个人描述，用于右侧博主信息展示
@ -403,7 +529,7 @@ interface LastUpdatedOptions {
示例：
``` ts
export default {
export default defineUserConfig({
theme: plumeTheme({
profile: {
avatar: '/avatar.jpg',
@ -415,14 +541,14 @@ export default {
layout: 'right',
}
})
}
})
```
### social
- 类型： `false | SocialLink[]`
- 默认值： `false`
- 详情： 个人社交信息配置。
- **类型：** `false | SocialLink[]`
- **默认值：** `false`
- **详情：** 个人社交信息配置。
将作为 图标链接 展示在 导航栏最右侧。
@ -453,8 +579,8 @@ export default {
示例：
``` ts :no-line-numbers
export default {
``` ts
export default defineUserConfig({
theme: plumeTheme({
social: [
{ icon: 'github', link: 'https://github.com/zhangsan' },
@ -464,14 +590,14 @@ export default {
},
]
})
}
})
```
### navbarSocialInclude
- 类型： `string[]`
- 默认值： `['github', 'twitter', 'discord', 'facebook']`
- 详情：
- **类型：** `string[]`
- **默认值：** `['github', 'twitter', 'discord', 'facebook']`
- **详情：**
允许显示在导航栏的社交链接。
该配置仅在 PC 端下有效。
@ -480,11 +606,12 @@ export default {
### navbar
- 类型： `NavItem[]`
- 默认值： `[]`
- 详情： 导航栏配置。
- **类型：** `NavItem[]`
- **默认值：** `[]`
- **详情：** 导航栏配置。
为了配置导航栏元素，你可以将其设置为 导航栏数组 ，其中的每个元素是 `string` 或 `NavItem` 对象
为了配置导航栏元素，你可以将其设置为 导航栏数组 ，其中的每个元素是 `string` 或 `NavItem` 对象、
- `NavItem` 对象应该有一个 text 字段和一个 link 字段，还有一个可选的 `activeMatch` 字段。
- `string` 表示是一个页面文件路径，或者是一个页面的访问路径。
@ -517,7 +644,7 @@ type NavItem = string | {
- 示例1：
``` js
export default {
export default defineUserConfig({
theme: plumeTheme({
navbar: [
// NavbarItem
@ -532,13 +659,13 @@ type NavItem = string | {
'/bar', // 可以直接省略后缀 `.md`
],
}),
}
})
```
- 示例2：
``` js
export default {
export default defineUserConfig({
theme: plumeTheme({
navbar: [
// 嵌套 Group - 最大深度为 2
@ -572,28 +699,28 @@ type NavItem = string | {
},
],
}),
}
})
```
### notes
- 类型： `false | NotesOptions`
- 默认值： `{ link: '/note', dir: 'notes', notes: [] }`
- 详情：
- **类型：** `false | NotesOptions`
- **默认值：** `{ link: '/note', dir: 'notes', notes: [] }`
- **详情：**
笔记配置， 笔记中的文章默认不会出现在首页文章列表
你可以将配置的notes 配置到 navbar中，以便浏览查看
详细配置请查看 [此文档](./notes配置.md)
详细配置请查看 [此文档](./notes.md)
### sidebar
- 类型： `false | SidebarMulti`
- **类型：** `false | SidebarMulti`
- 详情：
- **详情：**
侧边栏配置。**主题更推荐在 [notes 配置](./notes配置.md) 中进行侧边栏配置。**
侧边栏配置。**主题更推荐在 [notes 配置](./notes.md) 中进行侧边栏配置。**
当你不希望使用 `notes` 功能，但又期望给文档增加侧边栏时，可以使用此配置。
@ -655,17 +782,17 @@ interface SidebarItem {
### sidebarScrollbar
- 类型： `boolean`
- 默认值： `true`
- 详情： 是否显示侧边栏滚动条
- **类型：** `boolean`
- **默认值：** `true`
- **详情：** 是否显示侧边栏滚动条
设置为 `false` 时，仅隐藏滚动条，但不改变滚动行为。
### aside
- 类型： `boolean | 'left'`
- 默认值： `true`
- 详情：
- **类型：** `boolean | 'left'`
- **默认值：** `true`
- **详情：**
是否显示侧边栏
@ -677,9 +804,9 @@ interface SidebarItem {
### outline
- 类型： `false | number | [number, number] | 'deep'`
- 默认值： `[2, 3]`
- 详情：
- **类型：** `false | number | [number, number] | 'deep'`
- **默认值：** `[2, 3]`
- **详情：**
要显示的标题级别。
@ -695,9 +822,9 @@ interface SidebarItem {
### transition
- 类型： `boolean | TransitionOptions`
- 默认值： `true`
- 详情：
- **类型：** `boolean | TransitionOptions`
- **默认值：** `true`
- **详情：**
是否启用过渡动画。
@ -728,51 +855,51 @@ interface SidebarItem {
### footer
- 类型： `false | { message: string; copyright: string }`
- 默认值： `false`
- 详情：页脚配置。
- **类型：** `false | { message: string; copyright: string }`
- **默认值：** `false`
- **详情：**页脚配置。
### bulletin
- 类型： `boolean | BulletinOptions`
- 默认值： `false`
- 详情： 公告板配置
- **类型：** `boolean | BulletinOptions`
- **默认值：** `false`
- **详情：** 公告板配置
详情请参考 [公告板](../guide/功能/公告板.md)
详情请参考 [公告板](../guide/features/bulletin.md)
### editLinkPattern
- 类型： `string`
- 默认值： `''`
- 详情： 编辑链接的正则表达式
- **类型：** `string`
- **默认值：** `''`
- **详情：** 编辑链接的正则表达式
示例： `':repo/edit/:branch/:path'`
### copyright
- 类型： `boolean | CopyrightLicense | CopyrightOptions`
- 默认值： `false`
- 详情： 版权配置
- **类型：** `boolean | CopyrightLicense | CopyrightOptions`
- **默认值：** `false`
- **详情：** 版权配置
详情请参考 [版权所有](../guide/功能/文章版权所有.md)
详情请参考 [版权所有](../guide/features/copyright.md)
### prevPage
- 类型： `boolean`
- 默认值： `true`
- 详情： 是否显示上一页
- **类型：** `boolean`
- **默认值：** `true`
- **详情：** 是否显示上一页
### nextPage
- 类型： `boolean`
- 默认值： `true`
- 详情： 是否显示下一页
- **类型：** `boolean`
- **默认值：** `true`
- **详情：** 是否显示下一页
### createTime
- 类型： `boolean | 'only-blog'`
- 默认值： `true`
- 详情： 是否显示创建时间
- **类型：** `boolean | 'only-blog'`
- **默认值：** `true`
- **详情：** 是否显示创建时间
- `false` - 不显示
- `'only-blog'` - 只显示在博客文章页面

141
docs/notes/theme/config/配置说明.md
View File

@ -1,141 +0,0 @@
---
title: 配置说明
author: pengzhanbo
createTime: 2024/03/02 10:48:14
permalink: /config/intro/
---
## VuePress 配置文件
### 概述
VuePress 站点的基本配置文件是 `.vuepress/config.js` ，但也同样支持 TypeScript 配置文件。
你可以使用 `.vuepress/config.ts` 来得到更好的类型提示。
具体而言，VuePress 对于配置文件的路径有着约定（按照优先顺序）：
当前工作目录 `cwd` 下：
- `vuepress.config.ts`
- `vuepress.config.js`
- `vuepress.config.mjs`
源文件目录 `sourceDir` 下：
- `.vuepress/config.ts`
- `.vuepress/config.js`
- `.vuepress/config.mjs`
基础配置文件示例：
```ts
import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
bundler: viteBundler(),
theme: plumeTheme({
// 在这里配置主题
}),
lang: 'zh-CN',
title: '你好， VuePress ！',
description: '这是我的第一个 VuePress 站点',
})
```
### 类型
在 VuePress 中，有三种配置类型:
- 站点配置: 这是你在 配置文件 中直接导出的对象
- 主题配置: 传递给 `plumeTheme` 的对象参数
- 页面配置: 由在页面顶部基于 YAML 语法的 Frontmatter 提供
## 主题配置文件
### 概述
一般我们使用 `.vuepress/config.js` 或者 `.vuepress/config.ts` 来配置主题。
```ts
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
// 在这里配置主题
}),
})
```
但是当我们已经启动了 VuePress 服务，对该文件的修改会导致 VuePres 服务重启，然后站点进行全量刷新，
这可能需要等待一段时间才能恢复， 如果你的站点内容不多还能够接受，
而对于一些较大的站点，可能需要等待漫长的时间。
特别是当我们频繁修改，或者修改的间隔较短时，很容易使 VuePress 服务 崩溃，我们不得不手动重启。
**这给我们在编写站点内容时带来的极大的不便。**
为了解决这一问题，主题支持在 单独的 主题配置文件中进行配置。
**对该文件的修改将通过热更新的方式实时生效。**
### 配置
你可以直接在 [VuePress 配置文件](#vuepress-配置文件) 相同的路径下创建一个 `plume.config.js` 文件，这样就可以在该文件中进行主题配置。
你也可以使用 TypeScript 来创建一个 `plume.config.ts` 文件，以获得更好的类型提示。
::: file-tree
- docs
- .vuepress
- config.ts
- **plume.config.ts**
:::
::: code-tabs
@tab plume.config.ts
```ts
import { defineThemeConfig } from 'vuepress-theme-plume'
import navbar from './navbar'
export default defineThemeConfig({
// 在这里配置主题
profile: {
name: 'Your name',
},
navbar,
})
```
:::
主题提供了 `defineThemeConfig(config)` 函数，为主题使用者提供主题配置的类型帮助。
你可以直接在这个文件中配置除了 `plugins` 字段外的其他配置。
### 自定义配置文件路径
如果你不希望按照 VuePress 默认的配置文件路径管理你的主题配置文件，
你也可以在 VuePress 配置文件中指定自己的主题配置文件路径。
```ts
import path from 'node:path'
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
// 在这里定义自己的主题配置文件路径
configFile: path.join(__dirname, 'custom/config.ts'), // [!code ++]
}),
})
```
::: tip
更推荐 使用 主题配置文件 来单独管理 主题配置，你不必再为频繁修改配置而一直等待
VuePress 重启。
:::

0
docs/notes/theme/guide/api-客户端.md → docs/notes/theme/guide/api/client.md
View File

10
docs/notes/theme/guide/api-node.md → docs/notes/theme/guide/api/node.md
View File

@ -17,19 +17,19 @@ __options__ : `PlumeThemeOptions`
主题配置函数。
查看 [主题配置](../config/主题配置.md) 了解更多。
查看 [主题配置](../config/theme.md) 了解更多。
## `defineThemeConfig(options)`
主题配置帮助函数，用于在单独的 `plume.config.ts` 中使用。
查看 [主题配置文件](../config/配置说明.md#主题配置文件) 了解更多。
查看 [主题配置文件](../config/intro.md#主题配置文件) 了解更多。
## `defineNavbarConfig(options)`
主题导航栏配置类型帮助函数。
查看 [主题配置](../config/导航栏配置.md) 了解更多。
查看 [主题配置](../config/navbar.md) 了解更多。
## `defineNotesConfig(options)`
@ -37,7 +37,7 @@ __options:__ `NotesOptions`
主题 notes 配置类型帮助函数
查看 [主题配置](../config/notes配置.md) 了解更多。
查看 [主题配置](../config/notes.md) 了解更多。
## `defineNoteConfig(options)`
@ -45,4 +45,4 @@ __options:__ `NoteItem`
主题 单个 note (`NoteItem`) 配置类型帮助函数
查看 [主题配置](../config/notes配置.md) 了解更多。
查看 [主题配置](../config/notes.md) 了解更多。

24
docs/notes/theme/guide/图表/chart.md → docs/notes/theme/guide/chart/chart.md
View File

@ -1,14 +1,15 @@
---
title: chart.js
author: pengzhanbo
createTime: 2024/03/16 19:33:49
icon: solar:chart-bold
permalink: /guide/chart/chartjs/
---
[chart.js]: https://www.chartjs.org/docs/latest/
## 概述
主题支持在 文章中 嵌入由 [chart.js](https://www.chartjs.org/docs/latest/) 图表。
主题支持在 文章中 嵌入由 [chart.js] 图表。
该功能由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/) 提供支持。
@ -16,7 +17,7 @@ permalink: /guide/chart/chartjs/
主题默认不启用该功能。
你需要在你的项目中安装 [chart.js](https://www.chartjs.org/docs/latest/) 库。
你需要在你的项目中安装 [chart.js] 库。
::: npm-to
@ -28,23 +29,16 @@ npm install chart.js
然后在 `.vuepress/config.ts` 配置文件中，启用该功能：
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownEnhance: {
chart: true, // [!code hl]
},
}
markdown: {
chartjs: true, // [!code ++]
},
})
})
```
:::
## 语法
````md
@ -57,7 +51,7 @@ export default defineUserConfig({
:::
````
图标配置请查看 [Chart.js文档](https://www.chartjs.org/docs/latest/) 。
图标配置请查看 [chart.js] 文档 。
## 示例

16
docs/notes/theme/guide/图表/echarts.md → docs/notes/theme/guide/chart/echarts.md
View File

@ -1,6 +1,5 @@
---
title: ECharts
author: pengzhanbo
createTime: 2024/03/16 19:34:03
icon: raphael:piechart
permalink: /guide/chart/echarts/
@ -28,23 +27,16 @@ npm install echarts
然后在 `.vuepress/config.ts` 配置文件中，启用该功能：
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownEnhance: {
echarts: true, // [!code hl]
},
}
markdown: {
echarts: true, // [!code ++]
},
})
})
```
:::
::: note
以下文档 Fork 自 [vuepress-theme-hope](https://theme-hope.vuejs.press/zh/guide/markdown/chart/echarts.html),
遵循 [MIT](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE) 许可证。

16
docs/notes/theme/guide/图表/flowchart.md → docs/notes/theme/guide/chart/flowchart.md
View File

@ -1,6 +1,5 @@
---
title: flowchart
author: pengzhanbo
createTime: 2024/03/16 19:34:31
icon: f7:flowchart
permalink: /guide/chart/flowchart/
@ -28,23 +27,16 @@ npm install flowchart.ts
然后在 `.vuepress/config.ts` 配置文件中，启用该功能：
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownEnhance: {
flowchart: true, // [!code hl]
},
}
markdown: {
flowchart: true, // [!code ++]
},
})
})
```
:::
::: note
以下文档 Fork 自 [vuepress-theme-hope](https://theme-hope.vuejs.press/zh/guide/markdown/chart/flowchart.html),
遵循 [MIT](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE) 许可证。

17
docs/notes/theme/guide/图表/markmap.md → docs/notes/theme/guide/chart/markmap.md
View File

@ -1,5 +1,5 @@
---
title: 思维导图
title: markmap
icon: ri:mind-map
createTime: 2025/03/01 14:35:59
permalink: /guide/chart/markmap/
@ -27,23 +27,16 @@ npm i markmap-lib markmap-toolbar markmap-view
然后在 `.vuepress/config.ts` 配置文件中，启用该功能：
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownEnhance: {
markmap: true, // [!code hl]
},
}
markdown: {
markmap: true, // [!code ++]
},
})
})
```
:::
::: note
以下文档 Fork 自 [vuepress-theme-hope](https://theme-hope.vuejs.press/zh/guide/markdown/chart/markmap.html),
遵循 [MIT](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE) 许可证。

16
docs/notes/theme/guide/图表/mermaid.md → docs/notes/theme/guide/chart/mermaid.md
View File

@ -1,6 +1,5 @@
---
title: mermaid
author: pengzhanbo
createTime: 2024/03/16 19:34:16
icon: file-icons:mermaid
permalink: /guide/chart/mermaid/
@ -29,23 +28,16 @@ npm install mermaid
然后在 `.vuepress/config.ts` 配置文件中，启用该功能：
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownEnhance: {
mermaid: true, // [!code hl]
},
}
markdown: {
mermaid: true, // [!code ++]
},
})
})
```
:::
::: note
以下文档 Fork 自 [vuepress-theme-hope](https://theme-hope.vuejs.press/zh/guide/markdown/chart/mermaid.html),
遵循 [MIT](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE) 许可证。

15
docs/notes/theme/guide/图表/plantuml.md → docs/notes/theme/guide/chart/plantuml.md
View File

@ -17,23 +17,16 @@ permalink: /guide/za6z9xie/
在 `.vuepress/config.ts` 配置文件中，启用该功能：
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownEnhance: {
plantuml: true, // [!code hl]
},
}
markdown: {
plantuml: true, // [!code ++]
},
})
})
```
:::
::: note
以下文档 Fork 自 [vuepress-theme-hope](https://theme-hope.vuejs.press/zh/guide/markdown/chart/plantuml.html),
遵循 [MIT](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE) 许可证。

17
docs/notes/theme/guide/代码/代码组.md → docs/notes/theme/guide/code/code-tabs.md
View File

@ -1,6 +1,5 @@
---
title: 代码组
author: pengzhanbo
icon: fluent:group-list-20-filled
createTime: 2024/04/04 10:36:59
permalink: /guide/code/group/
@ -134,7 +133,7 @@ export default config
主题支持在 代码块分组的组标题上显示图标。 图标根据 标题，即 `@tab 标题` 进行解析适配不同的图标
默认解析规则与 [文件树](../markdown/进阶.md#文件树) 一致。
默认解析规则与 [文件树](../markdown/file-tree.md) 一致。
如， `pnpm / yarn / npm` 分组图标：
@ -200,18 +199,16 @@ npm install
### 配置
您可以通过 `plugins.mdPower.codeTabs` 控制分组图标的行为：
您可以通过 `markdown.codeTabs` 控制分组图标的行为：
```ts
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownPower: {
codeTabs: {
icon: true, // CodeTabsOptions
}
},
}
markdown: {
codeTabs: {
icon: true, // CodeTabsOptions
}
},
})
})
```

55
docs/notes/theme/guide/代码/特性支持.md → docs/notes/theme/guide/code/features.md
View File

@ -1,6 +1,5 @@
---
title: 特性支持
author: pengzhanbo
icon: majesticons:code-block-line
createTime: 2024/04/04 10:41:28
permalink: /guide/code/features/
@ -8,25 +7,42 @@ permalink: /guide/code/features/
主题在代码高亮功能上，进一步支持了更多的特性，它们能够帮助你的代码块更加具备表达力。
## 代码块标题 <Badge type="tip" text="1.0.0-rc.136 +" />
在 <code>\`\`\` [lang]</code> 之后添加 `title="xxxx"` ，可以为当前代码块添加标题
**输入：**
````md {1}
```json title="package.json"
{
"name": "vuepress-theme-plume"
}
```
````
**输出：**
```json title="package.json"
{
"name": "vuepress-theme-plume"
}
```
## 代码行号
主题默认显示代码行号，它通过 `plugins.shiki.line-numbers` 来控制。
主题默认显示代码行号，它通过 `codeHighlighter.line-numbers` 来控制。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
shiki: { lineNumbers: true }
codeHighlighter: {
lineNumbers: true, // [!code ++]
}
})
})
```
:::
你还可以通过 `:line-numbers` / `:no-line-numbers` 来控制当前代码块是否显示代码行号。
还可以通过在 `:line-numbers` 之后添加 `=` 来自定义起始行号，例如 `:line-numbers=2` 表示代码块中的行号从 `2` 开始。
@ -318,23 +334,18 @@ console.log(options.foo) // 这个不会被高亮显示
<!-- @include: ../../snippet/whitespace.snippet.md -->
还可以在 `theme.plugins.shiki` 中全局启用 `whitespace` 功能：
还可以在 `codeHighlighter` 中全局启用 `whitespace` 功能：
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
shiki: { whitespace: true }
codeHighlighter: {
whitespace: true, // [!code ++]
}
})
})
```
:::
全局启用时，可以使用 `:no-whitespace` 来单独为某一代码块禁用 `whitespace` 功能。
## 折叠代码块
@ -471,7 +482,7 @@ body > div {
}
```
还可以在 `theme.plugins.shiki` 中全局启用 `collapsed-lines` 功能：
还可以在 `codeHighlighter` 中全局启用 `collapsed-lines` 功能：
::: code-tabs
@tab .vuepress/config.ts
@ -479,8 +490,8 @@ body > div {
```ts
export default defineUserConfig({
theme: plumeTheme({
plugins: {
shiki: { collapsedLines: true }
codeHighlighter: {
collapsedLines: true // [!code ++]
}
})
})

1
docs/notes/theme/guide/代码/导入代码.md → docs/notes/theme/guide/code/import.md
View File

@ -1,6 +1,5 @@
---
title: 导入代码
author: pengzhanbo
icon: mdi:import
createTime: 2024/04/04 10:39:22
permalink: /guide/code/import/

14
docs/notes/theme/guide/代码/介绍.md → docs/notes/theme/guide/code/intro.md
View File

@ -67,10 +67,8 @@ Theme Plume 默认为 代码块使用的主题配置：
```ts
export default defineUserConfig({
theme: plumeTheme({
plugins: {
shiki: {
themes: { light: 'vitesse-light', dark: 'vitesse-dark' }, // [!code highlight]
}
codeHighlighter: {
themes: { light: 'vitesse-light', dark: 'vitesse-dark' }, // [!code highlight]
}
})
})
@ -81,11 +79,11 @@ export default defineUserConfig({
## 更多支持
得益于 [Shiki](https://shiki.style/) 的强大能力，Theme Plume 还为 代码块
提供了 更多的 [特性支持](./特性支持.md)，它们让 代码块具备更强的表达能力。
提供了 更多的 [特性支持](./features.md)，它们让 代码块具备更强的表达能力。
同时，为了方便 更好的 完成 代码演示，Theme Plume 还提供了嵌入 [CodePen](../代码演示/codepen.md)，
[Js Fiddle](../代码演示/jsFiddle.md)，[Code Sandbox](../代码演示/codeSandbox.md)，
[Replit](../代码演示/replit.md) 的语法支持，你可以很方便的嵌入代码演示。
同时，为了方便 更好的 完成 代码演示，Theme Plume 还提供了嵌入 [CodePen](../repl/codepen.md)，
[Js Fiddle](../repl/jsFiddle.md)，[Code Sandbox](../repl/codeSandbox.md)，
[Replit](../repl/replit.md) 的语法支持，你可以很方便的嵌入代码演示。
## 示例

46
docs/notes/theme/guide/代码/twoslash.md → docs/notes/theme/guide/code/twoslash.md
View File

@ -73,22 +73,16 @@ npm i @vuepress/shiki-twoslash
在 主题配置中，启用 `twoslash` 选项。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
shiki: { twoslash: true },
codeHighlighter: {
twoslash: true,
},
}),
})
```
:::
::: important
`twoslash` 对于大多数用户而言，不是必要的功能，且 `twoslash` 相关的依赖包体积较大，
因此将 `twoslash` 的相关实现均迁移到了 `@vuepress/shiki-twoslash` 中，
@ -132,10 +126,7 @@ __相对路径__ 导入类型文件。
假设你的项目的 `tsconfig.json` 配置如下：
::: code-tabs
@tab tsconfig.json
```json
```json title="tsconfig.json"
{
"compilerOptions": {
"baseUrl": ".",
@ -146,8 +137,6 @@ __相对路径__ 导入类型文件。
}
```
:::
你可以直接在 代码块中使用 `@/` 开头的路径，导入 `src` 目录下的类型文件，如下所示：
````md
@ -162,34 +151,27 @@ const foo: Foo = 1
你可以在 `shiki.twoslash` 中配置 `compilerOptions`，来解决这个问题，如下所示：
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import path from 'node:path'
export default defineUserConfig({
theme: plumeTheme({
plugins: {
shiki: {
twoslash: {
compilerOptions: { // [!code hl:8]
paths: {
// 相对于工作目录 `process.cwd()`
'@/*': ['./src/*'],
// 使用绝对路径
'@@/*': [path.resolve(process.cwd(), './src/*')],
}
codeHighlighter: {
twoslash: {
compilerOptions: { // [!code hl:8]
paths: {
// 相对于工作目录 `process.cwd()`
'@/*': ['./src/*'],
// 使用绝对路径
'@@/*': [path.resolve(process.cwd(), './src/*')],
}
}
},
}
},
}),
})
```
:::
你可以直接在 代码块中使用 `@/` 开头的路径，导入 `src` 目录下的类型文件，如下所示：
````md

3
docs/notes/theme/guide/组件/徽章.md → docs/notes/theme/guide/components/badge.md
View File

@ -1,6 +1,5 @@
---
title: 徽章
author: pengzhanbo
icon: iconamoon:badge-light
createTime: 2024/08/18 22:45:50
permalink: /guide/components/badge/
@ -46,7 +45,7 @@ permalink: /guide/components/badge/
**输入：**
1. 在主题 [自定义样式文件](../自定义样式.md) 中，添加预定的样式：
1. 在主题 [自定义样式文件](../custom/style.md.md) 中，添加预定的样式：
```css
/* 浅色主题 */

1
docs/notes/theme/guide/组件/卡片容器.md → docs/notes/theme/guide/components/card-grid.md
View File

@ -1,6 +1,5 @@
---
title: 卡片容器
author: pengzhanbo
icon: vaadin:grid-h
createTime: 2024/08/18 23:38:33
permalink: /guide/components/card-grid/

0
docs/notes/theme/guide/组件/瀑布流容器.md → docs/notes/theme/guide/components/card-masonry.md
View File

5
docs/notes/theme/guide/组件/卡片.md → docs/notes/theme/guide/components/card.md
View File

@ -1,16 +1,15 @@
---
title: 卡片
author: pengzhanbo
icon: solar:card-broken
createTime: 2024/08/18 23:09:07
permalink: /guide/components/cark/
permalink: /guide/components/card/
---
## 概述
使用 `<Card>` 组件在页面中显示卡片。
也可以使用 markdown [卡片容器](/guide/markdown/advance/#卡片) 语法，替代 `<Card>` 组件。
也可以使用 markdown [卡片容器](../markdown/card.md) 语法，替代 `<Card>` 组件。
## Props

1
docs/notes/theme/guide/组件/首页布局容器.md → docs/notes/theme/guide/components/home-box.md
View File

@ -1,6 +1,5 @@
---
title: 首页布局容器
author: pengzhanbo
icon: tabler:container
createTime: 2024/08/18 23:49:40
permalink: /guide/components/home-box/

1
docs/notes/theme/guide/组件/图标.md → docs/notes/theme/guide/components/icon.md
View File

@ -1,6 +1,5 @@
---
title: 图标
author: pengzhanbo
icon: grommet-icons:emoji
createTime: 2024/08/18 22:58:39
permalink: /guide/components/icon/

1
docs/notes/theme/guide/组件/图片卡片.md → docs/notes/theme/guide/components/image-card.md
View File

@ -1,6 +1,5 @@
---
title: 图片卡片
author: pengzhanbo
icon: fa:photo
createTime: 2024/08/18 23:35:51
permalink: /guide/components/image-card/

1
docs/notes/theme/guide/组件/链接卡片.md → docs/notes/theme/guide/components/link-card.md
View File

@ -1,6 +1,5 @@
---
title: 链接卡片
author: pengzhanbo
icon: solar:card-send-linear
createTime: 2024/08/18 23:14:00
permalink: /guide/components/link-card/

1
docs/notes/theme/guide/组件/npmBadge.md → docs/notes/theme/guide/components/npm-badge.md
View File

@ -1,6 +1,5 @@
---
title: Npm 徽章
author: pengzhanbo
icon: akar-icons:npm-fill
createTime: 2024/07/26 22:07:23
permalink: /guide/components/npm-badge/

18
docs/notes/theme/guide/组件/隐秘文本.md → docs/notes/theme/guide/components/plot.md
View File

@ -1,6 +1,5 @@
---
title: “隐秘”文本
author: pengzhanbo
icon: lets-icons:hide-eye
createTime: 2024/08/18 23:02:39
permalink: /guide/components/plot/
@ -8,27 +7,20 @@ permalink: /guide/components/plot/
## 概述
使用 `<Plot>` 组件显示 [“隐秘”文本](../markdown/隐秘文本.md) ，能够更灵活的控制行为。
使用 `<Plot>` 组件显示 [“隐秘”文本](../markdown/plot.md) ，能够更灵活的控制行为。
该组件默认不启用，你需要在 theme 配置中启用。
::: code-tabs
@tab .vuepress/config.ts
```ts :no-line-numbers
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownPower: {
plot: true,
},
}
markdown: {
plot: true,
},
})
})
```
:::
## Props
| 名称 | 类型 | 默认值 | 说明 |

8
docs/notes/theme/guide/组件/repoCard.md → docs/notes/theme/guide/components/repo-card.md
View File

@ -1,6 +1,5 @@
---
title: Repo 卡片
author: pengzhanbo
icon: octicon:repo-16
createTime: 2024/07/26 21:11:56
permalink: /guide/components/github-repo-card/
@ -30,10 +29,7 @@ import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
注册为全局组件：
::: code-tabs
@tab .vuepress/client.ts
```ts
```ts title=".vuepress/client.ts"
import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
import { defineClientConfig } from 'vuepress/client'
@ -44,8 +40,6 @@ export default defineClientConfig({
})
```
:::
全局组件可在 其他任意 markdown 文件中使用
```md

24
docs/notes/theme/guide/组件/轮播图.md → docs/notes/theme/guide/components/swiper.md
View File

@ -14,20 +14,7 @@ badge: v1.0.0-rc.98 +
使用该组件，首先需要手动安装 `swiper` 库：
::: code-tabs
@tab pnpm
```sh
pnpm add swiper
```
@tab yarn
```sh
yarn add swiper
```
@tab npm
::: npm-to
```sh
npm install swiper
@ -37,7 +24,7 @@ npm install swiper
然后，手动导入 `Swiper` 组件：
```md :no-line-numbers
```md
<!-- 在 markdown 中导入 -->
<script setup>
import Swiper from 'vuepress-theme-plume/features/Swiper.vue'
@ -49,10 +36,7 @@ import Swiper from 'vuepress-theme-plume/features/Swiper.vue'
注册为全局组件：
::: code-tabs
@tab .vuepress/client.ts
```ts
```ts title=".vuepress/client.ts"
import Swiper from 'vuepress-theme-plume/features/Swiper.vue'
import { defineClientConfig } from 'vuepress/client'
@ -63,8 +47,6 @@ export default defineClientConfig({
})
```
:::
全局组件可在 其他任意 markdown 文件中使用
```md

2
docs/notes/theme/guide/组件覆写.md → docs/notes/theme/guide/custom/component-overrides.md
View File

@ -22,7 +22,7 @@ permalink: /guide/component-overrides/
如果你想要覆写 `VPFooter.vue` 组件，只需要在配置文件 `.vuepress/config.ts` 中覆盖这个别名即可：
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
import { getDirname, path } from 'vuepress/utils'

7
docs/notes/theme/guide/自定义首页.md → docs/notes/theme/guide/custom/home.md
View File

@ -11,10 +11,7 @@ permalink: /guide/custom-home/
主题通过 `frontmatter` 来定义你的首页。在 `sourceDir` 的 `README.md` 文件中，编写 `frontmatter`。
::: code-tabs
@tab README.md
```md
```md title="README.md"
---
home: true
config:
@ -22,8 +19,6 @@ config:
---
```
:::
主题 遵循 流式布局的方式来渲染首页，将 首页 在 垂直方向上划分为一个个独立的区域，每个区域应用不同的组件。
通过 `config` 属性，以 数组 的形式，可以定义多个区域。通过 `type` 字段，可以定义该区域的类型。

14
docs/notes/theme/guide/布局插槽.md → docs/notes/theme/guide/custom/slots.md
View File

@ -14,10 +14,7 @@ permalink: /guide/layout-slots/
以 `<Layout />` 为例，首先，需要创建一个 客户端配置文件： `.vuepress/client.ts`:
::: code-tabs
@tab .vuepress/client.ts
```ts
```ts title=".vuepress/client.ts"
import { defineClientConfig } from 'vuepress/client'
import Layout from './layouts/Layout.vue'
@ -28,8 +25,6 @@ export default defineClientConfig({
})
```
:::
::: info
`layouts` 中的 `Layout` 名是固定的，这是 js 的简写语法， 实际上为 `Layout: Layout`，它是实现 布局插槽的关键。
`NotFound` 也是相同的规则。
@ -39,10 +34,7 @@ export default defineClientConfig({
然后，创建一个 `.vuepress/layouts/Layout.vue`，作为布局插槽的默认组件，在该组件中引入 当前主题的 `<Layout />` 组件。
::: code-tabs
@tab .vuepress/layouts/Layout.vue
```vue {7-11}
```vue {7-11} title=".vuepress/layouts/Layout.vue"
<script setup>
import { Layout } from 'vuepress-theme-plume/client' // [!code hl]
</script>
@ -64,8 +56,6 @@ import { Layout } from 'vuepress-theme-plume/client' // [!code hl]
</style>
```
:::
也可以使用 渲染函数 实现注入内容，在 `.vuepress/client.ts` 中：
::: code-tabs

0
docs/notes/theme/guide/自定义样式.md → docs/notes/theme/guide/custom/style.md
View File

17
docs/notes/theme/guide/嵌入/artplayer.md → docs/notes/theme/guide/embed/artplayer.md
View File

@ -9,29 +9,22 @@ permalink: /guide/embed/video/artplayer/
主题提供嵌入 自定义来源视频 的功能。
该功能由 [vuepress-plugin-md-power](../../config/plugins/markdownPower.md) 提供支持。
该功能由 [vuepress-plugin-md-power](../../config/plugins/markdown-power.md) 提供支持。
## 配置
该功能默认不启用。你需要在主题配置中开启。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownPower: {
artPlayer: true,
},
}
markdown: {
artPlayer: true, // [!code ++]
},
})
})
```
:::
## 安装
该功能依赖于 `artplayer` 播放器实现，主题默认不安装该依赖，在启用 `artPlayer` 功能时，需要

17
docs/notes/theme/guide/嵌入/audioReader.md → docs/notes/theme/guide/embed/audioReader.md
View File

@ -9,7 +9,7 @@ permalink: /guide/embed/audio/reader/
主题支持在文档中嵌入 音频阅读 。
该功能由 [vuepress-plugin-md-power](../../config/plugins/markdownPower.md) 提供支持。
该功能由 [vuepress-plugin-md-power](../../config/plugins/markdown-power.md) 提供支持。
**音频阅读** 并不是一个音乐播放器，它仅是在内容中嵌入一个（ @[audioReader](https://sensearch.baidu.com/gettts?lan=en&spd=3&source=alading&text=audio) ）按钮，点击后播放一段音频。
@ -19,23 +19,16 @@ permalink: /guide/embed/audio/reader/
该功能默认不启用。你需要在主题配置中开启。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownPower: {
audioReader: true,
},
}
markdown: {
audioReader: true, // [!code ++]
},
})
})
```
:::
## markdown 语法
音频嵌入 markdown 语法是一个 行内语法，因此你可以在 markdown 的任何地方中使用。

15
docs/notes/theme/guide/嵌入/bilibili.md → docs/notes/theme/guide/embed/bilibili.md
View File

@ -15,23 +15,16 @@ permalink: /guide/embed/video/bilibili/
该功能默认不启用。你需要在主题配置中开启。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownPower: {
bilibili: true,
},
}
markdown: {
bilibili: true, // [!code ++]
},
})
})
```
:::
## 语法
简单的语法：

17
docs/notes/theme/guide/嵌入/pdf.md → docs/notes/theme/guide/embed/pdf.md
View File

@ -9,29 +9,22 @@ permalink: /guide/embed/pdf/
主题支持在 markdown 中嵌入 PDF 文件，它能够在页面中直接阅读 PDF 。
该功能由 [vuepress-plugin-md-power](../../config/plugins/markdownPower.md) 提供支持。
该功能由 [vuepress-plugin-md-power](../../config/plugins/markdown-power.md) 提供支持。
## 配置
该功能默认不启用。你需要在主题配置中开启。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownPower: {
pdf: true,
},
}
markdown: {
pdf: true, // [!code ++]
},
})
})
```
:::
## 语法
最简单的语法如下：

17
docs/notes/theme/guide/嵌入/youtube.md → docs/notes/theme/guide/embed/youtube.md
View File

@ -9,29 +9,22 @@ permalink: /guide/embed/video/youtube/
主题提供了 嵌入 Youtube 视频 的功能。
该功能由 [vuepress-plugin-md-power](../../config/plugins/markdownPower.md) 提供支持。
该功能由 [vuepress-plugin-md-power](../../config/plugins/markdown-power.md) 提供支持。
## 配置
该功能默认不启用。你需要在主题配置中开启。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownPower: {
youtube: true,
},
}
markdown: {
youtube: true, // [!code ++]
},
})
})
```
:::
## 语法
简单的语法：

42
docs/notes/theme/guide/功能/公告板.md → docs/notes/theme/guide/features/bulletin.md
View File

@ -20,10 +20,7 @@ permalink: /guide/features/bulletin/
### 配置说明
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
@ -36,8 +33,6 @@ export default defineUserConfig({
})
```
:::
```ts
interface BulletinOptions {
/**
@ -117,10 +112,7 @@ interface BulletinOptions {
当您仅需要配置 简单的公告板，仅包含一些简要的内容 时，可以直接使用 `bulletin.content` 添加内容。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
bulletin: {
@ -132,14 +124,9 @@ export default defineUserConfig({
})
```
:::
还可以声明 `bulletin.contentType` 为 `markdown` ，这可以在 `content` 中使用 markdown 语法。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
bulletin: {
@ -157,8 +144,6 @@ export default defineUserConfig({
})
```
:::
## 长内容公告
当您需要配置 长内容的公告板时，将长内容写在配置文件中会显得比较臃肿和难以阅读，
@ -205,10 +190,7 @@ export default defineUserConfig({
首先，配置 `bulletin` 的基础内容，此时您无需再配置 `bulletin.content` 或 `bulletin.contentFile` 。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
bulletin: {
@ -219,14 +201,9 @@ export default defineUserConfig({
})
```
:::
然后，在 `.vuepress/client.ts` 中注册全局组件 `BulletinContent` ，主题将会自动检索该组件并作为公告板的内容。
::: code-tabs
@tab .vuepress/client.ts
```ts
```ts title=".vuepress/client.ts"
import { defineClientConfig } from '@vuepress/client'
import BulletinContent from './components/BulletinContent.vue'
@ -237,14 +214,9 @@ export default defineClientConfig({
})
```
:::
接下来，编写 `BulletinContent.vue` 组件
::: code-tabs
@tab .vuepress/components/BulletinContent.vue
```vue
```vue title=".vuepress/components/BulletinContent.vue"
<script setup>
// 编写自定义公告内容交互
</script>
@ -260,8 +232,6 @@ export default defineClientConfig({
</style>
```
:::
## 自定义公告板样式
您可以直接通过 css 覆盖公告板的样式。

9
docs/notes/theme/guide/功能/文章变更历史.md → docs/notes/theme/guide/features/changelog.md
View File

@ -40,10 +40,7 @@ export default defineUserConfig({
在主题配置文件中启用该功能:
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
@ -61,8 +58,6 @@ export default defineUserConfig({
})
```
:::
## 配置
```ts
@ -125,7 +120,7 @@ export default defineUserConfig({
```
::: warning 注意
请确保 `changelog.repoUrl` 配置正确， 默认值为 [docsRepo](../../config/主题配置.md#docsrepo)。
请确保 `changelog.repoUrl` 配置正确， 默认值为 [docsRepo](../../config/theme.md#docsrepo)。
主题默认适配了 `github/gitlab/gitee/bitbucket` git 托管服务的相关访问地址模式。
如果您使用的是内建的托管服务或者其他，请自行配置 `commitUrlPattern`、`issueUrlPattern`、`tagUrlPattern`。

88
docs/notes/theme/guide/功能/评论.md → docs/notes/theme/guide/features/comments.md
View File

@ -1,6 +1,5 @@
---
title: 评论
author: pengzhanbo
icon: la:comment
createTime: 2024/03/04 11:58:59
permalink: /guide/features/comments/
@ -14,32 +13,25 @@ permalink: /guide/features/comments/
在本主题中，通过以下字段进行配置：
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
plugins: {
comment: {
// 服务提供商
provider: '', // "Artalk" | "Giscus" | "Twikoo" | "Waline"
// 是否默认启用评论
comment: true,
comment: {
// 服务提供商
provider: '', // "Artalk" | "Giscus" | "Twikoo" | "Waline"
// 是否默认启用评论
comment: true,
// 其它配置，根据服务提供商进行配置
// ...
}
// 其它配置，根据服务提供商进行配置
// ...
}
})
})
```
:::
### 服务提供商
[@vuepress/plugin-comment](https://ecosystem.vuejs.press/zh/plugins/blog/comment/) 支持
@ -69,6 +61,8 @@ Giscus 是一个基于 GitHub Discussion 的评论系统，启用简便。
### 准备工作
::: steps
1. 你需要创建一个公开仓库，并开启评论区，以作为评论存放的地点
2. 你需要安装 [Giscus App](https://github.com/apps/giscus)，使其有权限访问对应仓库。
@ -78,36 +72,31 @@ Giscus 是一个基于 GitHub Discussion 的评论系统，启用简便。
你只需要填写仓库和 Discussion 分类，之后滚动到页面下部的 “启用 giscus” 部分，
获取 `data-repo`, `data-repo-id`, `data-category` 和 `data-category-id` 这四个属性。
:::
### 配置
请配置 `provider: 'Giscus'` 并将 `data-repo`, `data-repo-id`, `data-category` 和 `data-category-id`
作为插件选项传入 `repo`, `repoId`, `category`, `categoryId` 。
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
plugins: {
comment: {
provider: 'Giscus', // "Artalk“ | "Giscus" | "Twikoo" | "Waline"
comment: true,
repo: 'Your_Repo', // [!code ++]
repoId: 'Your_RepoId', // [!code ++]
category: 'Your_Category', // [!code ++]
categoryId: 'Your_CategoryId', // [!code ++]
}
comment: {
provider: 'Giscus', // "Artalk“ | "Giscus" | "Twikoo" | "Waline"
comment: true,
repo: 'Your_Repo', // [!code ++]
repoId: 'Your_RepoId', // [!code ++]
category: 'Your_Category', // [!code ++]
categoryId: 'Your_CategoryId', // [!code ++]
}
})
})
```
:::
### 主题
默认情况下，Giscus 使用 `light` 或 `dark` 主题 (基于夜间模式状态)。
@ -123,29 +112,18 @@ export default defineUserConfig({
如果你想要在主题中使用 Waline， 你需要先安装 `@waline/client`。
::: code-tabs
@tab pnpm
```sh
pnpm add @waline/client
```
@tab npm
::: npm-to
```sh
npm i @waline/client
```
@tab yarn
```sh
yarn add @waline/client
```
:::
### LeanCloud 设置 (数据库)
::: steps
1. [登录](https://console.leancloud.app/login) 或 [注册](https://console.leancloud.app/register) `LeanCloud 国际版` 并进入 [控制台](https://console.leancloud.app/apps)
2. 点击左上角 [创建应用](https://console.leancloud.app/apps) 并起一个你喜欢的名字 (请选择免费的开发版):
@ -157,6 +135,8 @@ yarn add @waline/client
![ID 和 Key](https://ecosystem.vuejs.press/assets/leancloud-2-B5wKvXiY.png)
:::
::: warning 国内版需要完成备案接入
如果你正在使用 Leancloud 国内版 ([leancloud.cn](https://leancloud.cn))，我们推荐你切换到国际版 ([leancloud.app](https://leancloud.app))。
@ -175,6 +155,8 @@ yarn add @waline/client
[![Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwalinejs%2Fwaline%2Ftree%2Fmain%2Fexample)
:::: steps
1. 点击上方按钮，跳转至 Vercel 进行 Server 端部署。
::: note
@ -215,8 +197,12 @@ yarn add @waline/client
![redeploy success](https://ecosystem.vuejs.press/images/comment/vercel-7.png)
::::
### 绑定域名 (可选)
::: steps
1. 点击顶部的 `Settings` - `Domains` 进入域名配置页
2. 输入需要绑定的域名并点击 `Add`
@ -236,6 +222,8 @@ yarn add @waline/client
![success](https://ecosystem.vuejs.press/images/comment/vercel-9.png)
:::
### 客户端
#### 使用插件
@ -252,6 +240,12 @@ yarn add @waline/client
### 评论管理 (管理端)
::: steps
1. 部署完成后，请访问 `<serverURL>/ui/register` 进行注册。首个注册的人会被设定成管理员。
1. 管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。
1. 用户也可通过评论框注册账号，登陆后会跳转到自己的档案页。
2. 管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。
3. 用户也可通过评论框注册账号，登陆后会跳转到自己的档案页。
:::

12
docs/notes/theme/guide/功能/组件.md → docs/notes/theme/guide/features/component.md
View File

@ -1,6 +1,5 @@
---
title: 组件
author: pengzhanbo
icon: radix-icons:component-2
createTime: 2024/03/06 09:42:42
outline: 2
@ -113,14 +112,11 @@ VuePress 支持在 Markdown 文件中使用 组件。
## “隐秘”文本
使用 `<Plot>` 组件显示 [“隐秘”文本](/guide/markdown/advance/#隐秘-文本) ，能够更灵活的控制行为。
使用 `<Plot>` 组件显示 [“隐秘”文本](../markdown/plot.md) ，能够更灵活的控制行为。
该组件默认不启用，你需要在 theme 配置中启用。
::: code-tabs
@tab .vuepress/config.ts
```ts :no-line-numbers
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
@ -132,8 +128,6 @@ export default defineUserConfig({
})
```
:::
### Props
| 名称 | 类型 | 默认值 | 说明 |
@ -158,7 +152,7 @@ export default defineUserConfig({
使用 `<Card>` 组件在页面中显示卡片。
也可以使用 markdown [卡片容器](/guide/markdown/advance/#卡片) 语法，替代 `<Card>` 组件。
也可以使用 markdown [卡片容器](../markdown/card.md) 语法，替代 `<Card>` 组件。
### Props

7
docs/notes/theme/guide/功能/文章贡献者.md → docs/notes/theme/guide/features/contributors.md
View File

@ -40,10 +40,7 @@ export default defineUserConfig({
在主题配置文件中启用该功能:
::: code-tabs
@tab .vuepress/config.ts
```ts
```ts title=".vuepress/config.ts"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
@ -61,8 +58,6 @@ export default defineUserConfig({
})
```
:::
## 配置
### mode

Some files were not shown because too many files have changed in this diff Show More