↑ 画面不动?没声音?点这里!(教程

由于本主题(Volantis)使用的 Valine 暂时仍然无法正常开启 Counter 页面计数,所以,在单一页面上展示出该页面的访问量就成了一个问题。不蒜子是个解决方式,但其加载巨慢而且仍属于个人维护、并不稳定。所以综合到最后,选择采用 LeanCloud 来完成这一功能。其主要思路就是访问页面时到对应的 LeanCloud 数据表中更新访问次数。不过暂时只能记录PV值。

从零开始引入计数代码

第一步

新增leancloud代码主体(lc_visitors.ejs),主要实现的是访问页面时leancloud访问数+1,并且返回该页面已有的访问量。

~\volantis\_third-party\lc_visitors.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
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
  
<!--由于主题包含valine.js,所以只引入av.js-->
<script src="//cdn1.lncld.net/static/js/2.5.0/av-min.js"></script>
<script type="text/javascript">
if(true){
var leancloud_app_id = 'WbLE88***********gzGzoHsz'; //y=偷懒直接硬写了
var leancloud_app_key = 'ycqjmt***********RkrdO';
AV.init({
appId: leancloud_app_id,
appKey: leancloud_app_key
});
var pageViewsLength = $(".pageViews").length;
var isIndex = $(".pageViews").length > 1 ?true:false;
function showTime() {
var Pageview = AV.Object.extend("Pageview");
if(isIndex){
$(".pageViews").each(function(){
showPageViewsNum($(this), Pageview);
});
}else{
addPageViewsNum($(".pageViews"));
}
}
//仅显示阅读量
function showPageViewsNum(ele, Pageview){
var id = ele.attr('id').trim();
var query = new AV.Query("Pageview");
query.equalTo("post_id", id);
query.descending('createdAt');
query.limit(1);
query.find().then(function (results) {
$(document.getElementById(id)).text(results && results.length > 0? results[0].get("count") : '0');
}, function (error) {
$(document.getElementById(id)).text('0');
});
}
//追加并显示阅读量
function addPageViewsNum(ele){
var id = ele.attr('id').trim();
var title = ele.attr('data-flag-title').trim();
var query = new AV.Query("Pageview");
query.equalTo("post_id", id);
query.descending('createdAt');
query.limit(1);
query.find().then(function (results) {
if (results.length == 0) {
saveNewPageview(id, title);
return;
}
var pageview = results[0];
var count = pageview.get("count");
count++;
pageview.set("count", count);
pageview.set("title", title);
pageview.save().then(function (pageview) {
$(document.getElementById(id)).text(count);
})
}, function (error) {
saveNewPageview(id, title);
})
}
function saveNewPageview(id, title) {
var Pageview = AV.Object.extend("Pageview");
var query = new Pageview;
query.save({
post_id: id,
title: title,
count: 1
}).then(function (pageview) {
$(document.getElementById(id)).text(pageview.count);
}, function (error) {
});
}
if(pageViewsLength){ //此处判断等于 1 在执行 可去除循环
showTime();
}
}
</script>

第二步

将leancloud代码主体(lc_visitors.ejs)引入到原来的主题模板中,紧跟在jquery的后面。

~\volantis\layout\_partial\scripts.ejs
1
2
3
4
5
6
7
8
  
<%- js(theme.plugins.jquery) %>
<!--引入代码-->
<%- partial('_third-party/lc_visitors') %>
<% if (theme.search && theme.search.enable) { %>
... ...
<% } %>
... ...

第三步

在原页面中插入显示访问量的代码段,这里我直接紧跟在meta信息的阅读时长统计后面了。

~\volantis\_meta\wordcount.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  
<% if (theme.plugins.wordcount) { %>
<div class="new-meta-item wordcount">
<a class='notlink'>
<i class="<%- theme.meta.wordcount.icon_wordcount %>" aria-hidden="true"></i>
<p><%- __('post.wordcount', wordcount(post.content))%></p>
</a>
</div>
<div class="new-meta-item readtime">
<a class='notlink'>
<i class="<%- theme.meta.wordcount.icon_duration %>" aria-hidden="true"></i>
<p><%- __('post.duration', min2read(post.content))%></p>
</a>
</div>
<!--添加显示访问量的代码(火焰图标+℃)-->
<div class="new-meta-item readtime">
<a class='notlink'>
<i class="fas fa-fire" aria-hidden="true"></i>
<p><span id="<%= post.path %>" class="pageViews" data-flag-title="<%= post.title || post.path %>"></span></p>
</a>
</div>
<% } %>

注意:以上只有部署后访问才有作用,在本地访问无效果。

LeanCloud并发查询429错误

这是第二次遇到了,每次鼓捣LeanCloud都会出现这个问题,主要还是其对访问做了限制。错误主要出现在列表页面,因为会同时查询多篇文章的访问量,所以会导致触发429错误。

我上次的解决方案:应对LeanCloud对于查询性能的限制

具体只需修改以下代码:

~\volantis\_third-party\lc_visitors.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  
<!--循环间隔地控制查询的触发-->
function showTime() {
if(isIndex){
var cnt = $(".pageViews").length;
var i = 0;
var interval = setInterval(function(){
if(i >= cnt)
clearInterval(interval);
else
showPageViewsNum($($(".pageViews")[i++]), AV.Object.extend("Pageview"));
},500);

}else{
addPageViewsNum($(".pageViews"));
}
}
... ...

最终效果:



😒 留下您对该文章的评价 😄



 评论




全站共计 303.9k 字,自豪地使用 Volantis 主题

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议