mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
docs: update docs
This commit is contained in:
pengzhanbo
parent
715f48ed56
commit
0afd3e59ef
@ -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: {
|
||||
|
||||
@ -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: 全屏水印
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
@ -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: 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'], // 非全局启用时，匹配页面路径或文件路径来启用水印
|
||||
// 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, // 使用默认配置的水印
|
||||
plugins: {
|
||||
watermark: true,
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### 部分页面启用
|
||||
|
||||
主题提供了两种方式控制部分页面启用水印。
|
||||
|
||||
#### watermark.enabled
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
watermark: {
|
||||
global: false,
|
||||
matches: [
|
||||
// 可以是 md 文件的相对路径
|
||||
'notes/guide/xx.md',
|
||||
// 可以是 文件夹的路径
|
||||
'/notes/vuepress-theme-plume/',
|
||||
// 可以是 访问地址的请求路径，对该访问路径下所有文章 都生效
|
||||
'/vuepress-theme-plume/',
|
||||
// 可以是 具体的某个页面的请求路径
|
||||
'/article/f8dnci3/',
|
||||
// 如果是 `^` 开头，则匹配该正则表达式的页面
|
||||
'^/(a|b)/',
|
||||
],
|
||||
// 返回结果为 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({
|
||||
plugins: {
|
||||
watermark: {
|
||||
image: '/images/watermark.png', // 水印图片
|
||||
width: 100, // 水印宽度
|
||||
height: 100, // 水印高度
|
||||
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({
|
||||
plugins: {
|
||||
watermark: {
|
||||
watermarkOptions: {
|
||||
content: '自定义文字',
|
||||
textColor: '#fff', // 文字颜色
|
||||
fontColor: '#fff', // 文字颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -161,12 +171,10 @@ export default defineUserConfig({
|
||||
---
|
||||
watermark:
|
||||
content: 自定义文字
|
||||
textColor: #fff
|
||||
fontColor: #fff
|
||||
---
|
||||
```
|
||||
|
||||
当同时设置了 `image` 和 `content` 时， `image` 优先于 `content`。
|
||||
|
||||
## 示例
|
||||
|
||||
- [内容水印](/article/2z59hh8g/)
|
||||
|
||||
@ -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/)
|
||||
|
||||
## 案例
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user