readme-visitor-badge# 这是什么一个统计README页面被打开多少次的badge生成服务, 其实原理上可以应用在任何可以显示svg的markdown/issue/html上, 当你每次打开这些页面, 浏览器就会向服务器发送一个请求, 将对应的访问数量加1, 之后生成最新的svg返回给浏览器.# 技术点1. badge的生成, 直接使用了google的开源项目pybadges, 非常简单2. 利用Flask写了非常简单的web服务, 接受请求, 缓存访问量, 生成svg并返回# 遇到的问题1. 缓存Github使用了camo作为图片的代理服务器, 当你审查README上的图片元素时, 你会发现所有的图片都不是指向真实的服务器地址, 而是一串https://camo.githubusercontent.com/xxxxxxxxxxxxxxxxxxxxxxxxx/yyyyyyyyyyyyyyy/zzzzzzzzzzzzzzzz.jpg的网址, 如下:而camo的服务器会对被代理的图片进行缓存, 使得当第一次刷新页面时, camo会像badge生成服务发起请求, camo记录访问次数为1, 之后再次刷新页面, camo会缓存这个badge图片, 从而无法达到我们想要的效果.经过一番搜索和研究发现, 在badge生成服务返回的http响应的header中, 需要动一些小手脚:1. Cache-Control设置Cache-Control的内容为no-cache,max-age=0, 告诉camo服务器在使用缓存之前进行验证2. Expires这里我手动将资源的过期时间设置成了当前时间减去10分钟这样的话, 当用户打开README页面之后, camo服务器在返回缓存内容之前, 会像源服务器发起请求, badge生成服务收到请求之后会将访问量加1并生成相应的svg内容同时携带以上2个header信息返回.而正是由于这两个header的设置, camo服务器发现缓存的资源在10分钟之前已经过期, 于是就将最新的svg返回给了浏览器.# 使用方法在你的README里面, 添加一个图片:markdown![Total visitor](https://visitor-count-badge.herokuapp.com/total.svg?repo_id=${这里放你的repo对应的唯一的字符串, 如用你的github用户名+仓库名, 总之保持唯一就好了})如 ![Total visitor](https://visitor-count-badge.herokuapp.com/total.svg?repo_id=ruanyf.weekly.issue.662)就会统计当前issue的总访客数量, 如下图, 刷新下这个页面试试?# 下一步计划1. 当前方案没有对这些访问量进行持久化, 下一步是研究如何使用heroku的数据库来进行持久化 已完成> 所以如果你哪天发现你的访问量突然从0开始了, 还请见谅 :(3.新增生成当天访问量的badge 已完成4. 新增生成最近7天/30天访问量折线图的badge