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

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

方法一：自搭服务

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

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>

具体参考本人博客。

方法三：使用不蒜子

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

评论