分享一个我给 Github README.md 做的访客统计功能

[jwenjian]

这个是我很久之前准备开始用 Github issue 做博客时做的，从 hexo 迁移过去之后 发现用 github issue 写博客没有访客统计功能（虽然本来也没人看）。

但是由于不管是 github issues，还是 github 的 README，都只支持 markdown 语法，不能使用各种第三方统计了。

就自己做了一个访客统计的徽章（ badge ）服务。

原理很简单，徽章是一个 svg，你只需要在你的 issues 或者 readme 中添加一个 markdown 的图片：

![]( https://visitor-badge.glitch.me/badge?page_id=<your_page_id>)

当有人打开你的 issue 或者 github 仓库时，浏览器会加载这个图片，服务器就会发出一个请求。

之后根据请求里的 page_id 来计数，并将最新的数量生成到一个 svg 图片中，将这个 svg 返回，浏览器就可以显示出来了。

注意这里的参数：page_id, 需要自己手动给一个唯一的字符串，没有特定规则，只要能唯一标识当前页面即可。

最开始想用 http request header 里面的 referrer 字段，但是后来发现 github 对图片进行了代理，服务器收到的图片请求中没有了原先的 referrer 字段。

另外实现过程中还有一点，就是缓存，github 的图片代理服务器会对你的图片进行缓存，所以我在做第一版的时候发现这个 svg 图片更新有问题，就开始研究 github 用的这个 camo 服务器，后来在返回 svg 的时候在 response 的 header 中做了点手脚：

1. 添加一个 no-cache 的 header： 'Cache-Control': 'no-cache,max-age=0'
2. 将 Expires header 的值设置为了当前时间减去 10 分钟

这样设置了之后，就可以绕过 camo 的缓存策略，每次都可以顺利的 +1， 实际效果：

刷新一下这个页面试试？

---

Github：visitor-badge

[ob]

这个不错，过后试下。

[uuspider]

真是创意无限啊

[chotow]

你这个统计怎么和 V2EX 的点击统计不一样 🌸🐔

[jwenjian]

@chotow v2 的更有意义吧，这个说白了就是统计 图片加载次数

[jwenjian]

@ob 掘金好像不行，他是直接转存的图片，发布之后就编程一个静态图片了 不会变

[jwenjian]

@uuspider 也是收到其他 github 徽章的启发

[chizuo]

不错不错，挺好的

[zhw2590582]

不错，但我只担心服务器稳不稳定，是不是一直维护

[jwenjian]

@zhw2590582 在 glitch.me 上，只要一直有访问，没啥问题。可能偶尔出不来 :)

不过代码开源的 欢迎部署到更稳定的服务器上 提供稳定的服务

[ChanKc]

GitHub 好像就有访客功能吧，当然不如自己做的全就是

[Ritter]

666

[jwenjian]

@ChanKc 这个之前还真没听说过，有链接么

[securityCoding]

创意无限啊

[ChanKc]

@jwenjian traffic 还是什么的，能看到每周克隆数折线图那个页面，手机上没找到

[watzds]

以前 bbs 图片签名，能显示 ip，天气之类，是不是也是这个原理

[jwenjian]

@watzds 应该是一个原理

[jwenjian]

@ChanKc 嗯嗯 我好像也见到过，不过我这个纯粹是为了统计打开次数。

[NotFoundEgg]

让我想到了珊瑚虫 qq 印象中也是用发送 1 像素图片获取对方 ip 的

[jwenjian]

@NotFoundEgg 这个还真不清楚是不是这个原理 不过珊瑚虫。。。。哈哈好久之前的东西了 之前好多人都是安装魔改的 qq，各种功能。

[metrue]

👍，小功能已经用在了 https://github.com/metrue/fx 上面.