前言

转载自:网站添加点赞、踩功能 | 轻笑Chuckle (qcqx.cn)

效果预览

部署OrLike

注册登录LeanCloud并创建应用->回到首页点击应用设置

点击应用凭证并保存AppIDAppKey的值

点击数据存储->结构化数据->创建Class,名称设置为OrLike,不用改其余配置

点击一键部署),将应用部署到Vercel,未注册Vercel请参考添加Twikoo实现博客在线评论

由于Vercel域名被墙,需要修改Vercel域名,请参考添加Twikoo实现博客在线评论

添加环境变量

今天完全搞忘了这一步导致云函数一直报错500,蠢哭了~_~

打开刚刚部署的项目点击settings

点击Environment Variables并填入KeyValue,这里注意:Key填”APPID”和”APPKEY”

前端部署

butterfly主题框架为例:

修改themes\butterfly\layout\includes\post\reward.pug,在末尾添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
#orlike-box.orlike-box
script.
(() => {
function loadOrLike () {
new OrLike({
serverUrl: "你的api",
el: ".orlike-box",
days: 30,
});
}
window.pjax ? loadOrLike() : window.addEventListener('load', loadOrLike)
})()

修改themes\butterfly\layout\includes\header\post-info.pug,在末尾添加以下代码,注意缩进在.meta-firstline内,与上方if保持一致即可

1
2
3
4
5
span.post-meta-orlike
i.iconfont.icon-aixin.fa-fw.post-meta-icon
span.post-meta-label= '点赞数:'
a(href=url_for(page.path) + '#orlike-box')
span.orlike-count

新建Blog\source\js\orlike.js,路径中缺少的文件夹或文件直接创建即可,添加下列代码

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
const version = "V0.1.33"; function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); var expires = "expires=" + d.toGMTString(); document.cookie = cname + "=" + cvalue + "; " + expires; }
function getCookie(cname) {
var name = cname + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } }
return "";
}
function createLink(url) { let link = $(document.createElement('link')); link.attr('href', url); link.attr('rel', 'stylesheet'); link.attr('type', 'text/css'); $('link').last().after(link); }
function OrLike({ serverUrl = "", el = "", days = 30, style = "", ifont = "", icon = { like: "fa fa-thumbs-up", dislike: "fa fa-thumbs-down" }, } = {}) { this.serverUrl = serverUrl; this.el = el; this.style = style; this.ifont = ifont; this.days = days; this.icon = icon; this.ckid = ""; this.prepare(); this.init(); }
OrLike.prototype.prepare = function () {
$(this.el).addClass("orlike-loading"); if (this.style != "") { createLink(this.style); }
if (this.ifont != "") { createLink(this.ifont); }
}
OrLike.prototype.init = function () {
server_url = this.serverUrl; obj = this; $.ajax({
type: 'GET', url: server_url + '/tmp', dataType: 'jsonp', jsonp: "callback", jsonpCallback: "success", xhrFields: { withCredentials: true }, async: true, crossDomain: true, success: function (data) {
let template = $(data.template); let icon_like = template.siblings("a.likeit.orlike").children("i"); let icon_dislike = template.siblings("a.dislikeit.orlike").children("i"); icon_like.attr('class', obj.icon.like); icon_dislike.attr('class', obj.icon.dislike); if (obj.icon.like == false)
icon_like.remove(); if (obj.icon.dislike == false)
icon_dislike.remove(); $(obj.el).removeClass("orlike-loading"); $(obj.el).html(template); obj.ckusr(obj); $('a.likeit.orlike').click({ obj: obj }, obj.like); $('a.dislikeit.orlike').click({ obj: obj }, obj.dislike);
},
});
}
OrLike.prototype.ckusr = function (obj) {
server_url = this.serverUrl; $.ajax({
type: 'GET', url: server_url + '/ckusr', dataType: 'jsonp', jsonp: "callback", jsonpCallback: "success", xhrFields: { withCredentials: true }, async: false, crossDomain: true, success: function (data) {
if (data.stat == 'ok' && data.uid != "") {
obj.ckid = data.ckid; if (!getCookie(data.ckid)) { setCookie(data.ckid, data.uid, obj.days); }
obj.query();
}
else { console.error('connect orlike failed!!!'); }
},
});
}
OrLike.prototype.query = function () {
server_url = this.serverUrl; $.ajax({
type: 'GET', url: server_url + '/qry?link=' + window.location.pathname, dataType: 'jsonp', jsonp: "callback", jsonpCallback: "success", xhrFields: { withCredentials: true }, crossDomain: true, success: function (data) {
if (data.stat == 'ok') {
$('a.likeit.orlike i span').text(data['like']);
$('span.post-meta-orlike a span').text(data['like']);
$('a.dislikeit.orlike i span').text(data['dislike']);
}
else { console.error('query orlike failed!!!'); }
},
});
}
OrLike.prototype.orl = function (obj, method) { server_url = obj.serverUrl; req_url = server_url + '/orl?method=' + method + '&link=' + window.location.pathname + '&' + obj.ckid + '=' + getCookie(obj.ckid); $.ajax({ type: 'GET', url: req_url, dataType: 'jsonp', jsonp: "callback", jsonpCallback: "success", xhrFields: { withCredentials: true }, crossDomain: true, success: function (data) { obj.query(); }, }); }
OrLike.prototype.like = function (event) { obj = event.data.obj; obj.orl(obj, 'like'); }
OrLike.prototype.dislike = function (event) { obj = event.data.obj; obj.orl(obj, 'dislike'); }

打开主题配置文件_config.butterfly.yml,搜索inject引入orlike.jsJQ

1
2
3
4
5
inject:
head:
bottom:
- <script defer="true" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- <script defer="true" src="/js/orlike.js"></script>

打开Blog\source\css\custom.css,缺少的文件夹或文件直接创建即可,在末尾写入下列代码并在主题配置文件_config.butterfly.yml引入

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
.orlike {
color: rgba(255, 255, 255);
font-size: 26px!important;
line-height: 2;
text-shadow: 5px 5px 5px #2ed0d9fc;
}
[data-theme=dark]
.orlike {
color: rgba(255, 255, 255, 0.85);
text-shadow: 4px 4px 4px #23a8af99;
}
.orlike:first-child{
margin-right: 36px;
}
.orlike span {
margin-left: 0.3rem;
}
.orlike-box{
margin: 15px 0 0 0;
display: flex;
width: 100%;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
position: relative;
overflow: hidden;
height: 52px;
}
.orlike:hover{
color: #f07e7e!important;
}
[data-theme=dark]
.orlike:hover{
color: #e87373e8!important;
}
.orlike-loading {
display: block;
height: 39px;
width: 10px!important;
border-radius: 50%;
border: 2px solid #acacac;
border-bottom-color: transparent;
-webkit-animation: orlike-loadingRotate 0.75s linear infinite;
animation: orlike-loadingRotate 0.75s linear infinite;
}
@-webkit-keyframes orlike-loadingRotate {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes orlike-loadingRotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
1
2
3
4
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
- <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

hexo三连

1
hexo cl && hexo g && hexo s