mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
102 lines
2.3 KiB
Markdown
102 lines
2.3 KiB
Markdown
---
|
|
title: Watermark
|
|
createTime: 2025/10/09 15:37:18
|
|
permalink: /en/config/watermark/
|
|
---
|
|
|
|
## Overview
|
|
|
|
The theme's built-in watermark plugin adds watermarks to the entire site or individual pages.
|
|
|
|
Related plugin: [@vuepress/plugin-watermark](https://ecosystem.vuejs.press/zh/plugins/features/watermark.html)
|
|
|
|
## Usage
|
|
|
|
```ts title=".vuepress/config.ts" twoslash
|
|
// @errors: 7006
|
|
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: `false`
|
|
|
|
- Details:
|
|
|
|
Specifies which pages should have watermarks added.
|
|
|
|
Pages with a `true` value will have watermarks applied.
|
|
|
|
### watermarkOptions
|
|
|
|
- Type: `WatermarkOptions`
|
|
|
|
- Default: `undefined`
|
|
|
|
- Details: Configuration options refer to [watermark-js-plus](https://zhensherlock.github.io/watermark-js-plus/zh/config/).
|
|
|
|
#### watermarkOptions.parent
|
|
|
|
- Type: `string`
|
|
|
|
- Default: `body`
|
|
|
|
- Details: 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 | WatermarkOptions`
|
|
|
|
- Details:
|
|
|
|
When type is `boolean`, indicates whether to enable watermark.
|
|
|
|
When type is `WatermarkOptions`, indicates current page watermark configuration.
|
|
|
|
Refer to [watermark-js-plus](https://zhensherlock.github.io/watermark-js-plus/zh/config/) for configuration options.
|
|
|
|
```md
|
|
---
|
|
watermark:
|
|
width: 200
|
|
height: 200
|
|
content: Your content
|
|
opacity: 0.5
|
|
---
|
|
```
|