这个是我很久之前准备开始用 Github issue 做博客时做的,从 hexo 迁移过去之后 发现用 github issue 写博客没有访客统计功能(虽然本来也没人看)。
但是由于不管是 github issues,还是 github 的 README,都只支持 markdown 语法,不能使用各种第三方统计了。
就自己做了一个访客统计的徽章( badge )服务。
原理很简单,徽章是一个 svg,你只需要在你的 issues 或者 readme 中添加一个 markdown 的图片:

当有人打开你的 issue 或者 github 仓库时,浏览器会加载这个图片,服务器就会发出一个请求。
之后根据请求里的 page_id 来计数,并将最新的数量生成到一个 svg 图片中,将这个 svg 返回,浏览器就可以显示出来了。
注意这里的参数:page_id, 需要自己手动给一个唯一的字符串,没有特定规则,只要能唯一标识当前页面即可。
最开始想用 http request header 里面的 referrer 字段,但是后来发现 github 对图片进行了代理,服务器收到的图片请求中没有了原先的 referrer 字段。
另外实现过程中还有一点,就是缓存,github 的图片代理服务器会对你的图片进行缓存,所以我在做第一版的时候发现这个 svg 图片更新有问题,就开始研究 github 用的这个 camo 服务器,后来在返回 svg 的时候在 response 的 header 中做了点手脚:
这样设置了之后,就可以绕过 camo 的缓存策略,每次都可以顺利的 +1, 实际效果:
刷新一下这个页面试试?
Github:visitor-badge
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.