文章水印

pengzhanbo

734字约2分钟

2024-04-10

概述

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

水印仅在文章页面生效。如首页、博客页等其他页面不会注入水印。

启用水印

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

.vuepress/config.ts

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

export default defineUserConfig({
  theme: plumeTheme({
    // watermark: true, // 使用默认配置的水印
    watermark: {
      global: true, // 全局开启水印
      image: '/images/watermark.png', // 水印图片
      content: 'vuepress plume', // 水印内容， 如果配置了 image, 则优先使用 image
      opacity: 0.1, // 透明度
      rotate: -22, // 旋转角度
      width: 100, // 水印宽度
      height: 100, // 水印高度
      textColor: '#fff', // 文字颜色
      fullPage: true, // 是否全屏, 非全屏时水印仅覆盖文章内容
      gapX: 20, // 水印横向间距
      gapY: 20, // 水印纵向间距
      onlyPrint: true, // 只在打印时生效
      matches: ['/article/xxx', '^/note/', 'notes/guide/xx.md'], // 非全局启用时，匹配页面路径或文件路径来启用水印
    }
  })
})

全局启用

当 watermark 配置为 true 时，主题全局开启水印。还可以通过 watermark.global 配置是否开启全局水印。

部分页面启用

当 watermark.global 为 false 时，主题虽然启用了水印功能，但是需要自行控制哪些页面显示水印。

主题提供了两种方式来控制水印的显示:

watermark.matches

export default defineUserConfig({
  theme: plumeTheme({
    // watermark: true, // 使用默认配置的水印
    watermark: {
      global: false,
      matches: [
        // 可以是 md 文件的相对路径
        'notes/guide/xx.md',
        // 可以是 文件夹的路径
        '/notes/vuepress-theme-plume/',
        // 可以是 访问地址的请求路径，对该访问路径下所有文章 都生效
        '/vuepress-theme-plume/',
        // 可以是 具体的某个页面的请求路径
        '/article/f8dnci3/',
        // 如果是 `^` 开头，则匹配该正则表达式的页面
        '^/(a|b)/',
      ],
    }
  })
})

frontmatter.watermark

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

---
watermark: true
---

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

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

图片水印

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

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

export default defineUserConfig({
  theme: plumeTheme({
    watermark: {
      image: '/images/watermark.png', // 水印图片
      width: 100, // 水印宽度
      height: 100, // 水印高度
    }
  })
})

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

---
watermark:
  image: /images/watermark.png
  width: 100
  height: 100
---

示例

图片水印

文字水印

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

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

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

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

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

当同时设置了 image 和 content 时， image 优先于 content。