使用LeanCloud平台为Hexo博客添加文章浏览量统计组件

在原来的wordpress博客中有一个WP-PostViews Plus插件，可以统计每篇文章的浏览量，可以为游客提供热门文章的信息，(顺便满足一下作者的虚荣心)。现在切换到静态博客Hexo了，就需要第三方服务来实现这样的动态数据处理。这里要感谢师弟ariwaranosai给我推荐的LeanCloud平台，以及为hexo博客添加访问次数统计功能（基于BAE）提供的思路。使用LeanCloud的优点是它自己实现了一个AV.view 类，不需要考虑JavaScript的跨站访问问题。

创建Lean Cloud应用

首先一句话介绍Lean Cloud:

LeanCloud（aka. AVOS Cloud）提供一站式后端云服务，从数据存储、实时聊天、消息推送到移动统计，涵盖应用开发的多方面后端需求。

我们只用到它的数据存储部分,具体步骤如下：

1. 首先到『控制台』创建一个应用，名字随便取。
2. 点击新建应用的『数据』选项，选择『创建Class』，取名为”Counter“。
3. 点击新建应用右上角的齿轮，在『应用Key』选项里得到APP ID 和 APP Key，在后面会用到。

修改Hexo页面

新建popular_posts.ejs

首先在theme/你的主题/layout/_widget目录下新建popular_posts.ejs文件,其内容为

<% if (site.posts.length){ %>
  <div class="widget-wrap">
    <h3 class="widget-title">浏览数目</h3>
    <div class="widget">
      <ul class="popularlist">
      </ul>
    </div>
  </div>
<% } %>

修改head.ejs

修改theme/你的主题/layout/_partial/head.ejs文件,在head标签的最后插入：

<script src="https://cdn1.lncld.net/static/js/av-min-1.2.1.js"></script>
  <script>AV.initialize("你的APP ID", "你的APP Key");</script>

注意Lean Cloud引用的js文件位置可能会变化，如果代码里位置打不开的话，记得去官方的JavaScript SDK文档找一下最新的位置。

修改after-footer.ejs

修改theme/你的主题/layout/_partial/after-footer.ejs文件,在最后插入：

<!--page counter part-->
<script>
function addCount (Counter) {
        url=$('.article-date').attr('href').trim();
        title = $('.article-title').text().trim();
        var query=new AV.Query(Counter);
        //use url as unique idnetfication
        query.equalTo("url",url);
        query.find({
            success: function(results){
                if(results.length>0)
                {
                    var counter=results[0];
                    counter.fetchWhenSave(true); //get recent result
                    counter.increment("time");
                    counter.save();
                }
                else
                {
                    var newcounter=new Counter();
                    newcounter.set("title",title);
                    newcounter.set("url",url);
                    newcounter.set("time",1);
                    newcounter.save(null,{
                        success: function(newcounter){
                        //alert('New object created');
                        },
                        error: function(newcounter,error){
                        alert('Failed to create');
                        }
                        });
                }
            },
            error: function(error){
                //find null is not a error
                alert('Error:'+error.code+" "+error.message);
            }
        });
}

$(function(){
        var Counter=AV.Object.extend("Counter");
        //only increse visit counting when intering a page
        if ($('.article-title').length == 1)
           addCount(Counter);
        var query=new AV.Query(Counter);
        query.descending("time");
        // the sum of popular posts
        query.limit(10); 
        query.find({
            success: function(results){
                    for(var i=0;i<results.length;i++)    
                    {
                        var counter=results[i];
                        title=counter.get("title");
                        url=counter.get("url");
                        time=counter.get("time");
                        // add to the popularlist widget
                        showcontent=title+" ("+time+")";
                        //notice the "" in href
                        $('.popularlist').append('<li><a href="'+url+'">'+showcontent+'</a></li>');
                    }
                },
            error: function(error){
                alert("Error:"+error.code+" "+error.message);
            }
            }
        )
        });
</script>

这段代码的核心逻辑就是对Counter对象的增加和查询，每一篇文章都会有一个time字段来记录访问次数。这里查询的时候我用的是文章通过Hexo生成的URL作为主键的，所以post文件夹目录下的文件名一旦取好就不要轻易修改了，要不然访问次数会重新计算的:)。

修改config.yml

最后，修改theme/你的主题/config.yml文件,在widgets:选项找个位置下添加- popular_posts即可。

小结

插件的效果可以见我博客的右侧”浏览数目“插件，样式和文章显示数目可以直接在代码里改,浏览量数据都存在“Counter”表中，见图（顺便测试下七牛云）：

PS：这个浏览量数据是可以自己改的，我是原来是照搬的wordpress的数据，它包括了Robot和人访问量的总和，感觉不太靠谱，不利于新文章上榜，现在全都除以10了:)。