174 lines
3.9 KiB
Markdown
174 lines
3.9 KiB
Markdown
---
|
||
title: 文章水印
|
||
author: pengzhanbo
|
||
icon: material-symbols-light:branding-watermark-outline
|
||
createTime: 2024/04/10 20:14:57
|
||
permalink: /guide/features/watermark/
|
||
---
|
||
|
||
## 概述
|
||
|
||
主题支持在文章中添加水印。支持 全屏水印 和 内容水印，同时还支持 图片水印 和 文字水印 。
|
||
|
||
水印 仅在 文章页面 生效。如首页、博客页等其他页面不会注入水印。
|
||
|
||
## 启用水印
|
||
|
||
主题默认不启用水印功能。你需要在主题配置中开启。
|
||
|
||
::: code-tabs
|
||
@tab .vuepress/config.ts
|
||
|
||
```ts
|
||
import { defineUserConfig } from 'vuepress'
|
||
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'], // 非全局启用时，匹配页面路径或文件路径来启用水印
|
||
}
|
||
})
|
||
})
|
||
```
|
||
|
||
:::
|
||
|
||
### 全局启用
|
||
|
||
当 `watermark` 配置为 `true` 时， 主题全局开启水印。还可以通过 `watermark.global` 配置是否开启全局水印。
|
||
|
||
### 部分页面启用
|
||
|
||
当 `watermark.global` 为 `false` 时，主题虽然启用了水印功能，但是需要自行控制哪些页面显示水印。
|
||
|
||
主题提供了两种方式来控制水印的显示:
|
||
|
||
#### watermark.matches
|
||
|
||
```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)/',
|
||
],
|
||
}
|
||
})
|
||
})
|
||
```
|
||
|
||
#### frontmatter.watermark
|
||
|
||
在 md 文件中添加 `frontmatter.watermark` 为 `true` ：
|
||
|
||
```md
|
||
---
|
||
watermark: true
|
||
---
|
||
```
|
||
|
||
还可以个性化配置当前页面的水印：
|
||
|
||
```md
|
||
---
|
||
watermark:
|
||
content: My Custom Content
|
||
opacity: 0.2
|
||
rotate: 45
|
||
---
|
||
```
|
||
|
||
## 图片水印
|
||
|
||
主题支持使用 图片 作为水印。
|
||
|
||
```ts
|
||
import { defineUserConfig } from 'vuepress'
|
||
import { plumeTheme } from 'vuepress-theme-plume'
|
||
|
||
export default defineUserConfig({
|
||
theme: plumeTheme({
|
||
watermark: {
|
||
image: '/images/watermark.png', // 水印图片
|
||
width: 100, // 水印宽度
|
||
height: 100, // 水印高度
|
||
}
|
||
})
|
||
})
|
||
```
|
||
|
||
也可以在 md 文件中添加配置，为当前页面设置水印：
|
||
|
||
```md
|
||
---
|
||
watermark:
|
||
image: /images/watermark.png
|
||
width: 100
|
||
height: 100
|
||
---
|
||
```
|
||
|
||
### 示例
|
||
|
||
[图片水印](/article/i4cuuonn/)
|
||
|
||
## 文字水印
|
||
|
||
主题支持使用 图片 作为水印。
|
||
|
||
```ts
|
||
import { defineUserConfig } from 'vuepress'
|
||
import { plumeTheme } from 'vuepress-theme-plume'
|
||
|
||
export default defineUserConfig({
|
||
theme: plumeTheme({
|
||
watermark: {
|
||
content: '自定义文字',
|
||
textColor: '#fff', // 文字颜色
|
||
}
|
||
})
|
||
})
|
||
```
|
||
|
||
也可以在 md 文件中添加配置，为当前页面设置水印：
|
||
|
||
```md
|
||
---
|
||
watermark:
|
||
content: 自定义文字
|
||
textColor: #fff
|
||
---
|
||
```
|
||
|
||
当同时设置了 `image` 和 `content` 时， `image` 优先于 `content`。
|
||
|
||
## 示例
|
||
|
||
- [内容水印](/article/2z59hh8g/)
|
||
- [全屏水印](/article/97s6ha1e/)
|