简要介绍个人基于watermark-js-plus开发的一款GitBook水印插件，可用于给GitBook所有页面添加自定义水印，且能根据需求动态的开启或关闭。

原始插件

原始插件watermark-js-plus的使用很简单，参考使用入门只需要基于下述步骤就能快速的实现一个水印效果

  1. 引入类似如下js

    <script src="https://cdn.jsdelivr.net/npm/watermark-js-plus/dist/index.iife.min.js"></script>

  2. 添加下述代码

    const watermark = new WatermarkPlus.Watermark({
 content: 'hello my watermark',
 width: 200,
 height: 200
})
watermark.create();

  3. 展示效果如下，可参见完整demo

    水印插件显示效果

GitBook插件开发

前述的插件是基于纯JavaScript实现的，不能直接在GitBook中使用，需要遵循GitBook的插件规范开发相应的插件。

由于原始插件是在页面加载完毕后执行的，故在GitBook中同样需要类似的实现，需要涉及到GitBook的事件函数。由于网络上关于GitBook的插件开发资料较少，可参考这篇文章或这篇文章，也可参考其它的GitBook插件是如何开发的，从中学习相关事件和钩子函数(Hooks)的使用。

为了让插件的使用更灵活，如可动态开启或关闭水印，动态设置水印内容等，可通过pluginsConfig来动态配置插件信息。

相关开发步骤如下：

  1. 在package.js中添加类似如下类容，其中的信息可根据个人实际情况填写，该文件主要用于npm发布文件时使用

    {
  "name": "gitbook-plugin-watermark-fox",
  "description": "Add watermark to GitBook document to protect copyright",
  "main": "index.js",
  "version": "0.0.3",
  "author": {
    "name": "lucumt",
    "email": "lucumt@gmail.com"
  },
  "keywords": [
    "gitbook",
    "gitbook-plugin",
	"custom",
	"watermark"
  ],
  "engines": {
    "gitbook": ">=2.4.3"
  },
  "homepage": "https://github.com/gitbook-plugin-fox/gitbook-plugin-watermark-fox",
  "repository": {
    "type": "git",
    "url": "https://github.com/gitbook-plugin-fox/gitbook-plugin-watermark-fox.git"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "license": "Apache 2",
  "dependencies": {
  }
}

  2. 在插件根目录下创建一个名为index.js的文件，内容如下

    module.exports = {
   book: {
      assets: './assets',
      js: [
         'watermark.min.js',
         'plugin.js'
      ],
   }
};

  3. 在插件根目录下创建一个名为assets的文件夹，然后将原始插件的js文件放入该目录下，文件名称可随意命名

  4. 在assets目录下创建一个名为plugin.js的文件，并写入如下内容。该文件主要包含两部分，从第5行到第17行用于读取pluginsConfig下watermark-fox里面的相关配置，识别水印是否开启以及对应的配置项，第18行到第23行则用于根据配置项创建水印并渲染。

    require([
   'gitbook'
], function (gitbook) {
   var watermarkConfig = {};
   gitbook.events.bind('start', function (e, config) {
      let defaultConfig = {
         content: 'www.gitbook.com',
         width: 200,
         height: 200,
         fontColor: '#d0d0d0',
         enable: true
      };
      let customConfig = config['watermark-fox'];
      for (let key of Object.keys(defaultConfig)) {
         watermarkConfig[key] = customConfig[key] ?? defaultConfig[key];
      }
   });
   gitbook.events.bind('page.change', function (e) {
      if (watermarkConfig.enable) {
         const watermark = new WatermarkPlus.Watermark(watermarkConfig);
         watermark.create();
      }
   });
});

  5. 至此，插件编写完毕，可通过npm link在本地直接测试，也可通过npm publish发布到公共仓库测试。

使用展示

可基于下述步骤验证前面开发的插件：

  1. 在book.js中添加类似如下代码，出于篇幅考虑，book.js中多余的代码已省略

    module.exports = {
    plugins: [
        'watermark-fox' 			  // 加载该插件
    ],
    pluginsConfig: {
        "watermark-fox": {
            "content": "www.foo.com", // 水印内容
            "width": 200,             // 单个水印的宽度
            "height": 200,            // 单个水印的高度
            "fontColor": "#d0d0d0",   // 水印字体颜色
            "enable": true            // 是否开启该插件
        },
    }
};

  2. 执行gitbook serve启动GitBook程序

  3. 在浏览器中打开http://127.0.0.1:4000，可看见所有页面均显示水印，插件正常工作。

    GitBook水印显示效果