diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts index 0de8c048..3024a5db 100644 --- a/docs/.vuepress/theme.ts +++ b/docs/.vuepress/theme.ts @@ -1,3 +1,4 @@ +import process from 'node:process' import themePlume from 'vuepress-theme-plume' import type { Theme } from 'vuepress' import { enNotes, zhNotes } from './notes.js' @@ -5,7 +6,7 @@ import { enNavbar, zhNavbar } from './navbar.js' export const theme: Theme = themePlume({ logo: '/plume.png', - hostname: 'https://plume.pengzhanbo.cn', + hostname: process.env.SITE_HOST || 'https://plume.pengzhanbo.cn', repo: 'https://github.com/pengzhanbo/vuepress-theme-plume', docsDir: 'docs', @@ -42,11 +43,6 @@ export const theme: Theme = themePlume({ ], navbarSocialInclude: ['github'], - watermark: { - global: false, - content: 'VuePress Plume', - }, - footer: { copyright: 'Copyright © 2021-present pengzhanbo' }, locales: { @@ -89,6 +85,7 @@ export const theme: Theme = themePlume({ kotlin: true, }, }, + comment: { provider: 'Giscus', comment: true, @@ -103,6 +100,13 @@ export const theme: Theme = themePlume({ lightTheme: 'light_protanopia', }, + watermark: { + enabled: false, + watermarkOptions: { + content: 'vuepress-theme-plume', + }, + }, + }, encrypt: { rules: { diff --git a/docs/1.示例/全屏水印.md b/docs/1.示例/全屏水印.md index a38b84bd..0b3f7e6f 100644 --- a/docs/1.示例/全屏水印.md +++ b/docs/1.示例/全屏水印.md @@ -4,8 +4,8 @@ author: Plume Theme createTime: 2024/04/10 20:28:18 permalink: /article/97s6ha1e/ watermark: - fullPage: true - width: 150 + contentType: text + content: 全屏水印 --- ## 概述 diff --git a/docs/1.示例/内容水印.md b/docs/1.示例/内容水印.md index 87c22623..fa960386 100644 --- a/docs/1.示例/内容水印.md +++ b/docs/1.示例/内容水印.md @@ -4,8 +4,10 @@ author: Plume Theme createTime: 2024/04/10 20:28:32 permalink: /article/2z59hh8g/ watermark: + content: Plume Theme fullPage: false - width: 150 + width: 200 + height: 200 --- ## 概述 diff --git a/docs/1.示例/图片水印.md b/docs/1.示例/图片水印.md index 98f08667..4c1535ab 100644 --- a/docs/1.示例/图片水印.md +++ b/docs/1.示例/图片水印.md @@ -4,8 +4,13 @@ author: Plume Theme createTime: 2024/04/11 06:07:50 permalink: /article/i4cuuonn/ watermark: - fullPage: true + contentType: image image: /plume.png + width: 200 + height: 200 + rotate: -22 + imageWidth: 100 + imageHeight: 100 --- ## 概述 diff --git a/docs/notes/theme/guide/功能/文章水印.md b/docs/notes/theme/guide/功能/文章水印.md index c5ad10aa..f95ef450 100644 --- a/docs/notes/theme/guide/功能/文章水印.md +++ b/docs/notes/theme/guide/功能/文章水印.md @@ -8,9 +8,9 @@ permalink: /guide/features/watermark/ ## 概述 -主题支持在文章中添加水印。支持 全屏水印 和 内容水印，同时还支持 图片水印 和 文字水印 。 +文章水印由 [@vuepress/plugin-watermark](https://ecosystem.vuejs.press/zh/plugins/watermark.html) 提供支持。 -水印 仅在 文章页面 生效。如首页、博客页等其他页面不会注入水印。 +主题支持在文章中添加水印。支持 全屏水印 和 内容水印，同时还支持 图片水印 和 文字水印 。 ## 启用水印 @@ -25,21 +25,19 @@ import { plumeTheme } from 'vuepress-theme-plume' export default defineUserConfig({ theme: plumeTheme({ - // watermark: true, // 使用默认配置的水印 - watermark: { - global: true, // 全局开启水印 - image: '/images/watermark.png', // 水印图片 - content: 'vuepress plume', // 水印内容， 如果配置了 image, 则优先使用 image - opacity: 0.1, // 透明度 - rotate: -22, // 旋转角度 - width: 100, // 水印宽度 - height: 100, // 水印高度 - textColor: '#fff', // 文字颜色 - fullPage: true, // 是否全屏, 非全屏时水印仅覆盖文章内容 - gapX: 20, // 水印横向间距 - gapY: 20, // 水印纵向间距 - onlyPrint: true, // 只在打印时生效 - matches: ['/article/xxx', '^/note/', 'notes/guide/xx.md'], // 非全局启用时，匹配页面路径或文件路径来启用水印 + plugins: { + // watermark: true, + watermark: { + // enabled: false, // boolean 类型控制是否全局启用 + enabled: page => true, // function 类型 过滤哪些页面启用水印 + delay: 500, // 添加水印的延时。以毫秒为单位。 + + /** @see https://zhensherlock.github.io/watermark-js-plus/zh/config/ */ + watermarkOptions: { + content: 'your watermark', + // ... + } + } } }) }) @@ -49,34 +47,32 @@ export default defineUserConfig({ ### 全局启用 -当 `watermark` 配置为 `true` 时， 主题全局开启水印。还可以通过 `watermark.global` 配置是否开启全局水印。 - -### 部分页面启用 - -当 `watermark.global` 为 `false` 时，主题虽然启用了水印功能，但是需要自行控制哪些页面显示水印。 - -主题提供了两种方式来控制水印的显示: - -#### watermark.matches +当 `plugins.watermark` 配置为 `true` 时， 主题全局开启水印。 ```ts export default defineUserConfig({ theme: plumeTheme({ - // watermark: true, // 使用默认配置的水印 - watermark: { - global: false, - matches: [ - // 可以是 md 文件的相对路径 - 'notes/guide/xx.md', - // 可以是 文件夹的路径 - '/notes/vuepress-theme-plume/', - // 可以是 访问地址的请求路径，对该访问路径下所有文章 都生效 - '/vuepress-theme-plume/', - // 可以是 具体的某个页面的请求路径 - '/article/f8dnci3/', - // 如果是 `^` 开头，则匹配该正则表达式的页面 - '^/(a|b)/', - ], + plugins: { + watermark: true, + } + }) +}) +``` + +### 部分页面启用 + +主题提供了两种方式控制部分页面启用水印。 + +#### watermark.enabled + +```ts +export default defineUserConfig({ + theme: plumeTheme({ + plugins: { + watermark: { + // 返回结果为 true 的将启用水印，否则禁用 + enabled: page => page.path.includes('/article/'), + } } }) }) @@ -98,7 +94,7 @@ watermark: true --- watermark: content: My Custom Content - opacity: 0.2 + globalAlpha: 0.2 rotate: 45 --- ``` @@ -113,10 +109,17 @@ import { plumeTheme } from 'vuepress-theme-plume' export default defineUserConfig({ theme: plumeTheme({ - watermark: { - image: '/images/watermark.png', // 水印图片 - width: 100, // 水印宽度 - height: 100, // 水印高度 + plugins: { + watermark: { + watermarkOptions: { + contentType: 'image', + image: '/images/watermark.png', + width: 200, + height: 200, + imageWidth: 100, + imageHeight: 100, + } + } } }) }) @@ -127,9 +130,12 @@ export default defineUserConfig({ ```md --- watermark: + contentType: image image: /images/watermark.png - width: 100 - height: 100 + width: 200 + height: 200 + imageWidth: 100 + imageHeight: 100 --- ``` @@ -139,7 +145,7 @@ watermark: ## 文字水印 -主题支持使用 图片 作为水印。 +主题支持使用 文字 作为水印。 ```ts import { defineUserConfig } from 'vuepress' @@ -147,9 +153,13 @@ import { plumeTheme } from 'vuepress-theme-plume' export default defineUserConfig({ theme: plumeTheme({ - watermark: { - content: '自定义文字', - textColor: '#fff', // 文字颜色 + plugins: { + watermark: { + watermarkOptions: { + content: '自定义文字', + fontColor: '#fff', // 文字颜色 + } + } } }) }) @@ -161,12 +171,10 @@ export default defineUserConfig({ --- watermark: content: 自定义文字 - textColor: #fff + fontColor: #fff --- ``` -当同时设置了 `image` 和 `content` 时， `image` 优先于 `content`。 - ## 示例 - [内容水印](/article/2z59hh8g/) diff --git a/readme.md b/readme.md index f71b3106..13c67e23 100644 --- a/readme.md +++ b/readme.md @@ -24,7 +24,7 @@ - 👀 支持 搜索、文章评论 - 👨‍💻‍ 支持 浅色/深色 主题 （包括代码高亮） - 📠 markdown 增强，支持 代码块分组、提示容器、任务列表、数学公式、代码演示 等 -- 📚 嵌入代码演示，支持 CodePen, Replit, JSFiddle, CodeSandbox 等 +- 📚 嵌入代码演示，支持 CodePen, JSFiddle, CodeSandbox 等 - 📊 嵌入图表，支持 chart.js，Echarts，Mermaid，flowchart - 🎛 资源嵌入，支持 PDF, bilibili视频，youtube视频等 - 🪞 支持全站水印、部分内容水印 @@ -57,7 +57,7 @@ export default defineUserConfig({ __options__ : `PlumeThemeOptions` -[查看 options 详细说明](https://plume.pengzhanbo.cn/config/basic/) +[查看 options 详细说明](https://theme-plume.vuejs.press//config/basic/) ## 案例