文章水印
概述
文章水印由 @vuepress/plugin-watermark 提供支持。
主题支持在文章中添加水印。支持 全屏水印 和 内容水印，同时还支持 图片水印 和 文字水印 。
启用水印
主题默认不启用水印功能。你需要在主题配置中开启。
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
// watermark: true,
watermark: {
// enabled: false, // boolean 类型控制是否全局启用
enabled: page => true, // function 类型 过滤哪些页面启用水印
delay: 500, // 添加水印的延时。以毫秒为单位。
/**
* 是否全屏水印，默认为 `true`，
* 设置为 `false` 时，水印仅在 内容区域中显示。
*/
fullPage: true,
/** @see https://zhensherlock.github.io/watermark-js-plus/zh/config/ */
watermarkOptions: {
content: 'your watermark',
// ...
}
}
})
})全局启用
当 plugins.watermark 配置为 true 时， 主题全局开启水印。
export default defineUserConfig({
theme: plumeTheme({
watermark: true,
})
})部分页面启用
主题提供了两种方式控制部分页面启用水印。
watermark.enabled
export default defineUserConfig({
theme: plumeTheme({
watermark: {
// 返回结果为 true 的将启用水印，否则禁用
enabled: page => page.path.includes('/article/'),
}
})
})frontmatter.watermark
在 md 文件中添加 frontmatter.watermark 为 true ：
---
watermark: true
---还可以个性化配置当前页面的水印：
---
watermark:
content: My Custom Content
globalAlpha: 0.2
rotate: 45
---图片水印
主题支持使用 图片 作为水印。
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
watermark: {
watermarkOptions: {
contentType: 'image',
image: '/images/watermark.png',
width: 200,
height: 200,
imageWidth: 100,
imageHeight: 100,
}
}
})
})也可以在 md 文件中添加配置，为当前页面设置水印：
---
watermark:
contentType: image
image: /images/watermark.png
width: 200
height: 200
imageWidth: 100
imageHeight: 100
---示例
文字水印
主题支持使用 文字 作为水印。
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
watermark: {
watermarkOptions: {
content: '自定义文字',
fontColor: '#fff', // 文字颜色
}
}
})
})也可以在 md 文件中添加配置，为当前页面设置水印：
---
watermark:
content: 自定义文字
fontColor: #fff
---Frontmatter
主题支持在 md 文件中添加 frontmatter.watermark 为单个页面设置水印。
---
watermark:
content: My Custom Content
---支持的配置项请参考：watermark-js-plus
同时，还额外支持 fullPage 控制是否全屏显示。
---
watermark:
fullPage: false
---