2015-05-20

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

统计每篇文章的浏览量，可以为游客提供热门文章的信息，(顺便满足一下作者的虚荣心)。现在切换到静态博客Hexo了，就需要第三方服务来实现这样的动态数据处理。

创建Lean Cloud应用

首先一句话介绍Lean Cloud:

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

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

首先到『控制台』创建一个应用，名字随便取。
点击新建应用的『数据』选项，选择『创建Class』，取名为”Counter“。
点击新建应用右上角的齿轮，在『应用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://leancloud.cn/scripts/lib/av-0.4.6.min.js"></script>
  <script>AV.initialize("你的APP ID", "你的APP Key");</script>

修改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即可。

转载于心怀畏惧的博客

lazy