如何为博客增加打赏功能

很多朋友喜欢在网络上分享自己的学习心得、工作经验、技术见解，自己呕心沥血写的好文章当然是非常希望得到认可。本文介绍怎么为博客文章增加打赏功能。

我的博客使用的是maupassant主题，原来的主题没有打赏功能，接下来看看怎么自己实现打赏功能。最终的效果请看本文末尾，另外，本文介绍的方法我已经在GitHub上实现了，如果不想自己动手，那就使用我写好的现成的吧~

增加css文件

在主题的css文件夹下（我的目录为themes/maupassant/source/css）增加donate.scss文件，内容如下：

.donate_bar {
    text-align: center;
    margin-top: 5%
}

.donate_bar a.btn_donate {
    display: inline-block;
    width: 82px;
    height: 82px;
    margin-left: auto;
    margin-right: auto;
    background: url(http://img.t.sinajs.cn/t5/style/images/apps_PRF/e_media/btn_reward.gif)no-repeat;
    -webkit-transition: background 0s;
    -moz-transition: background 0s;
    -o-transition: background 0s;
    -ms-transition: background 0s;
    transition: background 0s
}

.donate_bar a.btn_donate:hover {
    background-position: 0 -82px
}

.donate_bar .donate_txt {
    display: block;
    color: #9d9d9d;
    font: 14px/2 "Microsoft Yahei"
}
.donate_bar.hidden{
    display: none
}

.post-donate{
    margin-top: 80px;
}

#donate_guide{
    height: 210px;
    width: 420px;
    margin: 0 auto;
}

#donate_guide img{
    height: 200px;
    height: 200px;
}

增加jade文件

在主题的_partial文件夹下(我的目录为themes/maupassant/layout/_partial)新增donate.jade文件，内容如下：

.post-donate
    #donate_board.donate_bar.center
        a#btn_donate.btn_donate(href='javascript:;', title='打赏')
        .donate_txt
         |  ↑
         br
         != theme.donate.message
         br
    #donate_guide.donate_bar.center.hidden
        img(src=theme.donate.qrcode, title='微信打赏')
    script(type='text/javascript').
        document.getElementById('btn_donate').onclick = function(){
            $('#donate_board').addClass('hidden');
            $('#donate_guide').removeClass('hidden');
        }

在base.jade文件中引用css文件

在文件themes/maupassant/layout/base.jade的head部分引用donate.css文件：

link(rel='stylesheet', type='text/css', href=url_for(theme.css) + '/donate.css')

在post.jade中加入打赏功能

准备工作已经完成，现在可以在themes/maupassant/layout/post.jade文件中想要显示打赏功能的位置加上如下代码：

if theme.donate.enabled == true
    include _partial/donate

上面代码中我在主题_config.yml文件中配置了是否启用打赏功能的配置项，如果配置为true，则启用打赏功能，否则禁止打赏，配置如下：

donate:
  enabled: true
  message: 此文有用? 求鼓励!
  qrcode: http://7xlune.com1.z0.glb.clouddn.com/%E5%BE%AE%E4%BF%A1%E6%94%B6%E6%AC%BE.png

可以发现，在donate.jade文件中也用到了以上配置，message表示打赏标题，qrcode表示微信/支付宝收款二维码。