​ 好多人选择用Hexo搭建自己的博客，毕竟他免费、快速、简洁，且网上有很多好看的主题可供选择，但有些主题不具备打赏功能，比如自己之前使用的BlueLake，试了试畅言评论的打赏功能，然而移动端不支持，在浏览别人的博客时发现了一个挺不错的打赏，于是找到主题，仿照着做了一个。

一、编写打赏模块

1. 找到一个自己喜欢的打赏功能，下载这个主题（这里以hiker主题为例）

git clone https://github.com/iTimeTraveler/hexo-theme-hiker.git themes/hiker

2. 切换到themes/hiker/layout/_partial目录下，找到定义打赏功能的donate文件，通常为.ejs或者.jade格式，将其复制到自己主题下相对应的位置。

注：.ejs文件与.jade文件为node中两种不同的模板引擎，如果你选取的打赏主题使用的与你博客使用的不是同一种模板，建议提前百度一下两种模板的基本语法与不同，接下来会用到。

3. 这里BlueLake主题使用的是.jade模板，所以需要将.ejs语法转换为.jade语法格式，并更改扩展名。（反过来操作也一样，最主要的是要了解相应语法，并进行相应转换）

源码：

修改后：

div#donation_div
	script(type='text/javascript', src=url_for(theme.js) + '/donate.js')	//这里引用js文件
	script.
		var a = new Donate({
      	title: '#{theme.donate.message}',
      	el: document.getElementById('donation_div'),
      	wechatImage: '#{theme.donate.wechatImage}',
      	alipayImage: '#{theme.donate.alipayImage}'
    });

二、增加js文件

1. 切换到themes/hiker/source/js/目录下，找到donate.js,并复制到自己主题的相应目录下（有些打赏功能使用jquery实现，相应的jquery.js也要复制）。

三、引用模板文件

1. 打开自己主题下的post文件（themes/BlueLake/layout/post.jade），在想要添加打赏功能的位置引用模板。

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

注： 这里根据自己所选择的打赏模板会略有不同，有的是在post中引用js文件。如果你按照前面的尝试报错，可以试着把引用js的语句添加在这两句之间，即：

if theme.donate.enable == true
       script(type='text/javascript', src=url_for(theme.js) + '/donate.js')
       include _partial/donate

四、添加css样式

1. 切换到themes/hiker/source/css/目录下，找到donate.css,并复制到自己主题的相应目录下
2. 切换到themes/BlueLake/layout/目录下，打开base.jade，在head部分引用css:

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

注： 如果觉得打赏样式和自己的主题不搭可自行修改css文件，修改前最好备份，js文件实现打赏功能，一般不要动。

五、添加配置文件，开启打赏功能

在主题_config.yml文件中添加:

donate:
    	enable: true
    	message: '谢谢你请我吃糖，我会更加努力的！'
    	wechatImage: /img/wepay.png
    	alipayImage: /img/alipay.png

注： 这里四个参数，enable为是否开启打赏功能； message为要显示的信息；后面两个是二维码存放的地址，直接放在blog/source/img/下面即可。

至此一个打赏功能就完成了，赶紧去试试吧！

打赏功能参考自： hiker主题