hexo添加打赏功能

杂谈
hexo, 打赏
文章目录
  1. 1. 第一步：创建打赏html代码文件
  2. 2. 第二步：创建打赏css样式文件
  3. 3. 第三步：将创建的css文件和ejs文件整合到主题中
  4. 4. 第四步：编写配置文件

本文将介绍如何在hexo中添加打赏功能

第一步：创建打赏html代码文件

首先咱们在主题下layout/commmon文件里，创建一个名叫：donate.ejs的文件
在里面输入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- 添加捐赠图标 -->
<div class="post-donate" style="margin-bottom: 30px;margin-top: 10px;">
    <div id="donate_board" class="donate_bar center">
        <a id="btn_donate" class="btn_donate" href="javascript:;" title="donate"></a>
        <span class="donate_txt">
           <%=theme.donate_message%>
        </span>
        <br>
    </div>
    <div id="donate_guide" class="donate_bar donate_bar2 center hidden">
        <img src="/css/images/alipay.jpg" id="weixin" title="alipay doante" alt="alipay doante">
        <img src="/css/images/wechatpay.jpg" title="wechatpay donate" id="zhifubao" alt="echatpay donate">
    </div>
    <script type="text/javascript">
        $('#weixin').hover()
        document.getElementById('btn_donate').onclick = function () {
            $('#donate_board').addClass('hidden');
            $('#donate_guide').removeClass('hidden');
        }
    </script>
</div>

其中，二维码图片只需放入主题中的source/css/images文件夹内，img的src设置src=”/css/images/alipay.jpg”

第二步：创建打赏css样式文件

然后在主题source/css/_partial目录下创建一个相应的css文件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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
.donate_bar {
  text-align: center;
  margin-top: 5%;
}
.donate_bar2 {
  z-index: 9999;
  text-align: center;
  top: 50%;
  left: 50%;
  width: 660px;
  height: 360px;
  margin: -180px 0 30px -330px;
  border-radius: 5px;
  border: solid 2px #666;
  background-color: #fff;
  box-shadow: 0 0 10px #666;
}
.donate_bar a.btn_donate {
  display: inline-block;
  width: 82px;
  height: 82px;
  margin-left: auto;
  margin-right: auto;
  background: url(/css/images/donate.gif) no-repeat;
  -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;
}
@media screen and (min-width: 559px) {
  #donate_guide {
    height: 210px;
    width: 420px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 559px) {
  #donate_guide {
    height: 420px;
    width: 210px;
    margin: 0 auto;
  }
}
#donate_guide img {
  height: 200px;
  width: 200px;
}

注意：以上赏字图片同样放入source/css/images文件夹内，背景图片引用如下方式：

1
background: url(/css/images/donate.gif) no-repeat;

或者采用外链https方式引用，否则浏览器警报不安全。

第三步：将创建的css文件和ejs文件整合到主题中

首先修改主题source/css目录下的style.styl文件，在其中加入@import “_partial/donate”
接着，在layout/commmon/article.ejs中，在

1
<footer class="article-footer">

前面加入：

1
2
3
<div id="donate" style="text-align:center">
 <%- partial('donate') %>
</div>

如果你想自定义一个页面是否带有打赏的地方，则换成以下代码：

1
2
3
4
5
<% if(!index && theme.donate && (post.donate || post.donate == undefined)){ %>
	<div id="donate" style="text-align:center">
	<%- partial('donate') %>
	</div>
<% } %>

第四步：编写配置文件

在主题配置文件 _config.yml添加打赏相关配置，根据配置 控制文章是否开启打赏功能，还可以自定义设置打赏文案。例如：

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

donate为false，则关闭打赏功能，如果要单独控制某篇文章，则donate为true的情况下，新建文章时，只需要在该篇文章上添加 donate: false即可。

评论