Hexo博客添加打赏功能

  • 文/一月筠 -- 转载请注明 --
  • 当你的博客搭建好之后，你或许想要添加一些更有趣的功能，比如说打赏，虽然说现在是共享经济，但也有付费阅读的需求。况且读者是否打赏全凭个人心情决定…

前言

当你的博客搭建好之后，你或许想要添加一些更有趣的功能，比如说打赏，虽然说现在是共享经济，但也有付费阅读的需求。况且读者是否打赏全凭个人心情决定，倘若你的文章勾勒出一点他/她的共鸣和感慨，那恭喜你，你已经有拥戴者了。

打赏的基本思路是将微信和支付宝的收款二维码放到每篇文章的最后，打赏的时候扫下二维码就可以了。

以 yilia/Yelee主题为例：

打赏功能效果图

step 1： 编写打赏模块的代码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<! -- 添加捐赠图标 -->
<div class ="post-donate">
    <div id="donate_board" class="donate_bar center">
        <a id="btn_donate" class="btn_donate" href="javascript:;" title="打赏"></a>
        <span class="donate_txt">
           ↑<br>
           <%=theme.donate_message%>
        </span>
        <br>
      </div>  
    <div id="donate_guide" class="donate_bar center hidden" >
        <!-- 方式一： 
            <img src="/img/Alipay.jpg" alt="支付宝打赏">
            <img src="/img/WeChatpay.jpg" alt="微信打赏">
        -->
        <!-- 方式二；
            step1：在_config.yml中添加配置
                Alipay: /img/Alipay.jpg
                WeChatpay: /img/WeChatpay.jpg
            step2：此处两张图片的路径分别设置为如下
                <img src="<%- theme.root_url %><%=theme.Alipay%>"
                <img src="<%- theme.root_url %><%=theme.WeChatpay%>"
        -->
        <!-- 支付宝打赏图案 -->
        <img src="<%- theme.root_url %>/img/Alipay.jpg" alt="支付宝打赏">
        <!-- 微信打赏图案 -->
        <img src="<%- theme.root_url %>/img/WeChatpay.jpg" alt="微信打赏">
    </div>
    <script type="text/javascript">
        document.getElementById('btn_donate').onclick = function(){
            $('#donate_board').addClass('hidden');
            $('#donate_guide').removeClass('hidden');
        }
    </script>
</div>
<! -- 添加捐赠图标 -->

step 2： 设置打赏模块的样式

source\css\_partial下新建donate.styl输入如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.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;
	<!-- 因为本 hexo 生成的博客所用的 theme 的 a:hover 带动画效果，为了在让打赏按钮显示效果正常 而 添加了以下几行 css，嵌入其它博客时不一定要它们。本段注释请在添加时删除-->
	-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;
}

最后，记得在source\css\style.styl中添加@import '_partial/donate'

step 3： 讲打赏模块整合到文章中

在layout\_partial\article.ejs中的<article> </article>标签内添加如下内容：

1
2
3
<% if (!index && theme.donate){ %>
	<%- partial('donate') %>
<% } %>
  • 如果你只想在所有post的文章页面添加打赏功能，可以参照以下：
1
2
3
4
5
6
<!-- 添加打赏功能 只在文章详情中显示-->
<% if (page.prev || page.next){ %>
<% if (!index && theme.donate){ %>
<%- partial('donate') %>
<% } %>
<% }%>
  • 如果你想在指定页面添加打赏功能，需在你的主题文件夹下的layout\_partial\article.ejs路径中，更改article.ejs中的内容。例如：只有页面的属性中添加了donate: true属性后，才显示打赏，则需在你的文章的头部添加上donate: true字段，article.ejs中需改为如下所示：
1
2
3
4
5
6
<!-- 添加打赏功能 -->
<% if (page.donate){ %>
<% if (!index && theme.donate){ %>
<%- partial('donate') %>
<% } %>
<% }%>

step 4： 编写配置文件

我们可以在主题的_config.yml文件中关闭和打开打赏功能，还可以自定义设置打赏文案。例如：

1
2
3
4
#是否开启打赏功能
donate: true
#打赏文案
donate_message: 欣赏此文？求鼓励，求支持！

大功告成，这样一个简单的打赏功能就实现了！
当然，你如果觉得麻烦，但是又想实现打赏功能，那么可以尝试下*云打赏*，据说一行代码集成打赏功能。

使用iframe嵌入打赏

如果想要更加方便快捷的添加打赏功能，可以使用ifram的方式直接嵌入到你的文章中。
示例如下：

1
<iframe src="https://yojoy.top/donate-page/sample1/index.html" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"  frameborder="0" scrolling="no" allowtransparency="true"></iframe>

查看效果：