docs: update docs

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: {

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

@@ -4,8 +4,8 @@ author: Plume Theme
 createTime: 2024/04/10 20:28:18
 permalink: /article/97s6ha1e/
 watermark:
-  fullPage: true
+  contentType: text
-  width: 150
+  content: 全屏水印
 ---
 
 ## 概述

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
 ---
 
 ## 概述

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
 ---
 
 ## 概述

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, // 使用默认配置的水印
+    plugins: {
-    watermark: {
+      // watermark: true,
-      global: true, // 全局开启水印
+      watermark: {
-      image: '/images/watermark.png', // 水印图片
+        // enabled: false,  // boolean 类型控制是否全局启用
-      content: 'vuepress plume', // 水印内容， 如果配置了 image, 则优先使用 image
+        enabled: page => true, // function 类型 过滤哪些页面启用水印
-      opacity: 0.1, // 透明度
+        delay: 500, // 添加水印的延时。以毫秒为单位。
-      rotate: -22, // 旋转角度
+
-      width: 100, // 水印宽度
+        /** @see https://zhensherlock.github.io/watermark-js-plus/zh/config/ */
-      height: 100, // 水印高度
+        watermarkOptions: {
-      textColor: '#fff', // 文字颜色
+          content: 'your watermark',
-      fullPage: true, // 是否全屏, 非全屏时水印仅覆盖文章内容
+          // ...
-      gapX: 20, // 水印横向间距
+        }
-      gapY: 20, // 水印纵向间距
+      }
-      onlyPrint: true, // 只在打印时生效
-      matches: ['/article/xxx', '^/note/', 'notes/guide/xx.md'], // 非全局启用时，匹配页面路径或文件路径来启用水印
     }
   })
 })
@@ -49,34 +47,32 @@ export default defineUserConfig({
 
 ### 全局启用
 
-当 `watermark` 配置为 `true` 时， 主题全局开启水印。还可以通过 `watermark.global` 配置是否开启全局水印。
+当 `plugins.watermark` 配置为 `true` 时， 主题全局开启水印。
-
-### 部分页面启用
-
-当 `watermark.global` 为 `false` 时，主题虽然启用了水印功能，但是需要自行控制哪些页面显示水印。
-
-主题提供了两种方式来控制水印的显示:
-
-#### watermark.matches
 
 ```ts
 export default defineUserConfig({
   theme: plumeTheme({
-    // watermark: true, // 使用默认配置的水印
+    plugins: {
-    watermark: {
+      watermark: true,
-      global: false,
+    }
-      matches: [
+  })
-        // 可以是 md 文件的相对路径
+})
-        'notes/guide/xx.md',
+```
-        // 可以是 文件夹的路径
+
-        '/notes/vuepress-theme-plume/',
+### 部分页面启用
-        // 可以是 访问地址的请求路径，对该访问路径下所有文章 都生效
+
-        '/vuepress-theme-plume/',
+主题提供了两种方式控制部分页面启用水印。
-        // 可以是 具体的某个页面的请求路径
+
-        '/article/f8dnci3/',
+#### watermark.enabled
-        // 如果是 `^` 开头，则匹配该正则表达式的页面
+
-        '^/(a|b)/',
+```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: {
+    plugins: {
-      image: '/images/watermark.png', // 水印图片
+      watermark: {
-      width: 100, // 水印宽度
+        watermarkOptions: {
-      height: 100, // 水印高度
+          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
+  width: 200
-  height: 100
+  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: {
+    plugins: {
-      content: '自定义文字',
+      watermark: {
-      textColor: '#fff', // 文字颜色
+        watermarkOptions: {
+          content: '自定义文字',
+          fontColor: '#fff', // 文字颜色
+        }
+      }
     }
   })
 })
@@ -161,12 +171,10 @@ export default defineUserConfig({
 ---
 watermark:
   content: 自定义文字
-  textColor: #fff
+  fontColor: #fff
 ---
 ```
 
-当同时设置了 `image` 和 `content` 时， `image` 优先于 `content`。
-
 ## 示例
 
 - [内容水印](/article/2z59hh8g/)

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/)
 
 ## 案例