Hexo用Leancloud实现阅读量和评论数的统计与排序

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

阅读量统计

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

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

以yilia为例，在after-footer.ejs里添加：

<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里添加：

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里添加：

<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里添加：

<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>