hexo添加打赏功能

Catalogue
  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即可。

Comments