前言：

---

看到别人的博客有打赏功能，好像是别的主题也有这样的默认功能？辣么，我也想要。

搜寻过程

---

还是没有找到能够将Fluid和打赏联系起来的博客，但是Hexo各个主题大同小异，我又找到了一篇相关的博客^[1]。

思想其实很简单，就是自己定一个一个div插入页面中。div为ejs文本，然后写一个样式表，在渲染的时候插入指定位置即可。

实现过程

---

话不多说，上代码：

1. layout\_partial下新建donate.ejs输入如下内容：

<! -- 添加捐赠图标 -->
<div class ="post-donate">
    <div id="donate_board" class="donate_bar center">
        <span class="donate_txt">
		   <%=theme.post.donate_message%>
        </span>
		<input type="button" id="btn_donate" style="background-color: red; color: white; border: none; height=35; width=80" value="打赏"/>
        <br>
      </div>  
	<div id="donate_guide" class="donate_bar center" style="display: none">
		<!-- 支付宝打赏图案 -->
		<img src="/img/ali_pay.png" alt="支付宝打赏"> 
		<!-- 微信打赏图案 -->
		<img src="/img/wechat_pay.png" alt="微信打赏">  
    </div>
	<script type="text/javascript">
		document.getElementById('btn_donate').onclick = function(){
			var qr=document.getElementById("donate_guide");
			"none"===qr.style.display?qr.style.display="block":qr.style.display="none"
		}
	</script>
</div>
<! -- 添加捐赠图标 -->

需要准备了两张图，一个是支付宝收款码，一个是微信收款码。放到img路径下。

2. 然后在css路径下新建一个_partial目录，新建一个donate.styl脚本。

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

.donate_bar{
	background-position: 0 -10px
}

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

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

#btn_donate{
	outline:none;
}

#donate_guide{
	height: 200px;
	width: 400px;
	margin: 0 auto;
}

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

3. 接着就找文章模板，就是layout的post.ejs，我们在指定位置插入下面的代码：

<% if (theme.post.donate!=false && theme.post.donate!=false){ %>
<%- partial('_partial/donate') %>
<% } %>

然后在主题配置文件中设置post下添加：

# 打赏
# 是否开启打赏功能
donate: true
# 打赏文案
donate_message: 坚持技术分享，你的支持将鼓励我继续创作！

接下来我们看看效果吧：

总结

---

技术分享本是不易，若是能从中找到乐趣便已足够。

参考文章

1. Hexo博客添加打赏功能 ↩
2. Markdown 插入脚注 ↩