watermark

Integrate watermark-js-plus into VuePress.

This plugin can add watermarks to pages. You can choose to add watermarks globally or on specific pages. You can also choose to add text watermarks or image watermarks.

Usage

npm i -D @vuepress/plugin-watermark@next

.vuepress/config.ts
import { watermarkPlugin } from '@vuepress/plugin-watermark'

export default {
  plugins: [
    watermarkPlugin({
      enabled: true,
      watermarkOptions: {
        content: 'My Site',
      },
    }),
  ],
}

Options

enabledboolean | ((page: Page) => boolean)

Defaulttrue

Specify which pages should have watermarks added.

Pages with a true value will have watermarks added.

watermarkOptionsWatermarkPureOptions

Watermark config, see watermark-js-plus for all available options.

watermarkOptions.parentstring

Default'body'

Parent element selector for watermark insertion.

By default, watermarks are inserted into the body element, but you can specify a different parent element on the page.

Frontmatter

watermarkboolean | WatermarkPureOptions

Whether to add a watermark to the current page, or the watermark config of the current page.

Set it to true to enable the watermark, or false to disable it when the watermark is enabled globally.

See watermark-js-plus for all available options.

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

Client Config

defineWatermarkConfig(config)

Type: (config: MaybeRefOrGetter<WatermarkOptions>) => void

Additional configuration to pass to watermark-js-plus.

.vuepress/client.ts
import { defineWatermarkConfig } from '@vuepress/plugin-watermark/client'

defineWatermarkConfig({
  // Set up additional watermark configurations here
})

In most cases, options should be defined in the Node.js configuration,
but there are special situations where client-side configuration is needed. For example,
you may need to control different watermark opacities or font colors
in dark/light mode, or pass callbacks such as onSuccess and extraDrawFunc.

.vuepress/client.ts
import { useDarkMode } from '@vuepress/helper/client'
import { defineWatermarkConfig } from '@vuepress/plugin-watermark/client'
import { computed } from 'vue'
import { defineClientConfig } from 'vuepress/client'

export default defineClientConfig({
  setup() {
    const isDark = useDarkMode()

    const watermarkConfig = computed(() => ({
      fontColor: isDark.value ? '#fff' : '#000',
      onSuccess: () => {
        console.log('success')
      },
    }))

    defineWatermarkConfig(watermarkConfig)
  },
})