Overview

Article watermarking is powered by @vuepress/plugin-watermark.

The theme supports adding watermarks to articles. Both full-page watermarks and content-area watermarks are supported, along with image watermarks and text watermarks.

Enabling Watermark

Watermark functionality is disabled by default in the theme. You need to enable it in the theme configuration.

.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 to control global enablement
      enabled: page => true, // function type to filter which pages enable watermark
      delay: 500, // Delay for adding watermark. In milliseconds.

      /**
       * Whether to use full-page watermark, defaults to `true`.
       * When set to `false`, the watermark is only displayed in the content area.
       */
      fullPage: true,

      /** @see https://zhensherlock.github.io/watermark-js-plus/zh/config/ */
      watermarkOptions: {
        content: 'your watermark',
        // ...
      }
    }
  })
})

Global Enablement

When plugins.watermark is set to true, the theme enables watermark globally.

export default defineUserConfig({
  theme: plumeTheme({
    watermark: true,
  })
})

Partial Page Enablement

The theme provides two methods to control watermark enablement on specific pages.

watermark.enabled

export default defineUserConfig({
  theme: plumeTheme({
    watermark: {
      // Pages returning true will enable watermark, others will disable it
      enabled: page => page.path.includes('/article/'),
    }
  })
})

frontmatter.watermark

Add frontmatter.watermark as true in the md file:

---
watermark: true
---

You can also customize the watermark configuration for the current page:

---
watermark:
  content: My Custom Content
  globalAlpha: 0.2
  rotate: 45
---

Image Watermark

The theme supports using images as watermarks.

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,
      }
    }
  })
})

You can also add configuration in the md file to set watermark for the current page:

---
watermark:
  contentType: image
  image: /images/watermark.png
  width: 200
  height: 200
  imageWidth: 100
  imageHeight: 100
---

Example

Image Watermark

Text Watermark

The theme supports using text as watermarks.

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    watermark: {
      watermarkOptions: {
        content: 'Custom Text',
        fontColor: '#fff', // Text color
      }
    }
  })
})

You can also add configuration in the md file to set watermark for the current page:

---
watermark:
  content: Custom Text
  fontColor: #fff
---

Frontmatter

The theme supports adding frontmatter.watermark in md files to set watermarks for individual pages.

---
watermark:
  content: My Custom Content
---

For supported configuration options, please refer to: watermark-js-plus

Additionally, fullPage is supported to control whether to display the watermark full-screen.

---
watermark:
  fullPage: false
---

Examples

• Content Watermark
• Full-page Watermark

Contributors

pengzhanbo

Changelog

10/9/25, 7:46 AM

View All Changelog

• 38505-docs: update en docs (#708)on 10/9/25