Gyorou的草稿本

很多童鞋喜欢用Hexo写博客。Hexo也提供了大量丰富的主题和插件，满足了我们日常的需求。但是我们能找到的插件往往完成度较低，或者无法满足我们的需求，这个时候，我们就需要自己动手写插件了。

需求

有些时候，我们希望在文章的末尾附上打赏的二维码，来让观众更好地支持自己。比较简单的方法就是在写文章的末尾贴上打赏自己的二维码就是了。但是这毕竟是重复劳动，久而久之就会觉得麻烦了。我们可以动手写一个插件，自动在生成页面的时候附上我们的二维码。

实现

切换到博客源码的根目录下面之后，添加scripts文件夹。按文档说明，所有scripts下面的js文件，Hexo都会在执行的时候读取。
我们这里需要的是，在render我们写的markdown文件成html之前，在原文插入包含打赏二维码图片。

在文档中，有这么一段例子我们可以用来参考。

1
2
3
4
hexo.extend.filter.register('before_post_render', function(data){
  data.title = data.title.toLowerCase();
  return data;
});

上面的例子做的事情，是在渲染之前，将文章的标题换成大写然后返回。
而我们需要做的，其实类似，渲染之前，在data.content之后加上我们打赏的二维码图片。

1
2
3
4
5
6
7
8
9
10
11
// scripts/wechat.js
const config = hexo.config;
const bar_code = hexo.config.wechat_pay;
hexo.extend.filter.register('before_post_render', data => {
    if (!bar_code || data.layout !== 'post') {
          return data; //如果没有设置打赏，就直接返回原来结果。
        }
    let  image = `<img src="#123;bar_code}" style="max-width: 200px;"/>`;
    data.content += `\n\n 如果你觉得本文有用，请给我一点支持。\n\n#123;image}`;
});

之后，在_config.yml中添加打赏相关的设定就是了。

1
wechat_pay: /images/wechat_pay.png

注意，wechat_pay.png就是包含你二维码的图片，将这个图片存放到source/images下面即可。

效果，如下。

Tag