Watermark

About 266 wordsLess than 1 minute

2025-10-09

Overview

The theme's built-in watermark plugin adds watermarks to the entire site or individual pages.

Related plugin: @vuepress/plugin-watermark

For feature details, please refer to Watermark Feature

Usage

.vuepress/config.ts
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',
        // ...
      }
    },
  })
})

For configuration entry priority information, please refer to Plugin Configuration Entry.

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.

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 for configuration options.

frontmatter
---
watermark:
  width: 200
  height: 200
  content: Your content
  opacity: 0.5
---