用JQuery实现文章打赏弹窗功能

Author Avatar
Joshua 8月 21, 2017
  • 在其它设备中阅读本文章

很多的博客的博主们都喜欢在每篇文章的底部加入一个打赏的功能，虽然不会有人真的给打赏一些小费，但它可以使博客的功能结构更加的丰富起来。况且读者是否打赏全凭个人心情决定，倘若你的文章勾勒出一点他/她的共鸣和感慨，那恭喜你，你已经有拥戴者了。

step 1： 查看打赏效果

请点击该文字底部滑到底部，查看打赏功能效果。以确保是否喜欢该效果，同时为了把握整个功能的全貌。

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

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div class="content">
	<p>
		<a href="javascript:void(0)" class="dashang" onclick="dashangToggle()" title="打赏">赞赏支持</a>
	</p>
	<span class="donate_txt">
		<%=theme.donate_message%>
    </span>
	<div class="shang_box">
		<a href="javascript:void(0)" class="shang_close" onclick="dashangToggle()" title="关闭">
			<img src="/img/close.jpg"/>
		</a>
		<div class="shang_tit">
			<p><%=theme.donate_message%></p>
		</div>
		<div class="shang_payimg">
			<img src="<%- theme.alipay %>" alt="扫码支持" title="扫一扫" width="168px" height="168px">
		</div>
		<div class="pay_explain">
			扫码打赏，你说多少就多少
		</div>
		<div class="shang_payselect">
			<label class="pay_item checked" data-id="alipay">
				<input class="radiobox" name="Fruit" type="radio" checked>
				<img src="/img/alipay.jpg" alt="支付宝">
			</label>
			<label class="pay_item" data-id="weipay">
				<input class="radiobox" name="Fruit" type="radio">
				<img src="/img/wechat.jpg" alt="微信支付">
			</label>
		</div>
	</div>
</div>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".pay_item").click(function(){
    $(this).addClass('checked').siblings('.pay_item').removeClass('checked');
    var dataid=$(this).attr('data-id');
    if (dataid=="alipay") {
        $(".shang_payimg img").attr("src","<%- theme.alipay %>");
    };
    if (dataid=="weipay") {
        $(".shang_payimg img").attr("src","<%- theme.wechatpay %>");
    };
});
});
function dashangToggle(){
    $(".shang_box").slideToggle("fast");
}
</script>

其中第24行和第28行代码中插入的图片分别为
支付宝图标和微信图标

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

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
.content{
    margin:20px auto;
    text-align: center;
}
.shang_box{
    width:360px;
    height: 375px;
    border: 1px solid #dedede;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    position: fixed;
    z-index: 1000;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    left:50%;
    top:50%;
    margin-left:-180px;
    margin-top:-220px;
    display: none;
}
.dashang{
    border: none;
    border-radius: 20px;
    color: white;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    background-color: #FF6347;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    -ms-transition: background 0.4s;
    transition: background 0.4s
}
.dashang:hover {
    background-color: #FF0000
}
.dashang .donate_txt {
    display: block;
    color: #9d9d9d;
    font: 14px/2 "Microsoft Yahei"
}
.shang_box .shang_close{
    float: right;
    display: inline-block;
}
.shang_tit{
    width: 100%;
    height: 35px;
    margin-top: 20px;
    text-align: center;
    line-height: 15px;
    color: #a3a3a3;
    font-size: 16px;
    font-weight: 700;
}
.shang_payimg{
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 6px solid #FF4500;
    margin: 0 auto;
    border-radius: 5px;
}
.shang_payimg img{
    display: block;
    text-align: center;
}
.pay_explain{
    text-align: center;
    margin: 10px auto;
    font-size: 12px;
    color: #545454;
}
.shang_payselect{
    text-align: center;
    margin: 20px auto 0;
    height: 40px;
    width: 280px;
}
.shang_payselect .pay_iten{
    cursor:pointer;
    display: inline-block;
    margin-right: 10px;
}
.radiobox{
    width: 16px;
    height: 16px;
    margin-top: 5px;
}

你可以选择将该样式代码添加到source\css\style.min.css中，也可以选择直接将该代码添加到step1中创建的denote.ejs中，此时记得加上<style type="text/css"></style>标签

step 4： 将打赏模块整合到文章中

在layout\post.ejs中添加如下代码

1
2
3
<% if (theme.donate){ %>
    <%- partial('_partial/donate') %>
<% } %>

step 5： 编写配置文件

我们可以在_config.yml文件中关闭和打开打赏功能，自定义设置打赏文案，并设置打赏二维码图片路径

1
2
3
4
5
6
7
8
#是否开启打赏功能
donate: true
#打赏文案
donate_message: 欣赏此文？求鼓励，求支持！
#支付宝二维码路径
alipay: /img/alipayimg.jpg
#微信支付二维码路径
wechatpay: /img/weipayimg.jpg

赞赏支持

欣赏此文？求鼓励，求支持！

扫码支持
扫码打赏，你说多少就多少