为你的博客添加访问量统计

相信很多程序员朋友们都拥有了自己的技术博客。像 Hexo, Jekyll 这样的静态网站生成器甚是好用，而对于相对动态的内容，比如评论框，也有诸如多说和 Disqus 的工具可以使用。

但是针对博客的访问量统计，却没有什么可用的工具。很多同学在我的博客中留言问我，我的博文中显示的访问量是怎么做到的？我曾经尝试依靠百度统计是不是能解决这个问题，然而我失败了。于是我自己用 PHP 写了一个很简单的服务来完成这件事，经过一次重构，我把它命名为 Hit Kounter 。

接下来会从以下几个方面介绍一下：

如何为你的博客添加访问统计
Hit Kounter 的 JS 接口
小结：Hit Kounter 的未来

如何为你的博客添加访问量统计

1. 引入脚本

<script src="http://jerry-cdn.b0.upaiyun.com/hit-kounter/hit-kounter-0.1.1.js"></script>

首先，在你的页面中引入这个脚本；由于你可能在每个页面都需要显示访问量，把它加入根模板也许是个不错的选择。

2. 显示当前页面的访问量

<span data-hk-page="current"> - </span>

你可以在页面的任何地方插入这句 HTML 片段，你之前引入的脚本会自动检查当前页面上带有 data-hk-* 属性的元素，并针对你给出的属性值向服务器请求数据，最后把得到的结果替换到上面的标签内。可以参考我博客中的例子。

3. 显示指定页面的访问量

如果你希望在文章列表页中显示各个页面的访问量分别是多少，那么你就要使用一个 url 来填充 data-hk-page 的属性值，就像这样：

<span data-hk-page="http://jerryzou.com/posts/design-for-all-mobile-resolution/"> - </span>

那么 Hit Kounter 检测到这个标签以后，就会向服务器请求该地址的具体访问量，并最终将默认值 ` - ` 替换为实际值。可以参考我博客中的例子。

Hit Kounter 的 JS 接口

Hit Kounter 会在全局注入 Icarus 对象，它是与服务器交互的数据接口。通过它，我们就可以直接向服务器发送请求。先看看下面这个例子：

Icarus.request({   api: 'hk.page.get',   v: '1.0',   pages: [     { url: 'http://test.com/1' },     { url: 'http://test.com/2' },     { url: 'http://test.com/3' }   ],   success: function(result) {     for (var i = 0; i < result.length; i++) {       console.log(result.domain, result.url, result.count);     }   },   failure: function(code, err) {     console.log(code, err);   } });