最近几年大家逐渐开始形成了知识付费的习惯,而微信公众号的打赏功能典型代表,那有没有可能为个人独立博客也添加打赏功能呢?搜索一下,发现目前主流的博客平台都有类似的插件,而相对比较远古、同时也正是我在使用的Jekyll却没有这样的插件。不过好在开源,自己实现一个打赏功能也比较简单。

CSS

首先写一个独立的css文件放到 assets/css 目录下,这样可以不与原样式文件混在一起,方便维护。内容可以参考使用的css文件

然后在头文件里引用上述 css 即可,一般文件名为 head.htmlpost-head.html

<link  href="/assets/css/myreward.css" rel="stylesheet"  type="text/css">   

HTML

最后在文章页面post.html的合适位置(一般放文章内容最后),添加以下内容即可:

<div class="reward">
  <div class="reward-button"><span class="reward-code">
    <span class="alipay-code"> <img class="alipay-img wdp-appear" src="/assets/img/social/alipay.JPG"><b>支付宝打赏</b> </span>
    <span class="wechat-code"> <img class="wechat-img wdp-appear" src="/assets/img/social/wechat.JPG"><b>微信打赏</b> </span> </span>
  </div>
  <p class="reward-notice">您的打赏是对我最大的鼓励!</p>
</div>

将其中的img.src替换成自己的收款二维码,打赏功能就这样简单粗暴地实现了。

优化

作为有洁癖的程序员,上面做法显然不能让自己满意,哪天想把打赏功能去掉,又不得不在一大堆文件里找、删掉了这些代码,不方便维护。

其实我们可以做一个配置项,可以非常方便地配置是否启用打赏功能。这些配置项可以放在_config.yml中,包括是否启用、收款码的图片等,往_config.yml中添加以下内容:

# Reward
reward: true
reward-wechat: '/assets/img/social/wechat.JPG'
reward-alipay: '/assets/img/social/alipay.JPG'

然后同步修改 html :

{% if site.reward %}
<div class="reward">
    <div class="reward-button"><span class="reward-code">
        <span class="alipay-code"> <img class="alipay-img wdp-appear" src="{{ site.baseurl }}{{ site.reward-alipay }}"><b>支付宝打赏</b> </span>
        <span class="wechat-code"> <img class="wechat-img wdp-appear" src="{{ site.baseurl }}{{ site.reward-wechat }}"><b>微信打赏</b> </span> </span>
    </div>
    <p class="reward-notice">您的打赏是对我最大的鼓励!</p>
</div>
{% endif %}

这样,不启用打赏功能只需要把reward的值改成false就好了,而不用再去修改html。

支付宝打赏 微信打赏

您的打赏是对我最大的鼓励!