diff --git a/cli/package.json b/cli/package.json index f5c88a39..f357b773 100644 --- a/cli/package.json +++ b/cli/package.json @@ -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", diff --git a/cli/templates/.vuepress/config.ts.handlebars b/cli/templates/.vuepress/config.ts.handlebars index 75981f87..e962d3d4 100644 --- a/cli/templates/.vuepress/config.ts.handlebars +++ b/cli/templates/.vuepress/config.ts.handlebars @@ -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', + // }, /** * 加密功能 diff --git a/docs/.vuepress/client.ts b/docs/.vuepress/client.ts index d95666c8..2d6722ab 100644 --- a/docs/.vuepress/client.ts +++ b/docs/.vuepress/client.ts @@ -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() { diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts index 12ffa70b..ccd7bdb6 100644 --- a/docs/.vuepress/config.ts +++ b/docs/.vuepress/config.ts @@ -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' }, diff --git a/docs/.vuepress/navbar.ts b/docs/.vuepress/navbar.ts index dc402ffc..5cec6420 100644 --- a/docs/.vuepress/navbar.ts +++ b/docs/.vuepress/navbar.ts @@ -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/', }, { diff --git a/docs/.vuepress/notes/zh/theme-config.ts b/docs/.vuepress/notes/zh/theme-config.ts index 3cb2b549..514f4ed1 100644 --- a/docs/.vuepress/notes/zh/theme-config.ts +++ b/docs/.vuepress/notes/zh/theme-config.ts @@ -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', ], }, ], diff --git a/docs/.vuepress/notes/zh/theme-guide.ts b/docs/.vuepress/notes/zh/theme-guide.ts index 14616a81..1920594b 100644 --- a/docs/.vuepress/notes/zh/theme-guide.ts +++ b/docs/.vuepress/notes/zh/theme-guide.ts @@ -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', ], }, ], diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts index 631ad842..da4dbd98 100644 --- a/docs/.vuepress/theme.ts +++ b/docs/.vuepress/theme.ts @@ -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 }, }) diff --git a/docs/.vuepress/themes/components/CanIUseConfig.vue b/docs/.vuepress/themes/components/CanIUseConfig.vue index 18ca97cd..751de084 100644 --- a/docs/.vuepress/themes/components/CanIUseConfig.vue +++ b/docs/.vuepress/themes/components/CanIUseConfig.vue @@ -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); diff --git a/docs/.vuepress/themes/components/Demos.vue b/docs/.vuepress/themes/components/Demos.vue index ab3feda8..f61dfe38 100644 --- a/docs/.vuepress/themes/components/Demos.vue +++ b/docs/.vuepress/themes/components/Demos.vue @@ -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; diff --git a/docs/.vuepress/themes/components/HeroTintPlateConfig.vue b/docs/.vuepress/themes/components/HeroTintPlateConfig.vue index 523f63d3..edb0836d 100644 --- a/docs/.vuepress/themes/components/HeroTintPlateConfig.vue +++ b/docs/.vuepress/themes/components/HeroTintPlateConfig.vue @@ -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; diff --git a/docs/.vuepress/themes/components/InputRange.vue b/docs/.vuepress/themes/components/InputRange.vue index daf41fb4..99534bb6 100644 --- a/docs/.vuepress/themes/components/InputRange.vue +++ b/docs/.vuepress/themes/components/InputRange.vue @@ -24,7 +24,7 @@ const value = defineModel({ ``` -::: - 也可以使用 渲染函数 实现注入内容，在 `.vuepress/client.ts` 中： ::: code-tabs diff --git a/docs/notes/theme/guide/自定义样式.md b/docs/notes/theme/guide/custom/style.md similarity index 100% rename from docs/notes/theme/guide/自定义样式.md rename to docs/notes/theme/guide/custom/style.md diff --git a/docs/notes/theme/guide/嵌入/artplayer.md b/docs/notes/theme/guide/embed/artplayer.md similarity index 95% rename from docs/notes/theme/guide/嵌入/artplayer.md rename to docs/notes/theme/guide/embed/artplayer.md index 725bb220..cd9b748c 100644 --- a/docs/notes/theme/guide/嵌入/artplayer.md +++ b/docs/notes/theme/guide/embed/artplayer.md @@ -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` 功能时，需要 diff --git a/docs/notes/theme/guide/嵌入/audioReader.md b/docs/notes/theme/guide/embed/audioReader.md similarity index 94% rename from docs/notes/theme/guide/嵌入/audioReader.md rename to docs/notes/theme/guide/embed/audioReader.md index 2d319427..e3dc2edb 100644 --- a/docs/notes/theme/guide/嵌入/audioReader.md +++ b/docs/notes/theme/guide/embed/audioReader.md @@ -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 的任何地方中使用。 diff --git a/docs/notes/theme/guide/嵌入/bilibili.md b/docs/notes/theme/guide/embed/bilibili.md similarity index 91% rename from docs/notes/theme/guide/嵌入/bilibili.md rename to docs/notes/theme/guide/embed/bilibili.md index 8dd14ea9..93903af9 100644 --- a/docs/notes/theme/guide/嵌入/bilibili.md +++ b/docs/notes/theme/guide/embed/bilibili.md @@ -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 ++] + }, }) }) ``` -::: - ## 语法 简单的语法： diff --git a/docs/notes/theme/guide/嵌入/pdf.md b/docs/notes/theme/guide/embed/pdf.md similarity index 91% rename from docs/notes/theme/guide/嵌入/pdf.md rename to docs/notes/theme/guide/embed/pdf.md index 6e84dc06..c7dfa524 100644 --- a/docs/notes/theme/guide/嵌入/pdf.md +++ b/docs/notes/theme/guide/embed/pdf.md @@ -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 ++] + }, }) }) ``` -::: - ## 语法 最简单的语法如下： diff --git a/docs/notes/theme/guide/嵌入/youtube.md b/docs/notes/theme/guide/embed/youtube.md similarity index 86% rename from docs/notes/theme/guide/嵌入/youtube.md rename to docs/notes/theme/guide/embed/youtube.md index a8f8ddca..225d86bc 100644 --- a/docs/notes/theme/guide/嵌入/youtube.md +++ b/docs/notes/theme/guide/embed/youtube.md @@ -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 ++] + }, }) }) ``` -::: - ## 语法 简单的语法： diff --git a/docs/notes/theme/guide/功能/公告板.md b/docs/notes/theme/guide/features/bulletin.md similarity index 96% rename from docs/notes/theme/guide/功能/公告板.md rename to docs/notes/theme/guide/features/bulletin.md index 397854a6..3252fc74 100644 --- a/docs/notes/theme/guide/功能/公告板.md +++ b/docs/notes/theme/guide/features/bulletin.md @@ -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" @@ -260,8 +232,6 @@ export default defineClientConfig({ ``` -::: - ## 自定义公告板样式 您可以直接通过 css 覆盖公告板的样式。 diff --git a/docs/notes/theme/guide/功能/文章变更历史.md b/docs/notes/theme/guide/features/changelog.md similarity index 97% rename from docs/notes/theme/guide/功能/文章变更历史.md rename to docs/notes/theme/guide/features/changelog.md index 9a6c7d29..6b28aef6 100644 --- a/docs/notes/theme/guide/功能/文章变更历史.md +++ b/docs/notes/theme/guide/features/changelog.md @@ -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`。 diff --git a/docs/notes/theme/guide/功能/评论.md b/docs/notes/theme/guide/features/comments.md similarity index 89% rename from docs/notes/theme/guide/功能/评论.md rename to docs/notes/theme/guide/features/comments.md index d5e9e4f7..c5bb7970 100644 --- a/docs/notes/theme/guide/功能/评论.md +++ b/docs/notes/theme/guide/features/comments.md @@ -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. 部署完成后，请访问 `/ui/register` 进行注册。首个注册的人会被设定成管理员。 -1. 管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。 -1. 用户也可通过评论框注册账号，登陆后会跳转到自己的档案页。 + +2. 管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。 + +3. 用户也可通过评论框注册账号，登陆后会跳转到自己的档案页。 + +::: diff --git a/docs/notes/theme/guide/功能/组件.md b/docs/notes/theme/guide/features/component.md similarity index 97% rename from docs/notes/theme/guide/功能/组件.md rename to docs/notes/theme/guide/features/component.md index d1fb9f7e..1d41e9f7 100644 --- a/docs/notes/theme/guide/功能/组件.md +++ b/docs/notes/theme/guide/features/component.md @@ -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 文件中使用 组件。 ## “隐秘”文本 -使用 `` 组件显示 [“隐秘”文本](/guide/markdown/advance/#隐秘-文本) ，能够更灵活的控制行为。 +使用 `` 组件显示 [“隐秘”文本](../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({ 使用 `` 组件在页面中显示卡片。 -也可以使用 markdown [卡片容器](/guide/markdown/advance/#卡片) 语法，替代 `` 组件。 +也可以使用 markdown [卡片容器](../markdown/card.md) 语法，替代 `` 组件。 ### Props diff --git a/docs/notes/theme/guide/功能/文章贡献者.md b/docs/notes/theme/guide/features/contributors.md similarity index 99% rename from docs/notes/theme/guide/功能/文章贡献者.md rename to docs/notes/theme/guide/features/contributors.md index 1ec41aa8..7fa59457 100644 --- a/docs/notes/theme/guide/功能/文章贡献者.md +++ b/docs/notes/theme/guide/features/contributors.md @@ -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 diff --git a/docs/notes/theme/guide/功能/代码复制.md b/docs/notes/theme/guide/features/copy-code.md similarity index 97% rename from docs/notes/theme/guide/功能/代码复制.md rename to docs/notes/theme/guide/features/copy-code.md index 18af6c27..ffe4d884 100644 --- a/docs/notes/theme/guide/功能/代码复制.md +++ b/docs/notes/theme/guide/features/copy-code.md @@ -1,6 +1,5 @@ --- title: 代码复制 -author: pengzhanbo icon: ph:code createTime: 2024/03/04 09:59:29 permalink: /guide/features/copy-code/ diff --git a/docs/notes/theme/guide/功能/文章版权所有.md b/docs/notes/theme/guide/features/copyright.md similarity index 94% rename from docs/notes/theme/guide/功能/文章版权所有.md rename to docs/notes/theme/guide/features/copyright.md index 3f192bb3..e42c1701 100644 --- a/docs/notes/theme/guide/功能/文章版权所有.md +++ b/docs/notes/theme/guide/features/copyright.md @@ -64,17 +64,14 @@ import VPCopyright from '@theme/VPCopyright.vue' 这些信息将显示在文章的底部。 -::: tip 使用此功能建议同时启用 [贡献者](./文章贡献者.md) 功能。对于原创文章，主题会自动将文章的第一位贡献者作为版权所有者。你也可以在文章 frontmatter 中手动指定版权所有者。 +::: tip 使用此功能建议同时启用 [贡献者](./contributors.md) 功能。对于原创文章，主题会自动将文章的第一位贡献者作为版权所有者。你也可以在文章 frontmatter 中手动指定版权所有者。 ::: ## 全局配置 您可以通过以下配置为您的站点的所有文章，声明版权许可证为 `CC-BY-4.0`: -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" import { defineUserConfig } from 'vuepress' import { plumeTheme } from 'vuepress-theme-plume' @@ -85,14 +82,9 @@ export default defineUserConfig({ }) ``` -::: - 您可以通过以下配置为您的站点的所有文章 声明自定义的版权许可证: -::: code-tabs -@tab .vuepress/config.ts - -```ts :no-line-numbers +```ts :no-line-numbers title=".vuepress/config.ts" import { defineUserConfig } from 'vuepress' import { plumeTheme } from 'vuepress-theme-plume' @@ -108,8 +100,6 @@ export default defineUserConfig({ }) ``` -::: - **配置类型：** ```ts diff --git a/docs/notes/theme/guide/功能/加密.md b/docs/notes/theme/guide/features/encryption.md similarity index 94% rename from docs/notes/theme/guide/功能/加密.md rename to docs/notes/theme/guide/features/encryption.md index 1af12d73..00a76b1f 100644 --- a/docs/notes/theme/guide/功能/加密.md +++ b/docs/notes/theme/guide/features/encryption.md @@ -1,6 +1,5 @@ --- title: 加密 -author: pengzhanbo icon: mdi:encryption-outline createTime: 2024/03/04 15:58:48 permalink: /guide/features/encryption/ @@ -24,10 +23,7 @@ permalink: /guide/features/encryption/ 在 主题配置中，添加 `encrypt` 选项。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" import { defineUserConfig } from 'vuepress' import { plumeTheme } from 'vuepress-theme-plume' @@ -40,18 +36,13 @@ export default defineUserConfig({ }) ``` -::: - ## 全站加密 有些情况下，你可能 需要对 全站进行加密。 因此，你可以通过 `encrypt.global` 选项配置全站加密。 然后，通过配置 `encrypt.admin` 选项，设置一个或多个密码。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ encrypt: { @@ -62,17 +53,12 @@ export default defineUserConfig({ }) ``` -::: - ## 部分加密 大多数情况下，你可能只需需要 加密 某一篇文章、某一个目录 等。 因此，你可以通过 `encrypt.rules` 选项配置部分加密。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ encrypt: { @@ -93,8 +79,6 @@ export default defineUserConfig({ }) ``` -::: - `encrypt.rules` 的 **键** 将作为 匹配规则，**值** 将作为 该规则对应的密码，可以设置 一个或多个密码。 :::tip 说明 @@ -143,10 +127,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' @@ -163,5 +144,3 @@ export default defineUserConfig({ }) }) ``` - -::: diff --git a/docs/notes/theme/guide/功能/友情链接页.md b/docs/notes/theme/guide/features/friend-links.md similarity index 95% rename from docs/notes/theme/guide/功能/友情链接页.md rename to docs/notes/theme/guide/features/friend-links.md index 9f157034..c5c3ae4c 100644 --- a/docs/notes/theme/guide/功能/友情链接页.md +++ b/docs/notes/theme/guide/features/friend-links.md @@ -1,6 +1,5 @@ --- title: 友情链接页 -author: pengzhanbo icon: carbon:friendship createTime: 2024/03/03 22:44:28 permalink: /guide/friend-links/ @@ -13,10 +12,7 @@ permalink: /guide/friend-links/ 在你的 `{sourceDir}/` 目录下，创建 任意 `*.md` 文件，比如 `friends.md` 文件。 然后在这个文件中，通过 `frontmatter` 配置它。 -::: code-tabs -@tab friends.md - -```md +```md title="friends.md" --- friends: true title: 友情链接 @@ -36,8 +32,6 @@ list: --- ``` -::: - 主题会根据 配置信息 生成友情链接页。 如果未配置 `permalink` ，默认为 `/friends/`。 你需要自行将 友情链接页 的入口链接 配置到 `navbar` 的合适的位置中。 diff --git a/docs/notes/theme/guide/功能/图标.md b/docs/notes/theme/guide/features/icon.md similarity index 85% rename from docs/notes/theme/guide/功能/图标.md rename to docs/notes/theme/guide/features/icon.md index 845c9b6c..e9748b75 100644 --- a/docs/notes/theme/guide/功能/图标.md +++ b/docs/notes/theme/guide/features/icon.md @@ -1,7 +1,6 @@ --- title: 图标 icon: raphael:smile2 -author: pengzhanbo createTime: 2024/07/22 10:45:47 permalink: /guide/features/icon/ --- @@ -10,12 +9,12 @@ permalink: /guide/features/icon/ 主题支持 [iconify](https://icon-sets.iconify.design/) 的所有图标，并提供了不同的方式来使用它们： -- [导航栏图标](../../config/导航栏配置.md#配置) -- [侧边栏图标](../../guide/知识笔记.md#侧边栏图标) +- [导航栏图标](../../config/navbar.md#配置) +- [侧边栏图标](../../guide/document.md#侧边栏图标) - [图标组件](#图标组件) -- [图标语法糖](../../guide/markdown/进阶.md#iconify-图标) -- [文件树图标](../../guide/markdown/进阶.md#文件树) -- [代码分组标题图标](../代码/代码组.md#分组标题图标) +- [图标语法糖](../../guide/markdown/icons.md) +- [文件树图标](../../guide/markdown/file-tree.md) +- [代码分组标题图标](../code/code-tabs.md#分组标题图标) ::: tip 主题对图标的优化 上述的不同的使用图标的方式，主题在内部都采取了相同的解析策略，即使您在不同的位置使用了相同的图标， @@ -77,11 +76,11 @@ npm install @iconify/json ## markdown 语法糖 -相关内容请查看 [iconify-图标 语法糖](../markdown/图标.md) +相关内容请查看 [iconify-图标 语法糖](../markdown/icons.md) --- ::: tip 说明 -[navbar](../../config/主题配置.md#navbar) 配置和 [notes](../../config/主题配置.md#notes) 配置 +[navbar](../../config/theme.md#navbar) 配置和 [notes](../../config/theme.md#notes) 配置 中的 `icon` 选项，也支持传入 iconify 图标名，并且当安装了 `@iconify/json`，也会自动解析为本地图标资源。 ::: diff --git a/docs/notes/theme/guide/功能/内容搜索.md b/docs/notes/theme/guide/features/search.md similarity index 93% rename from docs/notes/theme/guide/功能/内容搜索.md rename to docs/notes/theme/guide/features/search.md index 16f99e2d..d62c5d32 100644 --- a/docs/notes/theme/guide/功能/内容搜索.md +++ b/docs/notes/theme/guide/features/search.md @@ -1,6 +1,5 @@ --- title: 内容搜索 -author: pengzhanbo icon: material-symbols:search createTime: 2024/03/04 09:58:39 permalink: /guide/features/content-search/ @@ -24,26 +23,20 @@ permalink: /guide/features/content-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({ - plugins: { - search: { - // more options - } + search: { // [!code ++:4] + provider: 'local', + // more options } }) }) ``` -::: - 该插件会根据你的页面，在本地生成搜索索引，然后在用户访问站点时加载搜索索引文件。 换句话说，这是一个轻量级的内置搜索能力，不会进行任何外部请求。 @@ -56,26 +49,20 @@ 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' export default defineUserConfig({ theme: plumeTheme({ - plugins: { - docsearch: { - // more options - } + search: { // [!code ++:4] + provider: 'algolia', + // more options } }) }) ``` -::: - ### 获取搜索索引 你需要 [提交你的网站 URL](https://docsearch.algolia.com/apply/) 来加入 DocSearch 项目。 @@ -230,24 +217,18 @@ new Crawler({ 以下是本主题使用的配置： -::: 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: { - docsearch: { - appId: 'YOUR_APP_ID', // [!code highlight] - apiKey: 'YOUR_API_KEY', // [!code highlight] - indexName: 'YOUR_INDEX_NAME', // [!code highlight] - } + search: { // [!code ++:6] + provider: 'algolia', + appId: 'YOUR_APP_ID', + apiKey: 'YOUR_API_KEY', + indexName: 'YOUR_INDEX_NAME', } }) }) ``` - -::: diff --git a/docs/notes/theme/guide/功能/seo.md b/docs/notes/theme/guide/features/seo.md similarity index 98% rename from docs/notes/theme/guide/功能/seo.md rename to docs/notes/theme/guide/features/seo.md index 4e3c7ea7..9882fb30 100644 --- a/docs/notes/theme/guide/功能/seo.md +++ b/docs/notes/theme/guide/features/seo.md @@ -1,6 +1,5 @@ --- title: SEO -author: pengzhanbo icon: tabler:seo createTime: 2024/03/02 14:46:25 permalink: /guide/seo/ @@ -11,7 +10,7 @@ permalink: /guide/seo/ 主题提供了开箱即用的配置，为 站点 启用 SEO 优化功能。 要启用它，需要进行以下配置： -```js +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ hostname: 'http://your_site_url', @@ -21,7 +20,7 @@ export default defineUserConfig({ 如需要自定义 SEO 优化，可以通过 `plugins.seo` 配置来实现。 -```js +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ plugins: { diff --git a/docs/notes/theme/guide/功能/sitemap.md b/docs/notes/theme/guide/features/sitemap.md similarity index 90% rename from docs/notes/theme/guide/功能/sitemap.md rename to docs/notes/theme/guide/features/sitemap.md index 5316d62e..44f8b6d5 100644 --- a/docs/notes/theme/guide/功能/sitemap.md +++ b/docs/notes/theme/guide/features/sitemap.md @@ -1,6 +1,5 @@ --- title: sitemap -author: pengzhanbo icon: mdi:sitemap-outline createTime: 2024/03/02 16:47:00 permalink: /guide/sitemap/ @@ -11,7 +10,7 @@ permalink: /guide/sitemap/ 主题提供了开箱即用的配置，为 站点生成 `sitemap.xml` 文件。 要启用它，需要进行以下配置： -```js +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ hostname: 'http://your_site_url', @@ -21,7 +20,7 @@ export default defineUserConfig({ 如需要自定义 sitemap，可以通过 `plugins.sitemap` 配置来实现。 -```js +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ plugins: { diff --git a/docs/notes/theme/guide/功能/文章水印.md b/docs/notes/theme/guide/features/watermark.md similarity index 67% rename from docs/notes/theme/guide/功能/文章水印.md rename to docs/notes/theme/guide/features/watermark.md index 3fa89a58..28ce5586 100644 --- a/docs/notes/theme/guide/功能/文章水印.md +++ b/docs/notes/theme/guide/features/watermark.md @@ -1,6 +1,5 @@ --- title: 文章水印 -author: pengzhanbo icon: material-symbols-light:branding-watermark-outline createTime: 2024/04/10 20:14:57 permalink: /guide/features/watermark/ @@ -16,41 +15,34 @@ permalink: /guide/features/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` 配置为 `true` 时， 主题全局开启水印。 @@ -58,9 +50,7 @@ export default defineUserConfig({ ```ts export default defineUserConfig({ theme: plumeTheme({ - plugins: { - watermark: true, - } + watermark: true, }) }) ``` @@ -74,11 +64,9 @@ export default defineUserConfig({ ```ts export default defineUserConfig({ theme: plumeTheme({ - plugins: { - watermark: { - // 返回结果为 true 的将启用水印，否则禁用 - enabled: page => page.path.includes('/article/'), - } + watermark: { + // 返回结果为 true 的将启用水印，否则禁用 + enabled: page => page.path.includes('/article/'), } }) }) @@ -115,16 +103,14 @@ import { plumeTheme } from 'vuepress-theme-plume' export default defineUserConfig({ theme: plumeTheme({ - plugins: { - watermark: { - watermarkOptions: { - contentType: 'image', - image: '/images/watermark.png', - width: 200, - height: 200, - imageWidth: 100, - imageHeight: 100, - } + watermark: { + watermarkOptions: { + contentType: 'image', + image: '/images/watermark.png', + width: 200, + height: 200, + imageWidth: 100, + imageHeight: 100, } } }) @@ -159,12 +145,10 @@ import { plumeTheme } from 'vuepress-theme-plume' export default defineUserConfig({ theme: plumeTheme({ - plugins: { - watermark: { - watermarkOptions: { - content: '自定义文字', - fontColor: '#fff', // 文字颜色 - } + watermark: { + watermarkOptions: { + content: '自定义文字', + fontColor: '#fff', // 文字颜色 } } }) diff --git a/docs/notes/theme/guide/markdown/缩写词.md b/docs/notes/theme/guide/markdown/abbr.md similarity index 92% rename from docs/notes/theme/guide/markdown/缩写词.md rename to docs/notes/theme/guide/markdown/abbr.md index 3e6d61e0..168dd8e5 100644 --- a/docs/notes/theme/guide/markdown/缩写词.md +++ b/docs/notes/theme/guide/markdown/abbr.md @@ -15,23 +15,16 @@ permalink: /guide/markdown/abbreviation/ 该功能默认不启用，你需要在 `theme` 配置中启用。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownPower: { - abbr: true, - }, + markdown: { + abbr: true, // [!code ++] } }) }) ``` -::: - ## 语法 在 Markdown 中，在单独的一行中使用 `*[缩写词]: 描述` 来定义缩写词，描述可以包括缩写词的定义、解释等。 diff --git a/docs/notes/theme/guide/markdown/内容注释.md b/docs/notes/theme/guide/markdown/annotation.md similarity index 97% rename from docs/notes/theme/guide/markdown/内容注释.md rename to docs/notes/theme/guide/markdown/annotation.md index ef5804a0..a176bf48 100644 --- a/docs/notes/theme/guide/markdown/内容注释.md +++ b/docs/notes/theme/guide/markdown/annotation.md @@ -15,23 +15,16 @@ permalink: /guide/markdown/annotation/ 该功能默认不启用，你需要在 `theme` 配置中启用。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownPower: { - annotation: true, - }, + markdown: { + annotation: true, // [!code ++] } }) }) ``` -::: - ## 语法 ==Annotation(注释)== 语法由两个部分组成： diff --git a/docs/notes/theme/guide/markdown/基础.md b/docs/notes/theme/guide/markdown/basic.md similarity index 99% rename from docs/notes/theme/guide/markdown/基础.md rename to docs/notes/theme/guide/markdown/basic.md index e6ccc712..c9750ee8 100644 --- a/docs/notes/theme/guide/markdown/基础.md +++ b/docs/notes/theme/guide/markdown/basic.md @@ -1,6 +1,5 @@ --- title: 基础 -author: pengzhanbo icon: fluent:markdown-20-filled createTime: 2024/03/05 11:10:39 permalink: /guide/markdown/basic/ @@ -9,9 +8,7 @@ tags: - markdown --- -::: note -此文档 Fork 自 [vuepress-theme-hope](https://theme-hope.vuejs.press/zh/cookbook/markdown/), -遵循 [MIT](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE) 许可证。 +::: note 此文档 Fork 自 [vuepress-theme-hope](https://theme-hope.vuejs.press/zh/cookbook/markdown/), 遵循 [MIT](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE) 许可证。 ::: Markdown 是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。 diff --git a/docs/notes/theme/guide/markdown/caniuse.md b/docs/notes/theme/guide/markdown/caniuse.md index 3a6a8fa3..f39c11dd 100644 --- a/docs/notes/theme/guide/markdown/caniuse.md +++ b/docs/notes/theme/guide/markdown/caniuse.md @@ -15,23 +15,16 @@ permalink: /guide/markdown/caniuse/ 此功能默认不启用，你可以在配置文件中启用它。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownPower: { - caniuse: true, // [!code highlight] - }, - } + markdownP: { + caniuse: true, // [!code ++] + }, }) }) ``` -::: - 在你的 文章 markdown文件中，使用以下格式： ``` md diff --git a/docs/notes/theme/guide/markdown/卡片.md b/docs/notes/theme/guide/markdown/card.md similarity index 100% rename from docs/notes/theme/guide/markdown/卡片.md rename to docs/notes/theme/guide/markdown/card.md diff --git a/docs/notes/theme/guide/markdown/示例容器.md b/docs/notes/theme/guide/markdown/demo-wrapper.md similarity index 100% rename from docs/notes/theme/guide/markdown/示例容器.md rename to docs/notes/theme/guide/markdown/demo-wrapper.md diff --git a/docs/notes/theme/guide/markdown/扩展.md b/docs/notes/theme/guide/markdown/extensions.md similarity index 99% rename from docs/notes/theme/guide/markdown/扩展.md rename to docs/notes/theme/guide/markdown/extensions.md index f1c78586..071fc7ce 100644 --- a/docs/notes/theme/guide/markdown/扩展.md +++ b/docs/notes/theme/guide/markdown/extensions.md @@ -1,6 +1,5 @@ --- title: 扩展 -author: pengzhanbo icon: fluent-mdl2:auto-enhance-on createTime: 2024/03/05 23:29:07 permalink: /guide/markdown/extensions/ @@ -41,14 +40,14 @@ tags: ```md [Markdown](/guide/markdown/) -[Markdown](./基础.md) +[Markdown](./basic.md) ``` 渲染为： [Markdown](/guide/markdown/) -[Markdown](./基础.md) +[Markdown](./basic.md) ### 外部链接 diff --git a/docs/notes/theme/guide/markdown/文件树.md b/docs/notes/theme/guide/markdown/file-tree.md similarity index 95% rename from docs/notes/theme/guide/markdown/文件树.md rename to docs/notes/theme/guide/markdown/file-tree.md index 92424cdd..142bbae9 100644 --- a/docs/notes/theme/guide/markdown/文件树.md +++ b/docs/notes/theme/guide/markdown/file-tree.md @@ -112,13 +112,11 @@ permalink: /guide/markdown/file-tree/ ```ts export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownPower: { - fileTree: { - icon: 'simple', // 'simple' | 'colored' - } - }, - } + markdown: { + fileTree: { + icon: 'simple', // 'simple' | 'colored' + } + }, }) }) ``` diff --git a/docs/notes/theme/guide/markdown/图标.md b/docs/notes/theme/guide/markdown/icons.md similarity index 93% rename from docs/notes/theme/guide/markdown/图标.md rename to docs/notes/theme/guide/markdown/icons.md index 3202c6f4..99739027 100644 --- a/docs/notes/theme/guide/markdown/图标.md +++ b/docs/notes/theme/guide/markdown/icons.md @@ -9,7 +9,7 @@ permalink: /guide/markdown/iconify/ 在 Markdown 文件中使用 [iconify](https://iconify.design/) 的图标。 -主题一方面提供了[``](../功能/组件.md#图标) 组件来支持在 markdown 中使用图标； +主题一方面提供了[``](../components/icon.md) 组件来支持在 markdown 中使用图标； 另一方面，主题还提供了图标的 markdown 语法，以更简单的方式，在 Markdown 中使用图标。 为了更好的使用该功能，主题推荐你安装 `@iconify/json` 依赖。主题会自动解析 `@iconify/json` 中的图标数据， diff --git a/docs/notes/theme/guide/markdown/导入文件.md b/docs/notes/theme/guide/markdown/include.md similarity index 79% rename from docs/notes/theme/guide/markdown/导入文件.md rename to docs/notes/theme/guide/markdown/include.md index b85e3f2d..0200bcf8 100644 --- a/docs/notes/theme/guide/markdown/导入文件.md +++ b/docs/notes/theme/guide/markdown/include.md @@ -6,39 +6,24 @@ permalink: /guide/markdown/include/ outline: 2 --- -::: important 注意 - -从 主题的 `v1.0.0-rc.120` 版本开始，导入文件的功能实现， -从 [`vuepress-plugin-md-enhance`](https://plugin-md-enhance.vuejs.press) -迁移到了 [`@vuepress/plugin-markdown-include`](https://ecosystem.vuejs.press/zh/plugins/markdown/markdown-include.html) 。 - -因此在主题配置中，配置项从 `plugins.markdownEnhance.include` 改名为 `plugins.markdownInclude`。 -如果你有自定义配置，请注意需要进行迁移。 -::: - ## 概述 主题支持在 Markdown 文件中导入文件切片。 导入文件 默认启用，你还可以通过配置来自定义行为。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownInclude: { - // ... options, // [!code highlight] + markdown: { + include: { // [!code ++:3] + // ... options }, } }) }) ``` -::: - ## 语法 使用 `` 导入文件。 @@ -98,16 +83,13 @@ interface IncludeOptions { } ``` -例如: 你可以使用 @src 作为源文件夹的别名。 +例如: 你可以使用 `@src` 作为源文件夹的别名。 -::: code-tabs -@tab .vuepress/config.ts - -```ts{5-11} +```ts{5-11} title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownInclude: { + markdown: { + include: { resolvePath: (file) => { if (file.startsWith('@src')) return file.replace('@src', path.resolve(__dirname, '..')) @@ -120,29 +102,22 @@ export default defineUserConfig({ }) ``` -::: - 此外，如果你想将 Markdown 文件直接放在实际文件旁边，但不希望它们呈现为页面， 你可以在 VuePress 配置中设置 `pagePatterns` 选项。 有关详细信息，请参阅 [pagePatterns](https://vuejs.press/zh/reference/config.html#pagepatterns)。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ // 现在任何带有 `.snippet.md` 扩展名的文件都不会呈现为页面 pagePatterns: ['**/*.md', '!**/*.snippet.md', '!.vuepress', '!node_modules'], // [!code ++] theme: plumeTheme({ - plugins: { - markdownInclude: true + markdown: { + include: true } }) }) ``` -::: - ## 示例 在项目中有一个 `foo.snippet.md` 文件： diff --git a/docs/notes/theme/guide/markdown/马克笔.md b/docs/notes/theme/guide/markdown/mark.md similarity index 90% rename from docs/notes/theme/guide/markdown/马克笔.md rename to docs/notes/theme/guide/markdown/mark.md index 6a05233c..73dad8bc 100644 --- a/docs/notes/theme/guide/markdown/马克笔.md +++ b/docs/notes/theme/guide/markdown/mark.md @@ -28,7 +28,7 @@ vuepress-theme-plume 是一个 ==简洁美观== 的 主题 ### 配色 -不同颜色的马克笔通过 [Markdown 属性语法](./扩展.md#属性支持) 进行设置。 +不同颜色的马克笔通过 [Markdown 属性语法](./extensions.md#属性支持) 进行设置。 在 标记语法 `==Mark==` 之后紧跟 `{.classname}`，可以为马克笔设置不同的颜色。 @@ -57,7 +57,7 @@ vuepress-theme-plume 是一个 ==简洁美观== 的 主题 ## 自定义配色 -马克笔可以通过 [自定义样式](../自定义样式.md) 的方式进行自定义。 +马克笔可以通过 [自定义样式](../custom/style.md) 的方式进行自定义。 你可以完全自定义你的马克笔颜色，包括内置的配置方案也可以进行修改。 @@ -73,7 +73,7 @@ vuepress-theme-plume 是一个 ==简洁美观== 的 主题 ### 修改内置配色 -以下是主题内置的马克笔颜色配置，你可以把它们复制到你的 [样式文件](../自定义样式.md#style-文件) 中进行修改。 +以下是主题内置的马克笔颜色配置，你可以把它们复制到你的 [样式文件](../custom/style.md#style-文件) 中进行修改。 ```css :collapsed-lines mark { @@ -132,7 +132,7 @@ mark.important { ### 添加配色 -在 [样式文件](../自定义样式.md#style-文件) 中，通过以下格式添加新的配色: +在 [样式文件](../custom/style.md#style-文件) 中，通过以下格式添加新的配色: ```css mark.classname { diff --git a/docs/notes/theme/guide/markdown/npm-to.md b/docs/notes/theme/guide/markdown/npm-to.md index 4da5a878..7deb956a 100644 --- a/docs/notes/theme/guide/markdown/npm-to.md +++ b/docs/notes/theme/guide/markdown/npm-to.md @@ -19,12 +19,12 @@ npmTo 容器用于将 npm 命令行转换为 `pnpm / yarn / deno / bun` 的命 ## 用法 -````md -::: npm-to +````md{1,5} +::: npm-to ``` sh npm install -D vuepress vuepress-theme-plume ``` -::: +::: ```` 将 包含 `npm` 命令行的代码块，包裹在 `::: npm-to` 容器中即可。 @@ -65,12 +65,12 @@ npm install -D vuepress vuepress-theme-plume **输入：** -````md -::: npm-to tabs="npm,yarn,pnpm,bun,deno" +````md {1,5} +::: npm-to tabs="npm,yarn,pnpm,bun,deno" ``` sh npm install -D vuepress vuepress-theme-plume ``` -::: +::: ```` **输出：** @@ -87,26 +87,19 @@ npm install -D vuepress vuepress-theme-plume 该功能默认不启用，您需要在 `theme` 配置中启用它。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownPower: { - // npmTo: true, // 启用，并使用默认配置 - npmTo: { - tabs: ['npm', 'yarn', 'pnpm'], // 代码块组默认显示顺序 - } - }, - } + markdown: { + // npmTo: true, // 启用，并使用默认配置 + npmTo: { + tabs: ['npm', 'yarn', 'pnpm'], // 代码块组默认显示顺序 + } + }, }) }) ``` -::: - `npm-to` 支持将 `npm` 命令行转换为 `pnpm / yarn / deno / bun` 的命令行。可以根据需求进行配置 `tabs` 。 ## 命令行支持 diff --git a/docs/notes/theme/guide/markdown/隐秘文本.md b/docs/notes/theme/guide/markdown/plot.md similarity index 91% rename from docs/notes/theme/guide/markdown/隐秘文本.md rename to docs/notes/theme/guide/markdown/plot.md index b3523cc9..1e97c6d0 100644 --- a/docs/notes/theme/guide/markdown/隐秘文本.md +++ b/docs/notes/theme/guide/markdown/plot.md @@ -23,23 +23,16 @@ permalink: /guide/markdown/plot/ 该功能默认不启用，你需要在 `theme` 配置中启用。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownPower: { - plot: true, - }, + markdown: { + plot: true, // [!code ++] } }) }) ``` -::: - `markdownPower.plot` 支持传入 `boolean | PlotOptions` 类型 ```ts @@ -77,7 +70,7 @@ interface PlotOptions { ``` 如果不想使用 非标准的 `!! !!` 标记语法，你可以将 `plot.tag` 设置为 `false` ， -然后使用 [``](/guide/features/component/#plot) 组件替代。 +然后使用 [``](../components/plot.md) 组件替代。 ## 示例 diff --git a/docs/notes/theme/guide/markdown/步骤.md b/docs/notes/theme/guide/markdown/steps.md similarity index 100% rename from docs/notes/theme/guide/markdown/步骤.md rename to docs/notes/theme/guide/markdown/steps.md diff --git a/docs/notes/theme/guide/markdown/选项组.md b/docs/notes/theme/guide/markdown/tabs.md similarity index 100% rename from docs/notes/theme/guide/markdown/选项组.md rename to docs/notes/theme/guide/markdown/tabs.md diff --git a/docs/notes/theme/guide/博客.md b/docs/notes/theme/guide/quick-start/blog.md similarity index 93% rename from docs/notes/theme/guide/博客.md rename to docs/notes/theme/guide/quick-start/blog.md index c5e6a30a..5bedf428 100644 --- a/docs/notes/theme/guide/博客.md +++ b/docs/notes/theme/guide/quick-start/blog.md @@ -8,14 +8,9 @@ tags: - 快速开始 --- - - ## 概述 -主题默认会将 [文档源目录](./项目结构.md#文档源目录) 下的，除了特定的目录（如 `notes` 目录将作为笔记所在目录）， +主题默认会将 [文档源目录](./project-structure.md#文档源目录) 下的，除了特定的目录（如 `notes` 目录将作为笔记所在目录）， 所有 md 文件作为博客文章。 主题还会根据 md 文件 所在的 文件目录结构，以 **目录名** 作为 博客文章所属的 **分类**。 @@ -27,10 +22,7 @@ import VPPostItem from 'vuepress-theme-plume/components/Blog/VPPostItem.vue' 主题默认启用 博客功能，通常您无需进行额外的配置。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ // 禁用博客功能 @@ -59,8 +51,6 @@ export default defineUserConfig({ }) ``` -::: - ## 博主信息 主题支持展示博主的基本信息。 @@ -76,10 +66,7 @@ export default defineUserConfig({ 你可以通过 `profile` 属性来设置博主头像等相关信息。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ profile: { @@ -100,8 +87,6 @@ export default defineUserConfig({ }) ``` -::: - ## 文章元数据 你可以配置展示博客文章的元数据，如标题、作者、日期、标签等。这些数据通过 `frontmatter` 配置。 @@ -131,7 +116,7 @@ tags: | coverStyle | `BlogPostCoverStyle` | `null` | 文章封面样式 | | excerpt | `boolean \| string` | '' | 文章摘要，默认通过 `` 注释生成, 传入字符串表示自定义内容，不再从正文提取 | -除了以上的字段，你还可以使用 [通用 frontmatter 配置](../config/frontmatter/basic.md) 中的字段， +除了以上的字段，你还可以使用 [通用 frontmatter 配置](../../config/frontmatter/basic.md) 中的字段， 灵活的控制当前页面的行为。 ## 文章摘要 @@ -177,10 +162,10 @@ excerpt: 自定义摘要内容 为博客文章添加 封面图，可以在 `frontmatter` 中配置 `cover`: -```md +```md{3} --- title: 标题 -cover: /images/cover.jpg # [!code ++] +cover: /images/cover.jpg --- ``` @@ -211,10 +196,10 @@ cover: /images/cover.jpg # [!code ++] 还可以为 封面图 调整 布局位置，以及 尺寸比例： -```md +```md{4-7} --- title: 文章标题 -cover: /images/cover.jpg # [!code ++:5] +cover: /images/cover.jpg coverStyle: layout: left ratio: 16:9 @@ -235,10 +220,10 @@ coverStyle: 当文章没有摘要时，可能会显得比较空，为此你还可以通过 `compact: true` 使 封面图 贴合容器边缘，使整体变得更紧凑： -```md +```md{8} --- title: 文章标题 -cover: /images/cover.jpg # [!code ++:6] +cover: /images/cover.jpg coverStyle: layout: left ratio: 16:9 @@ -259,15 +244,15 @@ coverStyle: /> -::: warning compact: true 仅在文章没有摘要时生效 +::: warning `compact: true` 仅在文章没有摘要时生效 ::: 还可以设置 封面图在 标题上方，此时变为 大图风格： -```md +```md{5} --- title: 文章标题 -cover: /images/cover.jpg # [!code ++:5] +cover: /images/cover.jpg coverStyle: layout: top ratio: 16:9 @@ -292,10 +277,7 @@ coverStyle: 虽然主题支持为每个文章的封面图使用不同的配置，出于整体布局风格的考虑，以及简化配置的目的， 主题还支持为封面图预设配置： -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ @@ -313,8 +295,6 @@ export default defineUserConfig({ }) ``` -::: - ```ts type BlogPostCoverLayout = 'left' | 'right' | 'odd-left' | 'odd-right' | 'top' @@ -375,7 +355,7 @@ interface BlogPostCoverStyle { /> -::: warning 注意 +::: warning 当在 移动设备窄屏 上时，出于视觉效果考虑，`layout` 配置强制重置为 `top`。 ::: @@ -417,28 +397,19 @@ interface BlogPostCoverStyle { - **方式一：配置 主页的 `pageLayout` 属性为 `blog`** -::: code-tabs -@tab docs/README.md - -```md +```md title="docs/README.md" --- pageLayout: blog --- ``` -::: - 此配置会直接将页面应用 博客布局，显示博客文章列表。 这是将主页修改为 博客页的 最简单的方式，但缺点是 缺少灵活性。 - **方式二：配置 主页的 `pageLayout` 属性为 `home`, 添加 `type: blog` 的首页区域类型** -::: code-tabs - -@tab docs/README.md - -```md +```md title="docs/README.md" --- pageLayout: home config: @@ -446,17 +417,11 @@ config: --- ``` -::: - 使用这种方式，你不仅可以在首页中添加 博客文章列表，还可以灵活的在页面的其他区域添加不同的内容。 比如，配置首屏为 `banner`，然后紧跟着 博客文章列表： -::: code-tabs - -@tab docs/README.md - -```md +```md title="docs/README.md" --- pageLayout: home config: @@ -465,20 +430,15 @@ config: --- ``` -::: - -更多自定义配置，请参考 [自定义首页](./自定义首页.md)。 +更多自定义配置，请参考 [自定义首页](../custom/home.md)。 当使用以上两种方式 将首页配置为 博客页后，由于主题默认依然会生成 地址为`/blog/` 的博客文章列表页， -这导致存在了重复功能的页面，为此，你需要 [主题配置 > 博客配置](../config/主题配置.md#blog) 中， +这导致存在了重复功能的页面，为此，你需要 [主题配置 > 博客配置](../../config/theme.md#blog) 中， **关闭自动生成博客文章列表页**： （还可以重新修改 分类页/标签页/归档页的链接地址） -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" import { defineUserConfig } from 'vuepress' import { plumeTheme } from 'vuepress-theme-plume' @@ -494,4 +454,7 @@ export default defineUserConfig({ }) ``` -::: + diff --git a/docs/notes/theme/guide/部署.md b/docs/notes/theme/guide/quick-start/deployment.md similarity index 88% rename from docs/notes/theme/guide/部署.md rename to docs/notes/theme/guide/quick-start/deployment.md index 969a59eb..5b5b1eaa 100644 --- a/docs/notes/theme/guide/部署.md +++ b/docs/notes/theme/guide/quick-start/deployment.md @@ -8,8 +8,7 @@ tags: - 部署 --- -::: tip -此文档 fork 自 [vuepress official doc](https://v2.vuepress.vuejs.org/zh/guide/deployment.html)。 +::: tip 此文档 fork 自 [vuepress official doc](https://v2.vuepress.vuejs.org/zh/guide/deployment.html)。 ::: 下述的指南基于以下条件： @@ -29,6 +28,8 @@ tags: ## GitHub Pages +::: steps + 1. 设置正确的 [base](https://v2.vuepress.vuejs.org/zh/reference/config.html#base) 选项。 如果你准备发布到 `https://.github.io/` ，你可以省略这一步，因为 `base` 默认就是 `"/"` 。 @@ -39,6 +40,8 @@ tags: 创建 `.github/workflows/docs.yml` 文件来配置工作流。 +::: + ::: details 点击展开配置样例 ```yaml @@ -65,7 +68,7 @@ jobs: uses: pnpm/action-setup@v4 with: # 选择要使用的 pnpm 版本 - version: 8 + version: 10 # 使用 pnpm 安装依赖 run_install: true @@ -73,7 +76,7 @@ jobs: uses: actions/setup-node@v4 with: # 选择要使用的 node 版本 - node-version: 20 + node-version: 22 # 缓存 pnpm 依赖 cache: pnpm @@ -97,12 +100,13 @@ jobs: ::: -::: tip -请参考 [GitHub Pages 官方指南](https://pages.github.com/) 来获取更多信息。 +::: tip 请参考 [GitHub Pages 官方指南](https://pages.github.com/) 来获取更多信息。 ::: ## GitLab Pages +::: steps + 1. 设置正确的 [base](https://v2.vuepress.vuejs.org/zh/reference/config.html#base) 选项。 如果你准备发布到 `https://.gitlab.io/` ，你可以省略这一步，因此 `base` 默认就是 `"/"` 。 @@ -111,11 +115,13 @@ jobs: 2. 创建 `.gitlab-ci.yml` 文件来配置 [GitLab CI](https://about.gitlab.com/stages-devops-lifecycle/continuous-integration/) 工作流。 +::: + ::: details 点击展开配置样例 ```yaml # 选择你要使用的 docker 镜像 -image: node:18-buster +image: node:22-buster pages: # 每当 push 到 main 分支时触发部署 @@ -147,19 +153,18 @@ pages: ::: -::: tip -请参考 [GitLab Pages 官方指南](https://docs.gitlab.com/ce/user/project/pages/#getting-started) 来获取更多信息。 +::: tip 请参考 [GitLab Pages 官方指南](https://docs.gitlab.com/ce/user/project/pages/#getting-started) 来获取更多信息。 ::: ## Google Firebase +::: steps + 1. 请确保你已经安装了 [firebase-tools](https://www.npmjs.com/package/firebase-tools)。 2. 在你项目的根目录下创建 `firebase.json` 和 `.firebaserc`，并包含以下内容： - `firebase.json`: - - ```json + ```json title="firebase.json" { "hosting": { "public": "./docs/.vuepress/dist", @@ -168,9 +173,7 @@ pages: } ``` - `.firebaserc`: - - ```json + ```json title=".firebaserc" { "projects": { "default": "" @@ -180,12 +183,15 @@ pages: 3. 在执行了 `pnpm docs:build` 后, 使用 `firebase deploy` 指令来部署。 -::: tip -请参考 [Firebase CLI 官方指南](https://firebase.google.com/docs/cli) 来获取更多信息。 +::: + +::: tip 请参考 [Firebase CLI 官方指南](https://firebase.google.com/docs/cli) 来获取更多信息。 ::: ## Heroku +::: steps + 1. 首先安装 [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)； 2. [在这里](https://signup.heroku.com) 注册一个 Heroku 账号； @@ -198,15 +204,14 @@ pages: 4. 在你的项目根目录中，创建一个名为 `static.json` 的文件，并包含下述内容： -`static.json`: + ```json title="static.json" + { + "root": "./docs/.vuepress/dist" + } + ``` -```json -{ - "root": "./docs/.vuepress/dist" -} -``` - -这里是你项目的配置，请参考 [heroku-buildpack-static](https://github.com/heroku/heroku-buildpack-static) 来获取更多信息。 + 这里是你项目的配置，请参考 [heroku-buildpack-static](https://github.com/heroku/heroku-buildpack-static) 来获取更多信息。 +::: ## Kinsta @@ -218,6 +223,8 @@ pages: ## Netlify +::: steps + 1. 前往 [Netlify](https://netlify.com) ，从 GitHub 创建一个新项目，并进行如下配置： - **Build Command:** `pnpm docs:build` @@ -229,8 +236,12 @@ pages: 3. 点击 deploy 按钮。 +::: + ## Vercel +::: steps + 1. 前往 [Vercel](https://vercel.com) ，从 GitHub 创建一个新项目，并进行如下配置： - **FRAMEWORK PRESET:** `Other` @@ -239,6 +250,8 @@ pages: 2. 点击 deploy 按钮。 +::: + ## 云开发 CloudBase @@ -246,6 +259,8 @@ pages: [云开发 CloudBase](https://cloudbase.net/?site=vuepress) 是一个云原生一体化的 Serverless 云平台， 支持静态网站、容器等多种托管能力，并提供简便的部署工具 [CloudBase Framework](https://cloudbase.net/framework.html?site=vuepress) 来一键部署应用。 +::: steps + 1. 全局安装 CloudBase CLI ： ```bash @@ -260,6 +275,8 @@ pages: cloudbase framework:deploy ``` +::: + CloudBase CLI 首先会跳转到控制台进行登录授权，然后将会交互式进行确认。 确认信息后会立即进行部署，部署完成后，可以获得一个自动 SSL，CDN 加速的网站应用，你也可以搭配使用 GitHub Action 来持续部署 GitHub 上的 VuePress 应用。 diff --git a/docs/notes/theme/guide/知识笔记.md b/docs/notes/theme/guide/quick-start/document.md similarity index 95% rename from docs/notes/theme/guide/知识笔记.md rename to docs/notes/theme/guide/quick-start/document.md index 03c7488b..c5dedc0f 100644 --- a/docs/notes/theme/guide/知识笔记.md +++ b/docs/notes/theme/guide/quick-start/document.md @@ -38,10 +38,7 @@ tags: 接下来，在配置文件中配置 `notes`： -::: code-tabs -@tab .vuepress/config.ts - -```js +```js title=".vuepress/config.ts" import { defineUserConfig } from 'vuepress' import { plumeTheme } from 'vuepress-theme-plume' @@ -76,12 +73,10 @@ export default defineUserConfig({ }) ``` -::: - ::: tip 你应该在创建文件之前，建议先把笔记的目录和链接前缀等配置好。 -主题默认启用了 [auto-frontmatter](../config/主题配置.md#autofrontmatter)， +主题默认启用了 [auto-frontmatter](../../config/theme.md#autofrontmatter)， 需要根据配置，为目录中的 md 文件生成永久链接，以及侧边栏。 ::: @@ -346,10 +341,7 @@ const typescript = defineNoteConfig({ 当传入类型为 `SidebarItem` 时: -::: code-tabs -@tab .vuepress/notes.ts - -```ts +```ts title=".vuepress/notes.ts" import { defineNoteConfig } from 'vuepress-theme-plume' const typescript = defineNoteConfig({ @@ -365,14 +357,9 @@ const typescript = defineNoteConfig({ // ... other code ``` -::: - 也可以进行多层嵌套： -::: code-tabs -@tab .vuepress/notes.ts - -```ts +```ts title=".vuepress/notes.ts" import { defineNoteConfig } from 'vuepress-theme-plume' const typescript = defineNoteConfig({ @@ -399,8 +386,6 @@ const typescript = defineNoteConfig({ // ... other code ``` -::: - ### 关于 `prefix` `prefix` 的目的是为了简写与其同层级的 `items` 项内的 链接，它允许你将这些链接的相同的前缀提取到 @@ -408,11 +393,7 @@ const typescript = defineNoteConfig({ 需要注意的是，`items` 中的链接 仅有 相对路径的链接才会与 `prefix` 拼接，而绝对路径则不进行处理。 -::: code-tabs - -@tab .vuepress/notes.ts - -```ts +```ts title=".vuepress/notes.ts" import { defineNoteConfig } from 'vuepress-theme-plume' const typescript = defineNoteConfig({ @@ -438,16 +419,11 @@ const typescript = defineNoteConfig({ }) ``` -::: - 同时，`items` 内还支持 深层嵌套，内部还依然支持 `prefix`，这里也遵循相同的规则，`prefix` 如果是相对路径， 则会与 上一层的 `prefix` 拼接，再与 当前层级 `items` 内的 `link` 拼接，如果 `prefix` 是绝对路径，则不与 上一层级 `prefix` 拼接。 -::: code-tabs -@tab .vuepress/notes.ts - -```ts +```ts title=".vuepress/notes.ts" import { defineNoteConfig } from 'vuepress-theme-plume' const typescript = defineNoteConfig({ @@ -478,8 +454,6 @@ const typescript = defineNoteConfig({ }) ``` -::: - **是否是绝对路径的判断标准是，如果以 `/` 开头，则为绝对路径，否则为相对路径** :::warning @@ -491,10 +465,7 @@ const typescript = defineNoteConfig({ 为侧边栏添加 图标 有助于 侧边栏更好的呈现。得益于 [iconify](https://iconify.design/) 这个强大的开源图标库， 你可以使用超过 `200k` 的图标，仅需要添加 `icon` 配置即可。 -::: code-tabs -@tab .vuepress/notes.ts - -```ts +```ts title=".vuepress/notes.ts" import { defineNoteConfig } from 'vuepress-theme-plume' const typescript = defineNoteConfig({ @@ -513,14 +484,9 @@ const typescript = defineNoteConfig({ }) ``` -::: - 也可以使用本地图标，或者本地图片： -::: code-tabs -@tab .vuepress/notes.ts - -```ts +```ts title=".vuepress/notes.ts" import { defineNoteConfig } from 'vuepress-theme-plume' const typescript = defineNoteConfig({ @@ -541,8 +507,6 @@ const typescript = defineNoteConfig({ }) ``` -::: - **请注意，使用本地图片必须以 `/` 开头，表示为 静态资源路径，它将从 `.vuepress/public/` 目录中加载。** ::: file-tree @@ -559,27 +523,19 @@ const typescript = defineNoteConfig({ 你可能已经注意到，`sidebar: auto` 时，该如何配置 侧边栏图标，事实上很简单，直接在 文件的 `frontmatter` 部分， 添加 一个 `icon` 字段即可。 -::: code-tabs -@tab typescript/guide/intro.md - -```md +```md title="typescript/guide/intro.md" --- title: 介绍 icon: ep:guide --- ``` -::: - ### 侧边栏组内分隔 在组内对 项 进行分隔 是一个相对小众的需求，它在组的项比较多，但又不适合拆分为多个组，或者组内拆分多组的情况下， 可能会比较适用，它提供了一个平级的，使用辅助文本颜色显示一个分隔项名 的方式，对项进行简单的分隔。 -::: code-tabs -@tab .vuepress/notes.ts - -```ts +```ts title=".vuepress/notes.ts" import { defineNoteConfig } from 'vuepress-theme-plume' const typescript = defineNoteConfig({ @@ -602,8 +558,6 @@ const typescript = defineNoteConfig({ }) ``` -::: - 在组内完成分隔非常简单，你只需要在合适的位置插入一个 `{ text: 'xxxx', link: '---' }` 即可， 它的重点仅是将 `link` 设置为 连续的 `---` 即可，至少三个 `-` 。 你可以随意定义文本，还可以添加图标。 @@ -622,12 +576,9 @@ const typescript = defineNoteConfig({ 默认情况下，它与 普通的文档页面 没有区别，这是因为 主题 默认对 所有页面 设置了 `pageLayout: docs`。 -但你可以直接配置 `pageLayout: 'home'`，就像配置 [站点首页](./自定义首页.md) 一样，为 笔记配置一个个性化的首页！ +但你可以直接配置 `pageLayout: 'home'`，就像配置 [站点首页](../custom/home.md) 一样，为 笔记配置一个个性化的首页！ -::: code-tabs -@tab typescript/README.md - -```md +```md title="typescript/README.md" --- pageLayout: home config: @@ -635,5 +586,3 @@ config: - type: features --- ``` - -::: diff --git a/docs/notes/theme/guide/介绍.md b/docs/notes/theme/guide/quick-start/intro.md similarity index 99% rename from docs/notes/theme/guide/介绍.md rename to docs/notes/theme/guide/quick-start/intro.md index 61157ead..54907eaf 100644 --- a/docs/notes/theme/guide/介绍.md +++ b/docs/notes/theme/guide/quick-start/intro.md @@ -1,6 +1,5 @@ --- title: 主题介绍 -author: pengzhanbo icon: mdi:tooltip-text-outline createTime: 2024/03/04 11:06:24 permalink: /guide/intro/ diff --git a/docs/notes/theme/guide/国际化.md b/docs/notes/theme/guide/quick-start/locales.md similarity index 91% rename from docs/notes/theme/guide/国际化.md rename to docs/notes/theme/guide/quick-start/locales.md index ec450aaa..529ef8a0 100644 --- a/docs/notes/theme/guide/国际化.md +++ b/docs/notes/theme/guide/quick-start/locales.md @@ -2,7 +2,7 @@ title: 国际化 icon: material-symbols-light:language createTime: 2024/03/05 10:01:26 -permalink: /guide/international/ +permalink: /guide/locales/ tags: - 指南 - i18n @@ -42,10 +42,7 @@ tags: 在 `.vuepress/config.ts` 中，声明默认的语言： -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" import { defineUserConfig } from 'vuepress' export default defineUserConfig({ @@ -58,8 +55,6 @@ export default defineUserConfig({ }) ``` -::: - ### 添加其他语言 你需要为每个语言设置 `lang` 选项。即使你只在使用单个语言，你也必须在 `.vuepress/config.{js,ts}` 中设置 `lang`。 @@ -70,10 +65,7 @@ export default defineUserConfig({ 在 `.vuepress/config.ts` 中配置： -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" import { defineUserConfig } from 'vuepress' export default defineUserConfig({ @@ -89,8 +81,6 @@ export default defineUserConfig({ }) ``` -::: - **`locales` 配置中的 `key` 作为 `localPath`, 对应着 `docs` 目录下的语言路径，应该保证它们具有相同的命名。** **同时，`key` (`localPath`) 也将作为 不同语言的页面访问链接的前缀。** @@ -108,10 +98,7 @@ export default defineUserConfig({ `locales` 支持 所有主题配置项。 -::: code-tabs -@tab .vuepress/config.ts - -```js +```ts title=".vuepress/config.ts" import { plumeTheme } from '@vuepress-plume/vuepress-theme-plume' import { defineUserConfig } from 'vuepress' @@ -152,13 +139,11 @@ export default defineUserConfig({ }) ``` -::: - 主题 `theme.locales` 配置中的 `key` 应与 `vuepress` 配置中的 `locales` 配置中的 `key` 一致。 您应该为 `theme.locales[localePath]` 配置 `selectLanguageName` 用于在导航栏多语言下拉菜单中显示当前语言的名称。 更多 `locales` 配置请查看 -- [主题配置 > Locales 配置](../config/主题配置.md#locale-配置) - 配置主题在不同语言下的行为。 -- [主题配置 > 多语言配置](../config/多语言配置.md) - 配置与语言相关的文本。 +- [主题配置 > Locales 配置](../../config/theme.md#locale-配置) - 配置主题在不同语言下的行为。 +- [主题配置 > 多语言配置](../../config/locales.md) - 配置与语言相关的文本。 diff --git a/docs/notes/theme/guide/构建优化.md b/docs/notes/theme/guide/quick-start/optimize-build.md similarity index 100% rename from docs/notes/theme/guide/构建优化.md rename to docs/notes/theme/guide/quick-start/optimize-build.md diff --git a/docs/notes/theme/guide/项目结构.md b/docs/notes/theme/guide/quick-start/project-structure.md similarity index 95% rename from docs/notes/theme/guide/项目结构.md rename to docs/notes/theme/guide/quick-start/project-structure.md index 0bd8ab9d..23e6aed0 100644 --- a/docs/notes/theme/guide/项目结构.md +++ b/docs/notes/theme/guide/quick-start/project-structure.md @@ -7,7 +7,7 @@ permalink: /guide/project-structure/ 本指南将向您说明 VuePress 和 Plume 创建的项目的文件结构，以及如何在项目中使用它们。 -当您 [使用命令行工具创建](./安装与使用.md#命令行安装) 的项目，它的文件结构是这样的： +当您 [使用命令行工具创建](./usage.md#命令行安装) 的项目，它的文件结构是这样的： ::: file-tree @@ -72,10 +72,7 @@ vuepress dev docs 客户端配置文件，你可以在这里扩展 VuePress 的功能，比如声明新的全局组件等。 -::: code-tabs -@tab .vuepress/client.ts - -```ts +```ts title=".vuepress/client.ts" import { defineClientConfig } from 'vuepress/client' export default defineClientConfig({ @@ -93,16 +90,11 @@ export default defineClientConfig({ }) ``` -::: - ### `config.ts` 为 VuePress 配置文件，你需要在这里进行一些必要的配置，比如 主题、插件、构建工具等。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" import { viteBundler } from '@vuepress/bundler-vite' import { defineUserConfig } from 'vuepress' import { plumeTheme } from 'vuepress-theme-plume' @@ -116,8 +108,6 @@ export default defineUserConfig({ }) ``` -::: - ### `plume.config.ts` 主题配置文件，由于每次修改 `.vuepress/config.ts`，都需要重启 VuePress 服务，然而实际上大多数时候都不需要这么做。 diff --git a/docs/notes/theme/guide/安装与使用.md b/docs/notes/theme/guide/quick-start/usage.md similarity index 83% rename from docs/notes/theme/guide/安装与使用.md rename to docs/notes/theme/guide/quick-start/usage.md index c5a9ea4c..2049567c 100644 --- a/docs/notes/theme/guide/安装与使用.md +++ b/docs/notes/theme/guide/quick-start/usage.md @@ -2,19 +2,15 @@ title: 安装/使用 icon: grommet-icons:install createTime: 2024/03/04 09:50:07 -permalink: /guide/quick-start/ +permalink: /guide/usage/ tags: - 指南 - 快速开始 --- - - ## 依赖环境 -- [Node.js](https://nodejs.org/) : **^18.19.0 || ^20.6.0 || >= 22.0.0** [+node-versions] +- [Node.js](https://nodejs.org/) : **^18.19.0 或 ^20.6.0 或 >= 22.0.0** [+node-versions] - [npm 8+](https://www.npmjs.com/) 或 [pnpm 8+](https://pnpm.io/zh/) 或 [Yarn 2+](https://yarnpkg.com/) [+node-versions]: **^18.19.0：** `18.19.0` 及以上但不高于 `19.0.0` 的版本 @@ -43,7 +39,7 @@ const vuepressVersion = __VUEPRESS_VERSION__ ::: :::: -## 命令行安装 +## 命令行安装 主题提供了一个 命令行工具，帮助您构建一个基本项目。您可以通过运行以下命令，启动 安装向导。 @@ -57,7 +53,7 @@ npm create vuepress-theme-plume@latest 启动向导后，您只需要回答几个简单的问题： - + ::: details 怎么使用命令行工具？ @@ -92,7 +88,7 @@ cd open-source # 进入 D: 分区下的 open-source 目录 - ### 新建文件夹并进入目录 - ``` sh :no-line-numbers + ``` sh mkdir my-blog cd my-blog ``` @@ -124,16 +120,12 @@ cd open-source # 进入 D: 分区下的 open-source 目录 ::: :::warning - 主题当前版本 已适配至 vuepress@{{ vuepressVersion }}，你应该安装这个版本的 VuePress。 - 高于或低于这个版本，可能会存在潜在的兼容性问题。 + 主题当前版本 已适配至 vuepress@{{ vuepressVersion }}，你应该安装这个版本的 VuePress。高于或低于这个版本，可能会存在潜在的兼容性问题。 ::: - ### 在 `package.json` 中添加 `script` - ::: code-tabs - @tab package.json - - ``` json :no-line-numbers + ``` json title="package.json" { "scripts": { "docs:dev": "vuepress dev docs", @@ -142,8 +134,6 @@ cd open-source # 进入 D: 分区下的 open-source 目录 } ``` - ::: - `vuepress` 默认将文档源码放在 `docs` 目录下。 - ### 将默认的临时目录和缓存目录添加到`.gitignore` 文件中 @@ -151,7 +141,7 @@ cd open-source # 进入 D: 分区下的 open-source 目录 ::: code-tabs @tab .gitignore - ``` txt :no-line-numbers + ``` txt node_modules .temp .cache @@ -159,7 +149,7 @@ cd open-source # 进入 D: 分区下的 open-source 目录 @tab sh - ``` sh :no-line-numbers + ``` sh echo 'node_modules' >> .gitignore echo '.temp' >> .gitignore echo '.cache' >> .gitignore @@ -169,10 +159,7 @@ cd open-source # 进入 D: 分区下的 open-source 目录 - ### 在 `docs/.vuepress/config.{js,ts}` 中配置主题 - ::: code-tabs - @tab docs/.vuepress/config.ts - - ``` ts :no-line-numbers + ``` ts title="docs/.vuepress/config.ts" import { viteBundler } from '@vuepress/bundler-vite' import { defineUserConfig } from 'vuepress' import { plumeTheme } from 'vuepress-theme-plume' @@ -187,9 +174,7 @@ cd open-source # 进入 D: 分区下的 open-source 目录 }) ``` - ::: - - :::warning + :::warning 不要忘记设置默认语言 无论是否需要使用 **多语言** ，你都应该为 VuePress 配置 正确 `lang` 选项值。 主题需要根据 `lang` 选项来确定语言环境文本。 ::: @@ -197,17 +182,13 @@ cd open-source # 进入 D: 分区下的 open-source 目录 - ### 在 `docs` 目录下新建 `README.md` 文件 声明首页配置。 - ::: code-tabs - @tab README.md - ``` md :no-line-numbers + ``` md title="README.md" --- home: true --- ``` - ::: - - ### 在本地服务器启动你的文档站点 ::: npm-to @@ -218,7 +199,8 @@ cd open-source # 进入 D: 分区下的 open-source 目录 ::: - Vuepress 会在 [http://localhost:8080](http://localhost:8080) 。启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。 + VuePress 会在 + 启动一个热重载的开发服务器。当修改 Markdown 文件时，浏览器中的内容也会自动更新。 - ### 完成 @@ -235,3 +217,7 @@ npx vp-update ``` ::: + + diff --git a/docs/notes/theme/guide/编写文章.md b/docs/notes/theme/guide/quick-start/write.md similarity index 81% rename from docs/notes/theme/guide/编写文章.md rename to docs/notes/theme/guide/quick-start/write.md index f3ce4506..bde7ca6e 100644 --- a/docs/notes/theme/guide/编写文章.md +++ b/docs/notes/theme/guide/quick-start/write.md @@ -8,11 +8,11 @@ tags: - 快速开始 --- -VuePress 支持完整的 [Markdown 语法](./markdown/基础.md), +VuePress 支持完整的 [Markdown 语法](../markdown/basic.md), 以及使用 [YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) 定义 frontmatter 页面元数据，例如 标题和创建时间。 -主题还对 Markdown 语法进行了 [扩展](./markdown/扩展.md) 支持。你还可以直接在 +主题还对 Markdown 语法进行了 [扩展](../markdown/extensions.md) 支持。你还可以直接在 Markdown 中写 HTML ，或者使用 Vue 组件。 ## Frontmatter @@ -20,10 +20,8 @@ Markdown 中写 HTML ，或者使用 Vue 组件。 你可以通过设置 frontmatter 中的值来自定义 VuePress 里每个页面。 Frontmatter 是你的文件顶部在 `---` 中间的部分。 -::: code-tabs -@tab post.md - -```md +```md title="post.md" + --- title: 文章标题 createTime: 2024/09/08 22:53:34 @@ -33,12 +31,10 @@ permalink: /article/9eh4d6ao/ 页面内容在第二个 `---` 后面。 ``` -::: - ::: details 什么是 frontmatter？ frontmatter 是一个 [YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) 格式的配置内容，被放置于 markdown 文件的顶部，通过 `---` 来分隔。 -您可以阅读 [这篇文章](../../../4.教程/frontmatter.md) 了解如何正确书写 frontmatter。 +您可以阅读 [这篇文章](../../../../4.教程/frontmatter.md) 了解如何正确书写 frontmatter。 ::: ## 自动生成 Frontmatter @@ -77,23 +73,20 @@ __永久链接__ 指的是，文章发布后的 访问地址，这个地址一 对于 博客文章，默认使用 `/article/` 作为永久链接的前缀，然后使用 [`nanoid`](https://github.com/ai/nanoid) 生成长度为 `8` 的随机字符串进行拼接，作为文章的永久链接， 如 `/article/9eh4d6ao/`。 - 对于链接前缀，还可以通过修改 [主题配置 > article](../config/主题配置.md#article) 替换默认的 `/article/`。 + 对于链接前缀，还可以通过修改 [主题配置 > article](../../config/theme.md#article) 替换默认的 `/article/`。 - __notes__ - 对于 notes , 主题使用更为灵活的自定义方案，你可以在 [notes > note.link](../config/notes配置.md#配置) 声明不同的 + 对于 notes , 主题使用更为灵活的自定义方案，你可以在 [notes > note.link](../../config/notes.md#配置) 声明不同的 note 的链接前缀，然后同样适用 [`nanoid`](https://github.com/ai/nanoid) - 生成长度为 `8` 的随机字符串进行拼接，作为 ntoe 文章的永久链接。 + 生成长度为 `8` 的随机字符串进行拼接，作为 note 文章的永久链接。 ### 禁用自动生成 你可能不想主题做额外的自动生成，希望由自己完全掌控。这完全没问题，主题支持通过配置来控制 自动生成 frontmatter 的行为。 -通过 [主题配置 > autoFrontmatter](../config/主题配置.md#autofrontmatter) 即可轻松做到。 +通过 [主题配置 > autoFrontmatter](../../config/theme.md#autofrontmatter) 即可轻松做到。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" import { defineUserConfig } from 'vuepress' import { plumeTheme } from 'vuepress-theme-plume' @@ -112,12 +105,10 @@ export default defineUserConfig({ }) ``` -::: - ## 约定 ::: info 提示 -以下内容，以 [项目结构](./项目结构.md) 中的文件结构作为基准。 +以下内容，以 [项目结构](./project-structure.md) 中的文件结构作为基准。 ::: 使用本主题编写文章是一件很轻松的事情，你可以在 `docs`目录中按照你的个人命名喜好新建任意名字的`Markdown`文件。 @@ -128,7 +119,7 @@ export default defineUserConfig({ - 文件夹的名称将作为 `category` 即 __分类__。 - 允许多级目录，子级目录将作为父目录对应的分类的子项。 -- 如果目录名称 在 [主题配置 notes](../config/notes配置.md) 中声明用于 notes 文章管理，则默认不作为 分类目录。 +- 如果目录名称 在 [主题配置 notes](../../config/notes.md) 中声明用于 notes 文章管理，则默认不作为 分类目录。 由于文件夹名称将作为分类名称，且不在主题配置中进行排序配置，对于有排序需要的场景，使用以下规则进行命名： @@ -160,17 +151,17 @@ __example:__ - __博客文章__ 对于 __博客文章__ 的名称，主题没有任何约定，你可以任意命名。博客文章默认排序规则仅根据文件创建时间进行排序。 - 你还可以通过 [frontmatter > sticky](../config/frontmatter/post.md#sticky) 配置文章是否置顶。 + 你还可以通过 [frontmatter > sticky](../../config/frontmatter/post.md#sticky) 配置文章是否置顶。 - __notes__ 对于 __notes__ 中的 markdown 文件名称，依然遵循 与 [文件夹命名约定](#文件夹命名约定) 相同的规则。 - 这可以为 notes 的 [自动生成侧边栏](../config/notes配置.md#自动生成侧边栏) 提供排序依据。 + 这可以为 notes 的 [自动生成侧边栏](../../config/notes.md#自动生成侧边栏) 提供排序依据。 ## 文章写作 你可以使用 `markdown` 语法开始在 `docs` 下新建 `Markdown` 文件，编写你自己的文章了， -关于 markdown 扩展的功能支持，请查看 [这个文档](./markdown/扩展.md) +关于 markdown 扩展的功能支持，请查看 [这个文档](../markdown/extensions.md) 由于主题默认会为文章 的 `frontmatter` 自动生成一个 `title`，因此，文章内容的主体部分的标题，起始应该从 `h2` 即 `## 二级标题` 开始。如果您禁用了 `autoFrontmatter.title`，那么应该使用 `h1` 即 `# 一级标题` 开始。 diff --git a/docs/notes/theme/guide/代码演示/codeSandbox.md b/docs/notes/theme/guide/repl/codeSandbox.md similarity index 87% rename from docs/notes/theme/guide/代码演示/codeSandbox.md rename to docs/notes/theme/guide/repl/codeSandbox.md index 76364d6d..48d1442f 100644 --- a/docs/notes/theme/guide/代码演示/codeSandbox.md +++ b/docs/notes/theme/guide/repl/codeSandbox.md @@ -1,6 +1,5 @@ --- title: Code Sandbox -author: pengzhanbo icon: lucide:codesandbox createTime: 2024/04/04 03:42:13 permalink: /guide/code/code-sandbox/ @@ -12,23 +11,16 @@ permalink: /guide/code/code-sandbox/ 此功能默认不启用，你可以在配置文件中启用它。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownPower: { - codesandbox: true, // [!code highlight] - }, - } + markdown: { + codesandbox: true, // [!code highlight] + }, }) }) ``` -::: - ## 语法 ### 简单语法 diff --git a/docs/notes/theme/guide/代码演示/codepen.md b/docs/notes/theme/guide/repl/codepen.md similarity index 88% rename from docs/notes/theme/guide/代码演示/codepen.md rename to docs/notes/theme/guide/repl/codepen.md index 508a7a13..79c6427c 100644 --- a/docs/notes/theme/guide/代码演示/codepen.md +++ b/docs/notes/theme/guide/repl/codepen.md @@ -1,6 +1,5 @@ --- title: Code Pen -author: pengzhanbo icon: mingcute:codepen-line createTime: 2024/04/04 10:41:58 permalink: /guide/code/code-pen/ @@ -12,23 +11,16 @@ permalink: /guide/code/code-pen/ 此功能默认不启用，你可以在配置文件中启用它。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownPower: { - codepen: true, // [!code highlight] - }, - } + markdown: { + codepen: true, // [!code highlight] + }, }) }) ``` -::: - ## 语法 简单语法： diff --git a/docs/notes/theme/guide/代码演示/demo/Counter.module.css b/docs/notes/theme/guide/repl/demo/Counter.module.css similarity index 100% rename from docs/notes/theme/guide/代码演示/demo/Counter.module.css rename to docs/notes/theme/guide/repl/demo/Counter.module.css diff --git a/docs/notes/theme/guide/代码演示/demo/Counter.ts b/docs/notes/theme/guide/repl/demo/Counter.ts similarity index 100% rename from docs/notes/theme/guide/代码演示/demo/Counter.ts rename to docs/notes/theme/guide/repl/demo/Counter.ts diff --git a/docs/notes/theme/guide/代码演示/demo/Counter.vue b/docs/notes/theme/guide/repl/demo/Counter.vue similarity index 100% rename from docs/notes/theme/guide/代码演示/demo/Counter.vue rename to docs/notes/theme/guide/repl/demo/Counter.vue diff --git a/docs/notes/theme/guide/代码演示/demo/Toggle.vue b/docs/notes/theme/guide/repl/demo/Toggle.vue similarity index 100% rename from docs/notes/theme/guide/代码演示/demo/Toggle.vue rename to docs/notes/theme/guide/repl/demo/Toggle.vue diff --git a/docs/notes/theme/guide/代码演示/demo/normal-lib.html b/docs/notes/theme/guide/repl/demo/normal-lib.html similarity index 100% rename from docs/notes/theme/guide/代码演示/demo/normal-lib.html rename to docs/notes/theme/guide/repl/demo/normal-lib.html diff --git a/docs/notes/theme/guide/代码演示/demo/normal.html b/docs/notes/theme/guide/repl/demo/normal.html similarity index 100% rename from docs/notes/theme/guide/代码演示/demo/normal.html rename to docs/notes/theme/guide/repl/demo/normal.html diff --git a/docs/notes/theme/guide/代码演示/前端.md b/docs/notes/theme/guide/repl/frontend-deprecated.md similarity index 97% rename from docs/notes/theme/guide/代码演示/前端.md rename to docs/notes/theme/guide/repl/frontend-deprecated.md index 0db4be24..c18b1321 100644 --- a/docs/notes/theme/guide/代码演示/前端.md +++ b/docs/notes/theme/guide/repl/frontend-deprecated.md @@ -18,7 +18,7 @@ badge: - 演示代码仅能内联在 markdown 文件中，对于代码量较大的演示的编写体验不佳。 - 在浏览器运行时通过异步加载 `babel` 转换源代码，一方面需要额外的等待时间，另一方面对于企业内网环境可能不支持。 -主题重新对 前端代码演示 功能进行了重新设计和重构，请查看新的 [前端代码演示](./前端演示.md) 。 +主题重新对 前端代码演示 功能进行了重新设计和重构，请查看新的 [前端代码演示](./frontend.md) 。 ::: ## 概述 @@ -27,23 +27,16 @@ badge: 前端 代码演示 默认不启用，你可以通过配置来启用它。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownEnhance: { - demo: true, - }, - } + markdown: { + oldDemo: true, + }, }) }) ``` -::: - ## 语法 ```` md diff --git a/docs/notes/theme/guide/代码演示/前端演示.md b/docs/notes/theme/guide/repl/frontend.md similarity index 97% rename from docs/notes/theme/guide/代码演示/前端演示.md rename to docs/notes/theme/guide/repl/frontend.md index f6339e32..135c27e4 100644 --- a/docs/notes/theme/guide/代码演示/前端演示.md +++ b/docs/notes/theme/guide/repl/frontend.md @@ -7,7 +7,7 @@ badge: text: 1.0.0-rc.127 + --- -::: important [旧的前端代码演示](./前端.md) 已弃用，请迁移至此新的方案。 +::: important [旧的前端代码演示](./frontend-deprecated.md) 已弃用，请迁移至此新的方案。 旧的方案由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/) 提供，感谢在过去 提供的代码演示的支持，在 `vuepress-plugin-md-enhance` 中代码演示功能也将迁移至 [vuepress/ecosystem](https://github.com/vuepress/ecosystem)， @@ -67,30 +67,20 @@ badge: ## 配置 -前端代码演示 由 [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: { - demo: true, // 启用新的代码演示功能 // [!code ++] - }, - markdownEnhance: { - demo: false, // 禁用旧的代码演示功能 // [!code warning] - } - } + markdown: { + demo: true, // [!code ++] + }, }) }) ``` -::: - ## 语言支持 代码演示支持以下 语言： @@ -127,7 +117,7 @@ export default defineUserConfig({ `url` 表示演示代码文件的路径，可以是相对路径或绝对路径， - 相对路径，以 `./` 或 `../` 开头，表示相对于当前的 markdown 文件路径。 -- 绝对路径，以 `/` 开头，表示从 [vuepress 源目录路径](../项目结构.md#文档源目录) 开始。 +- 绝对路径，以 `/` 开头，表示从 [vuepress 源目录路径](../quick-start/project-structure.md#文档源目录) 开始。 ```md diff --git a/docs/notes/theme/guide/代码演示/golang.md b/docs/notes/theme/guide/repl/golang.md similarity index 95% rename from docs/notes/theme/guide/代码演示/golang.md rename to docs/notes/theme/guide/repl/golang.md index d614aea3..da39d7f1 100644 --- a/docs/notes/theme/guide/代码演示/golang.md +++ b/docs/notes/theme/guide/repl/golang.md @@ -1,6 +1,5 @@ --- title: Golang -author: pengzhanbo icon: devicon-plain:go createTime: 2024/04/22 09:44:30 permalink: /guide/repl/golang/ @@ -20,25 +19,18 @@ permalink: /guide/repl/golang/ 该功能默认不启用，你可以通过配置来启用它。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownPower: { - repl: { - go: true, - }, + markdown: { + repl: { + go: true, }, - } + }, }) }) ``` -::: - ## 使用 使用 `::: go-repl` 容器语法 将 Go 代码块包裹起来。主题会检查代码块并添加执行按钮。 diff --git a/docs/notes/theme/guide/代码演示/jsFiddle.md b/docs/notes/theme/guide/repl/jsFiddle.md similarity index 86% rename from docs/notes/theme/guide/代码演示/jsFiddle.md rename to docs/notes/theme/guide/repl/jsFiddle.md index 0fc0e63f..15102884 100644 --- a/docs/notes/theme/guide/代码演示/jsFiddle.md +++ b/docs/notes/theme/guide/repl/jsFiddle.md @@ -1,6 +1,5 @@ --- title: Js Fiddle -author: pengzhanbo icon: bxl:jsfiddle createTime: 2024/04/04 10:42:21 permalink: /guide/code/jsfiddle/ @@ -12,23 +11,16 @@ permalink: /guide/code/jsfiddle/ 此功能默认不启用，你可以在配置文件中启用它。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownPower: { - jsfiddle: true, // [!code highlight] - }, - } + markdown: { + jsfiddle: true, // [!code highlight] + }, }) }) ``` -::: - ## 语法 ### 简单语法 diff --git a/docs/notes/theme/guide/代码演示/kotlin.md b/docs/notes/theme/guide/repl/kotlin.md similarity index 92% rename from docs/notes/theme/guide/代码演示/kotlin.md rename to docs/notes/theme/guide/repl/kotlin.md index 45732e49..a10eee39 100644 --- a/docs/notes/theme/guide/代码演示/kotlin.md +++ b/docs/notes/theme/guide/repl/kotlin.md @@ -1,6 +1,5 @@ --- title: Kotlin -author: pengzhanbo icon: tabler:brand-kotlin createTime: 2024/04/22 09:44:37 permalink: /guide/repl/kotlin/ @@ -20,25 +19,18 @@ permalink: /guide/repl/kotlin/ 该功能默认不启用，你可以通过配置来启用它。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownPower: { - repl: { - kotlin: true, - }, + markdown: { + repl: { + kotlin: true, }, - } + }, }) }) ``` -::: - ## 使用 使用 `::: kotlin-repl` 容器语法 将 kotlin 代码块包裹起来。主题会检查代码块并添加执行按钮。 diff --git a/docs/notes/theme/guide/代码演示/replit.md b/docs/notes/theme/guide/repl/replit.md similarity index 84% rename from docs/notes/theme/guide/代码演示/replit.md rename to docs/notes/theme/guide/repl/replit.md index 91aa9389..7973efbd 100644 --- a/docs/notes/theme/guide/代码演示/replit.md +++ b/docs/notes/theme/guide/repl/replit.md @@ -1,6 +1,5 @@ --- title: Replit -author: pengzhanbo icon: simple-icons:replit createTime: 2024/04/04 10:42:05 permalink: /guide/code/replit/ @@ -14,23 +13,16 @@ permalink: /guide/code/replit/ 此功能默认不启用，你可以在配置文件中启用它。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownPower: { - replit: true, // [!code highlight] - }, - } + markdown: { + replit: true, // [!code ++] + }, }) }) ``` -::: - ## 语法 简单的语法 diff --git a/docs/notes/theme/guide/代码演示/rust.md b/docs/notes/theme/guide/repl/rust.md similarity index 93% rename from docs/notes/theme/guide/代码演示/rust.md rename to docs/notes/theme/guide/repl/rust.md index 20210a20..63e84628 100644 --- a/docs/notes/theme/guide/代码演示/rust.md +++ b/docs/notes/theme/guide/repl/rust.md @@ -1,6 +1,5 @@ --- title: Rust -author: pengzhanbo icon: simple-icons:rust createTime: 2024/04/22 09:44:43 permalink: /guide/repl/rust/ @@ -20,25 +19,18 @@ permalink: /guide/repl/rust/ 该功能默认不启用，你可以通过配置来启用它。 -::: code-tabs -@tab .vuepress/config.ts - -```ts +```ts title=".vuepress/config.ts" export default defineUserConfig({ theme: plumeTheme({ - plugins: { - markdownPower: { - repl: { - rust: true, - }, + markdown: { + repl: { + rust: true, }, - } + }, }) }) ``` -::: - ## 使用 使用 `::: rust-repl` 容器语法 将 Rust 代码块包裹起来。主题会检查代码块并添加执行按钮。 diff --git a/docs/notes/tools/README.md b/docs/notes/tools/README.md index 79994e5f..4b7193f2 100644 --- a/docs/notes/tools/README.md +++ b/docs/notes/tools/README.md @@ -1,6 +1,5 @@ --- title: 主题工具包 -author: pengzhanbo createTime: 2024/04/16 16:27:03 permalink: /tools/ --- diff --git a/docs/notes/tools/caniuse.md b/docs/notes/tools/caniuse.md index deb5e965..376dbaa7 100644 --- a/docs/notes/tools/caniuse.md +++ b/docs/notes/tools/caniuse.md @@ -7,19 +7,22 @@ readingTime: false editLink: false --- -::: info 提示 除了使用本工具，你也可以直接访问 [caniuse.com/](https://caniuse.com/) 搜索特性， 在结果页中，点击 左侧的 `#` 按钮后，浏览器的地址栏会自动跳转，例如： 搜索 `@property`,点击 `#` 会跳转到 `https://caniuse.com/mdn-css_at-rules_property`， 可以直接复制 `mdn-css_at-rules_property` ，粘贴到 markdown 文件中: -```md :no-line-numbers +```md @[caniuse](mdn-css_at-rules_property) ``` -::: +## 工具 本工具用于帮助搜索 caniuse 中的特性。并生成 caniuse markdown 代码。 + + diff --git a/docs/notes/tools/custom-theme.md b/docs/notes/tools/custom-theme.md index 6b9d5d60..bbbc7e98 100644 --- a/docs/notes/tools/custom-theme.md +++ b/docs/notes/tools/custom-theme.md @@ -1,7 +1,6 @@ --- title: 主题颜色工具 icon: unjs:theme-colors -author: pengzhanbo createTime: 2024/07/29 13:58:29 permalink: /tools/theme-colors/ readingTime: false @@ -18,4 +17,8 @@ lastUpdated: false 本工具只能帮助您简单的创建主题颜色。如果您期望更加复杂的主题颜色配置，请查看 [styles/vars.css](https://github.com/pengzhanbo/vuepress-theme-plume/blob/main/theme/src/client/styles/vars.css) ::: + + diff --git a/docs/notes/tools/home-hero-tint-plate.md b/docs/notes/tools/home-hero-tint-plate.md index f0720373..f5b19aa6 100644 --- a/docs/notes/tools/home-hero-tint-plate.md +++ b/docs/notes/tools/home-hero-tint-plate.md @@ -10,4 +10,8 @@ editLink: false 为了更直观更方便的配置首页 Hero 区域 的 背景色板，主题提供了 色板配置工具， 帮助生成相对应的配置信息。 + + diff --git a/docs/package.json b/docs/package.json index dd0f93d9..268f6132 100644 --- a/docs/package.json +++ b/docs/package.json @@ -9,27 +9,27 @@ "docs:serve": "http-server .vuepress/dist -d 0" }, "peerDependencies": { - "vuepress": "catalog:" + "vuepress": "catalog:vuepress" }, "dependencies": { - "@iconify/json": "catalog:", - "@simonwep/pickr": "^1.9.1", - "@vuepress/bundler-vite": "catalog:", - "@vuepress/shiki-twoslash": "catalog:", - "chart.js": "^4.4.8", - "echarts": "^5.6.0", - "flowchart.ts": "^3.0.1", - "http-server": "^14.1.1", - "markmap-lib": "^0.18.11", - "markmap-toolbar": "^0.18.10", - "markmap-view": "^0.18.10", - "mermaid": "^11.4.1", - "sass-embedded": "^1.85.1", - "swiper": "^11.2.5", - "vue": "catalog:", + "@iconify/json": "catalog:peer", + "@simonwep/pickr": "catalog:dev", + "@vuepress/bundler-vite": "catalog:vuepress", + "@vuepress/shiki-twoslash": "catalog:vuepress", + "chart.js": "catalog:prod", + "echarts": "catalog:prod", + "flowchart.ts": "catalog:prod", + "http-server": "catalog:dev", + "markmap-lib": "catalog:prod", + "markmap-toolbar": "catalog:prod", + "markmap-view": "catalog:prod", + "mermaid": "catalog:dev", + "sass-embedded": "catalog:peer", + "swiper": "catalog:peer", + "vue": "catalog:prod", "vuepress-theme-plume": "workspace:*" }, "devDependencies": { - "@types/express": "^5.0.0" + "@types/express": "catalog:dev" } } diff --git a/eslint.config.js b/eslint.config.js index a7019499..0d0123cd 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,6 +1,7 @@ import config from '@pengzhanbo/eslint-config-vue' export default config({ + pnpm: true, ignores: [ 'lib', 'docs/notes/theme/snippet/code-block.snippet.md', diff --git a/package.json b/package.json index c7ca223b..05b8c612 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "type": "module", "version": "1.0.0-rc.135", "private": true, - "packageManager": "pnpm@10.5.2", + "packageManager": "pnpm@10.6.3", "author": "pengzhanbo (https://github.com/pengzhanbo/)", "license": "MIT", "keywords": [ @@ -40,51 +40,38 @@ "release:version": "bumpp package.json plugins/*/package.json theme/package.json cli/package.json --execute=\"pnpm release:changelog\" --commit \"build: publish v%s\" --all --tag --push" }, "devDependencies": { - "@commitlint/cli": "^19.7.1", - "@commitlint/config-conventional": "^19.7.1", - "@pengzhanbo/eslint-config-vue": "^1.27.0", - "@pengzhanbo/stylelint-config": "^1.27.0", - "@types/less": "^3.0.8", - "@types/lodash.merge": "^4.6.9", - "@types/minimist": "^1.2.5", - "@types/node": "^22.13.9", - "@types/stylus": "^0.48.43", - "@types/webpack-env": "^1.18.8", - "@vitest/coverage-istanbul": "^3.0.7", - "bumpp": "^10.0.3", - "commitizen": "^4.3.1", - "conventional-changelog-cli": "^5.0.0", - "cpx2": "^8.0.0", - "cross-env": "7.0.3", - "cz-conventional-changelog": "^3.3.0", - "eslint": "^9.21.0", - "husky": "^9.1.7", - "less": "^4.2.2", - "lint-staged": "^15.4.3", - "markdown-it": "^14.1.0", - "memfs": "^4.17.0", - "minimist": "^1.2.8", - "rimraf": "^6.0.1", - "stylelint": "^16.15.0", - "stylus": "^0.64.0", - "tsconfig-vuepress": "^5.2.1", - "tsup": "^8.4.0", - "typescript": "^5.8.2", - "vitest": "^3.0.7", - "wait-on": "^8.0.2" - }, - "pnpm": { - "onlyBuiltDependencies": [ - "@parcel/watcher", - "core-js", - "esbuild" - ] - }, - "resolutions": { - "@typescript-eslint/utils": "^8.26.0", - "esbuild": "^0.25.0", - "sass": "^1.85.1", - "sass-embedded": "^1.85.1" + "@commitlint/cli": "catalog:dev", + "@commitlint/config-conventional": "catalog:dev", + "@pengzhanbo/eslint-config-vue": "catalog:dev", + "@pengzhanbo/stylelint-config": "catalog:dev", + "@types/less": "catalog:dev", + "@types/lodash.merge": "catalog:dev", + "@types/minimist": "catalog:dev", + "@types/node": "catalog:dev", + "@types/stylus": "catalog:dev", + "@types/webpack-env": "catalog:dev", + "@vitest/coverage-istanbul": "catalog:dev", + "bumpp": "catalog:dev", + "commitizen": "catalog:dev", + "conventional-changelog-cli": "catalog:dev", + "cpx2": "catalog:dev", + "cross-env": "catalog:dev", + "cz-conventional-changelog": "catalog:dev", + "eslint": "catalog:dev", + "husky": "catalog:dev", + "less": "catalog:dev", + "lint-staged": "catalog:dev", + "markdown-it": "catalog:dev", + "memfs": "catalog:dev", + "minimist": "catalog:dev", + "rimraf": "catalog:dev", + "stylelint": "catalog:dev", + "stylus": "catalog:dev", + "tsconfig-vuepress": "catalog:dev", + "tsup": "catalog:dev", + "typescript": "catalog:dev", + "vitest": "catalog:dev", + "wait-on": "catalog:dev" }, "lint-staged": { "*": "eslint --fix", diff --git a/plugins/plugin-fonts/package.json b/plugins/plugin-fonts/package.json index e3ff49eb..1488b377 100644 --- a/plugins/plugin-fonts/package.json +++ b/plugins/plugin-fonts/package.json @@ -33,7 +33,7 @@ "tsup": "tsup --config tsup.config.ts" }, "peerDependencies": { - "vuepress": "catalog:" + "vuepress": "catalog:vuepress" }, "publishConfig": { "access": "public" diff --git a/plugins/plugin-md-power/__test__/__snapshots__/npmToPlugin.spec.ts.snap b/plugins/plugin-md-power/__test__/__snapshots__/npmToPlugin.spec.ts.snap index 35896e62..7cdbf42e 100644 --- a/plugins/plugin-md-power/__test__/__snapshots__/npmToPlugin.spec.ts.snap +++ b/plugins/plugin-md-power/__test__/__snapshots__/npmToPlugin.spec.ts.snap @@ -48,12 +48,12 @@ npm i --save-peer package3 npm run docs -