由于本主题（Volantis）使用的 Valine 暂时仍然无法正常开启 Counter 页面计数，所以，在单一页面上展示出该页面的访问量就成了一个问题。不蒜子是个解决方式，但其加载巨慢而且仍属于个人维护、并不稳定。所以综合到最后，选择采用 LeanCloud 来完成这一功能。其主要思路就是访问页面时到对应的 LeanCloud 数据表中更新访问次数。不过暂时只能记录PV值。
从零开始引入计数代码
第一步
新增leancloud代码主体（lc_visitors.ejs），主要实现的是访问页面时leancloud访问数+1，并且返回该页面已有的访问量。
~\volantis\_third-party\lc_visitors.ejs1
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>
|
<< 更多精彩尽在『程序萌部落』>>
<< https://www.cxmoe.com >>
第二步
将leancloud代码主体（lc_visitors.ejs）引入到原来的主题模板中，紧跟在jquery的后面。
~\volantis\layout\_partial\scripts.ejs1
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.ejs1
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.ejs1
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"));
}
}
... ...
|
最终效果：
😒 留下您对该文章的评价 😄
