文章水印

pengzhanbo

581字约2分钟

2024-04-10

概述

文章水印由 @vuepress/plugin-watermark 提供支持。

主题支持在文章中添加水印。支持全屏水印和内容水印，同时还支持图片水印和文字水印。

启用水印

主题默认不启用水印功能。你需要在主题配置中开启。

.vuepress/config.ts

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

export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      // watermark: true,
      watermark: {
        // enabled: false,  // boolean 类型控制是否全局启用
        enabled: page => true, // function 类型 过滤哪些页面启用水印
        delay: 500, // 添加水印的延时。以毫秒为单位。

        /**
         * 是否全屏水印，默认为 `true`，
         * 设置为 `false` 时，水印仅在 内容区域中显示。
         */
        fullPage: true,

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

全局启用

当 plugins.watermark 配置为 true 时，主题全局开启水印。

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

部分页面启用

主题提供了两种方式控制部分页面启用水印。

watermark.enabled

export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      watermark: {
        // 返回结果为 true 的将启用水印，否则禁用
        enabled: page => page.path.includes('/article/'),
      }
    }
  })
})

frontmatter.watermark

在 md 文件中添加 frontmatter.watermark 为 true ：

---
watermark: true
---

还可以个性化配置当前页面的水印：

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

图片水印

主题支持使用图片作为水印。

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

export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      watermark: {
        watermarkOptions: {
          contentType: 'image',
          image: '/images/watermark.png',
          width: 200,
          height: 200,
          imageWidth: 100,
          imageHeight: 100,
        }
      }
    }
  })
})

也可以在 md 文件中添加配置，为当前页面设置水印：

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

示例

图片水印

文字水印

主题支持使用文字作为水印。

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

export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      watermark: {
        watermarkOptions: {
          content: '自定义文字',
          fontColor: '#fff', // 文字颜色
        }
      }
    }
  })
})

也可以在 md 文件中添加配置，为当前页面设置水印：

---
watermark:
  content: 自定义文字
  fontColor: #fff
---

Frontmatter

主题支持在 md 文件中添加 frontmatter.watermark 为单个页面设置水印。

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

支持的配置项请参考：watermark-js-plus

同时，还额外支持 fullPage 控制是否全屏显示。

---
watermark:
  fullPage: false
---