为hexo博客添加访问次数统计功能

最新的统计服务已经开放,两行代码轻松搞定,你可以直接使用:不蒜子 微服务。

方法一:自搭服务

hexo是静态博客,虽有速度快的优点,但无法存储动态数据是不可否认的劣势之一。没有出路就要思考出路,没人阻止你借助第三方系统实现动态数据处理,比如评论功能借助Disqus多说。统计功能也可以这样处理,我们借助BAESAE平台搭建自己的统计服务。

SAE已经提供Counter服务,但是貌似只支持php语言,这里是SAE计数器服务示例。在BAE2.0中也有专门的Counter(计数器)服务,但是BAE3.0中尚未提供,应该是还未迁移过来。

这里以新版BAE,即BAE3.0为例介绍整个流程。难度不大,只简单说下。

创建bae应用

管理控制台,点击『创建应用』,创建你的应用。请参考新手入门

添加Redis服务

点击刚刚创建的应用,进入应用『基本信息』页面,点击『应用引擎』-『扩展服务』-『扩展新服务』-『Redis』,填写基本信息即可。请参考Redis(数据库)

也可以使用MySQL或MongoDB服务,我选择Redis的原因之一是其有原子自增操作incr。

jsonp跨域访问

以本文为例,hexo博客地址为http://ibruce.info,而bae应用地址为http://lbservice.duapp.com。两个不同的域之间,是不能直接访问数据的,此时就要借助jsonp,请参考JQuery中利用JSONP解决AJAX跨域问题JQuery+AJAX+JSONP跨域访问

修改hexo页面

打开footer.ejs编辑,增加代码。

<font id="counter">
本站共到访 <font id="counterValue" style="color:white">?</font>
</font>

<script type="text/javascript">
$(function(){
$.ajax({
type : "GET",
url : 'http://lbservice.duapp.com/xxx',
dataType : "jsonp",
jsonp : "jsonpCallback",
success : function(data) {
$("#counterValue").text(data);
},
error : function() {
$("#counter").html("");
}
});
});
</script>

修改应用代码

进入应用『基本信息』页面,点击『应用引擎』-『点击复制』SVN/GIT地址,获取源码到你喜欢的工具。
添加必要的Redis代码,关键内容如下。

// 配置相关信息
final String databaseName = "yBeHeL";
final String host = "redis.duapp.com";
final int port = 80;
final String username = "8TAbwkckuyxq";// 用户名(api key);
final String password = "HszPIhnaG9d";// 密码(secret key)
// 创建连接
Jedis jedis = new Jedis(host, port);
jedis.connect();
jedis.auth(username + "-" + password + "-" + databaseName);
// 操作数据库
jedis.set("ibruce.info", "0");
long counter = jedis.incr("ibruce.info");
// 准备输出
String jsonpCallback = request.getParameter("jsonpCallback");
PrintWriter out = response.getWriter();
out.println(String.format("try{%s(%s);}catch(e){}", jsonpCallback, counter));
out.flush();
out.close();

部署bae和hexo

通过SVN/GIT提交代码部署bae应用,然后在同一页面点击『快捷发布』完成发布。通过hexo d -g命令部署hexo代码。

小结

本文目的并不仅是添加统计功能,而是想抛砖引玉,介绍一种添加动态数据的通用方法,其他类似的需求都可以如此处理。如果你想为自己的hexo博客添加访问次数统计功能,又觉得太麻烦,我可以在我的bae应用下帮你统计,有需要的请留言。

上文所述的这种方法已经废弃,现在有更高大上的做法了,参考 hexo你的博客 补充部分。

方法二:使用firebase

在你的站点需要显示的位置添加标签:

<font id="counter"></font>

引入firebase:

<script src="//buru.u.qiniudn.com/firebase-2.0.5.js"></script>

你也可以添加firebase官网的链接,但我测试速度较慢。

引入计数:

<script src="//ibruce.info/js/counter.js"></script>

具体参考本人博客。

方法三:使用不蒜子

最新的统计服务,仅两行代码就搞定,你可以直接使用:不蒜子微服务,墙裂推荐。

评论