小玩具-微信引流插件

缘由

用gitbook做笔记时，同时会将文章发布到微信公众号，但是查找了很多插件，没有发现合适使用的，于是造了个轮子自己使用，gitbook-plugin-drainage

原理

gitbook插件开发其实很简单，主要是两个文件 package.json 和 index.js

• package.json 是 node 的基本文件，主要是一些介绍啥的
• index.js 是主要的插件文件，涉及到三个函数 book, hooks 和 filters
• book 里面主要放一些自定义的文件。如css等
• hooks 主要核心的代码
• filters 需要的一些参数或者函数

实现

把css放在了assets文件夹下面，需要定义公众号图片以及尺寸，所以可以传入三个参数

module.exports = {
  book: {
    assets: './assets',
    css: [
      'footer.css'
    ],
  },
  hooks: {
    'page:before': function(page) {
      var _bg = "https://gitee.com/ixnzone/img-bed/raw/master/wechat.jpg"
          _height = "411"
          _width = "540"
      if(this.options.pluginsConfig['drainage']) {
          _bg = this.options.pluginsConfig['drainage']['image'] || _bg
          _height = this.options.pluginsConfig['drainage']['height'] || _height
          _width = this.options.pluginsConfig['drainage']['width'] || _width
      }
      var str = ' \n\n<footer class="drainage-footer"><div align="center"><img src="' + _bg + 
      '" height="' + _height + '" width="'+ _width + '" /></div></footer>'
      page.content = page.content + str;
      return page;
    }
  },
  filters: {
  }
};

使用

需要引入插件，由于上传到npm未成功，所以需要手动引入地址，具体配置如下

{
    "author": "xnzone",
    "title": "csnote",
    "description": "csnote",
    "language": "zh-hans",
    "gitbook": "3.2.3",
    "plugins": [
        "drainage@git+https://github.com/xnzone/gitbook-plugin-drainage.git#0.0.1"
    ],
    "pluginsConfig": {
        "drainage": {
            "image": "https://gitee.com/ixnzone/img-bed/raw/master/wechat.jpg",
            "height": "274",
            "width": "360"
        }
    }
}

这个插件会自动在文章的每一页的结尾添加一个这样的图片，用于引流到微信公众号