「用户分享」使用 LeanCloud 为 Hexo 博客添加文章浏览量统计组件

NPC_expired 社区 NPC
15-01-19
1

作者：山寨叮当猫
原文地址：博客地址

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

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

修改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);
        }
        }
    )
    });


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

修改 config.yml

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

小结

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

LeanCould数据管理

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

1 人赞了这个帖子.