Watermark
Overview
The theme's built-in watermark plugin adds watermarks to the entire site or individual pages.
Related plugin: @vuepress/plugin-watermark
Usage
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
// watermark: true,
watermark: {
// enabled: false, // boolean type controls global enablement
enabled: page => true, // function type filters which pages enable watermark
/**
* Whether to enable full-page watermark, defaults to `true`,
* When set to `false`, watermark is only displayed in the content area.
*/
fullPage: true,
/** @see https://zhensherlock.github.io/watermark-js-plus/zh/config/ */
watermarkOptions: {
content: 'your watermark',
// ...
}
},
// Can also be configured via plugins.watermark, but not recommended
plugins: {
watermark: {}
}
})
})Configuration Options
enabled
Type:
boolean | ((page: Page) => boolean)Default:
falseDetails:
Specifies which pages should have watermarks added.
Pages with a
truevalue will have watermarks applied.
watermarkOptions
Type:
WatermarkOptionsDefault:
undefinedDetails: Configuration options refer to watermark-js-plus.
watermarkOptions.parent
Type:
stringDefault:
bodyDetails: Parent element selector for adding watermarks.
By default inserted into the body, can be specified to insert into a specific element on the page.
Frontmatter
watermark
Type:
boolean | WatermarkOptionsDetails:
When type is
boolean, indicates whether to enable watermark.When type is
WatermarkOptions, indicates current page watermark configuration.Refer to watermark-js-plus for configuration options.
---
watermark:
width: 200
height: 200
content: Your content
opacity: 0.5
---Contributors
Changelog
38505-on