自我感觉Leancloud非常好用啊XD!

阅读量统计

Hexo想实现博客阅读量统计需要借助统计网站,Leancloud是比较不错的选择。

在你的应用里创建名为"Counter"的Class,注意权限要给成无限制(所以一定要设置Web安全域名!)。

以yilia为例,在after-footer.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
<script src="<%- theme.js_cdn.jquery %>"></script>
<script src="<%- theme.js_cdn.av %>"></script>
<script type="text/javascript">
if(<%- theme.leancloud_visitors.enable %>){
var leancloud_app_id = '<%- theme.leancloud_visitors.app_id %>';
var leancloud_app_key = '<%- theme.leancloud_visitors.app_key %>';
AV.init({
appId: leancloud_app_id,
appKey: leancloud_app_key
});
var pageViewsLength = $(".pageViews").length;
var isIndex = $("#page-nav").length > 0 ?true:false;
function showTime() {
var Counter = AV.Object.extend("Counter");
if(isIndex){
$(".pageViews").each(function(){
showPageViewsNum($(this),Counter);
});
}else{
addPageViewsNum($(".pageViews"));
showPageViewsNum($(".pageViews"),Counter);
}
}
function showPageViewsNum(ele,Counter){
var query = new AV.Query("Counter");
var url = ele.attr('id').trim();
query.equalTo("words",url);
query.find().then(function(results){
if (results.length>0) $(document.getElementById(url)).text(results[0].get("views"));
else $(document.getElementById(url)).text('0');
},function(error){$(document.getElementById(url)).text('0');});
}
function addPageViewsNum(ele){
var url = ele.attr('id').trim();var title = $('.article-title').text().trim();
var Counter = AV.Object.extend("Counter");
var now=new AV.Query(Counter);now.equalTo("words",url);
now.find().then(function(results){
if (results.length>0){
var query=results[0];
query.increment("views");
query.fetchWhenSave(true);
query.save();
} else{
var query = new Counter;
query.set("words",url);
query.set("title",title);
query.set("views",1);
query.save(null,{}).then(function (object) {});
}
},function(error){});
}
if(pageViewsLength){
showTime();
}
}
</script>

差不多就是检查这篇文章有没有被访问过,有的话直接更新原来的信息,将views加一,否则创建新的信息。

显示阅读量的话,根据你提供的url来获取到对应的信息,得到views,然后用js更改网页上的指定位置。在article.ejs的合适位置添加:

1
<span id="<%- url_for(post.path) %>" class="pageViews">X</span>

当然,还需要在_config.yml里添加:

1
2
3
4
5
6
7
8
leancloud_visitors:
enable: true
app_id: 你的ID
app_key: 你的KEY

js_cdn:
jquery: https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js
av : //cdn1.lncld.net/static/js/2.5.0/av-min.js

题外话:原先阅读量采用的是一次加一条信息的方法,但是直到星期四学弟们集体写vbs“攻击”了我的博客……上千条信息我TM根本没法删……现在这种方法就可以直接改views,相对来说方便很多。

阅读量排行

因为信息中存了views,而且Leancloud自带很多有用的操作,所以我们可以实现阅读量排行!

首先在你想显示的地方加上<ul class="HotArticle"></ul>用来得到排行列表,class可以随便给(但是最好不要和其他class一样,不然可能会出锅QAQ)。

然后在after-footer.ejs里添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
var leancloud_app_id = '<%- theme.leancloud_visitors.app_id %>';
var leancloud_app_key = '<%- theme.leancloud_visitors.app_key %>';
AV.init({
appId: lealeancloud_app_keyncloud_app_id,
appKey: leancloud_app_key
});
var Counter=AV.Object.extend("Counter");var query=new AV.Query(Counter);
query.descending("views");query.limit(10);
query.find().then(function(results){
for(var i=0;i<results.length;i++){
var counter=results[i];
var title=counter.get("title");
var url=counter.get("words");
var views=counter.get("views");
$('.HotArticle').append('<li><a href="'+url+'">'+title+'</a><span>'+views+'</span></li>');
//$('.class')中的class一定要和上面的class一样
}
},function(error){});
</script>

不难看出这就是调用了Leancloud自带的排序,然后输出到排行列表里。最后改一下排行列表的样式就行了~~~

评论数统计

Emm……这个有些复杂,但并不是很难实现。

首先你要使用Valine评论系统,是借助Leancloud实现的,跟着链接里说的做就行了。

题外话:Valine要实现邮箱提醒功能,一定要使用链接里Dalao给出的Valine.min.js(或者你可以自己写)

随便发几条评论,到Leancloud里查看,会发现储存下来的信息中有一个url记录了文章链接,用这个就可以搞事情了!

after-footer.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
<script type="text/javascript"> 
if(<%- theme.leancloud_visitors.enable %>){
var leancloud_app_id = '<%- theme.leancloud_visitors.app_id %>';
var leancloud_app_key = '<%- theme.leancloud_visitors.app_key %>';
AV.init({
appId: leancloud_app_id,
appKey: leancloud_app_key
});
var commentCountLength = $(".commentCount").length;
var isIndex = $(".commentCount").length > 1 ?true:false;
function showCount() {
var Comment = AV.Object.extend("Comment");
if(isIndex){
$(".commentCount").each(function(){
showcommentCountNum($(this),Comment);
});
}else{
showcommentCountNum($(".commentCount"),Comment);
}
}
function showcommentCountNum(ele,Comment){
var query = new AV.Query("Comment");
var key = ele.attr('id').trim();var url = key.substring(0,key.length-12);
query.equalTo("url", url);
query.count().then(function (number) {
$(document.getElementById(key)).text(number? number : '0');
}, function (error) {
$(document.getElementById(key)).text('0');
});
}
if(commentCountLength){
showCount();
}
}
</script>

代码可能有些奇怪,不要在意QAQ。原理差不多就是统计出信息中url为当前文章链接的信息数量。

article.ejs的合适位置添加:

1
<span id="<%- url_for(post.path) %>commentCount" class="commentCount">X</span>

最近评论

和阅读量排行差不多啦,每条信息都会有个创建时间createdAt,按照这个排序之后取前若干个就行了。

先在要显示的地方添加<ul class="LatestComment"></ul>,然后在after-footer.ejs中添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
var leancloud_app_id = '<%- theme.leancloud_visitors.app_id %>';
var leancloud_app_key = '<%- theme.leancloud_visitors.app_key %>';
AV.init({
appId: leancloud_app_id,
appKey: leancloud_app_key
});
var Comment=AV.Object.extend("Comment");
var query=new AV.Query(Comment);
query.descending("createdAt");query.limit(5);
query.find().then(function(results){
for(var i=0;i<results.length;i++){
var comment=results[i];
var nick=comment.get("nick");
var link=comment.get("link");
var url=comment.get("url");
var words=comment.get("comment");
var time=comment.get("createdAt").toLocaleString();
$('.LatestComment').append('<li><a href="'+link+'">'+nick+'</a><a href="'+url+'#lv-container">'+time+'</a>发表:<br><div>'+words+'</div></a></li>');
}
},function(error){});
</script>

效果

阅读量和评论数统计:

阅读排行和最近评论:

参考