作者:山寨叮当猫
原文地址:博客地址
在原来的 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” 表中,见图(顺便测试下七牛云):
PS:这个浏览量数据是可以自己改的,我是原来是照搬的 wordpress 的数据,它包括了 Robot 和人访问量的总和,感觉不太靠谱,不利于新文章上榜,现在全都除以 10 了:)。