Watermark

VuePress Theme Hope allows you to add watermark with @vuepress/plugin-watermark.

Introduction

You can customize the watermark behavior with plugins.watermark in theme options, or with watermark in page frontmatter.

The simplest way is to set it to true to get a site name watermark:

• Enable globally:

  .vuepress/theme.ts

  import { 
  hopeTheme
   } from "vuepress-theme-hope";
  
  export default 
  hopeTheme
  ({
    
  plugins
  : {
      
  watermark
  : true,
    },
  });

• Enable in a specific page:

  example.md

  ---
  watermark: true
  ---

You can also fully customize the watermark:

• Customize globally:

  .vuepress/theme.ts

  import { 
  hopeTheme
   } from "vuepress-theme-hope";
  
  export default 
  hopeTheme
  ({
    
  plugins
  : {
      
  watermark
  : {
        
  watermarkOptions
  : {
          
  content
  : "Customized Content",
          
  movable
  : true,
          // other options
        },
      },
    },
  });

• Customize in a specific page:

  example.md

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

For detailed configuration, see watermark plugin docs.