如何为博客增加打赏功能

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

我的博客使用的是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.centera#btn_donate.btn_donate(href='javascript:;', title='打赏').donate_txt|  &uarr;br!= theme.donate.messagebr#donate_guide.donate_bar.center.hiddenimg(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 == trueinclude _partial/donate

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

donate:enabled: truemessage: 此文有用? 求鼓励!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表示微信/支付宝收款二维码。