如何在Hexo+Fluid主题下加入打赏功能

本文最后更新于:6 个月前

前言:


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

搜寻过程


还是没有找到能够将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路径下。

  1. 然后在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;
}
  1. 接着就找文章模板,就是layout的post.ejs,我们在指定位置插入下面的代码:
<% if (theme.post.donate!=false && theme.post.donate!=false){ %>
<%- partial('_partial/donate') %>
<% } %>

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

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

接下来我们看看效果吧:

donate

总结


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

参考文章



本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!