如何在Hexo+Fluid主题下加入打赏功能
本文最后更新于:2 年前
前言:
看到别人的博客有打赏功能,好像是别的主题也有这样的默认功能?辣么,我也想要。
搜寻过程
还是没有找到能够将Fluid和打赏联系起来的博客,但是Hexo各个主题大同小异,我又找到了一篇相关的博客[1]。
思想其实很简单,就是自己定一个一个div插入页面中。div为ejs文本,然后写一个样式表,在渲染的时候插入指定位置即可。
实现过程
话不多说,上代码:
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路径下。
- 然后在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;
}
- 接着就找文章模板,就是layout的post.ejs,我们在指定位置插入下面的代码:
<% if (theme.post.donate!=false && theme.post.donate!=false){ %>
<%- partial('_partial/donate') %>
<% } %>
然后在主题配置文件中设置post下添加:
# 打赏
# 是否开启打赏功能
donate: true
# 打赏文案
donate_message: 坚持技术分享,你的支持将鼓励我继续创作!
接下来我们看看效果吧:
总结
技术分享本是不易,若是能从中找到乐趣便已足够。