在原来的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
文件,其内容为
|
|
修改head.ejs
修改theme/你的主题/layout/_partial/head.ejs
文件,在head标签的最后插入:
|
|
注意Lean Cloud引用的js文件位置可能会变化,如果代码里位置打不开的话,记得去官方的JavaScript SDK文档找一下最新的位置。
修改after-footer.ejs
修改theme/你的主题/layout/_partial/after-footer.ejs
文件,在最后插入:
|
|
这段代码的核心逻辑就是对Counter对象的增加和查询,每一篇文章都会有一个time字段来记录访问次数。这里查询的时候我用的是文章通过Hexo生成的URL作为主键的,所以post文件夹目录下的文件名一旦取好就不要轻易修改了,要不然访问次数会重新计算的:)。
修改config.yml
最后,修改theme/你的主题/config.yml
文件,在widgets:
选项找个位置下添加- popular_posts
即可。
小结
插件的效果可以见我博客的右侧”浏览数目“插件,样式和文章显示数目可以直接在代码里改,浏览量数据都存在“Counter”表中,见图(顺便测试下七牛云):
PS:这个浏览量数据是可以自己改的,我是原来是照搬的wordpress的数据,它包括了Robot和人访问量的总和,感觉不太靠谱,不利于新文章上榜,现在全都除以10了:)。