Skip to main content

CurateClick

github.com favicon

readme-visitor-badge

一个统计README页面被打开次数的badge生成服务,适用于任何可以显示svg的markdown/issue/html页面。每次页面打开时,浏览器会向服务器发送请求,增加访问计数并返回最新的svg。

Check out readme-visitor-badge on CurateClick

• Copy the embed code to showcase this product on your website

• Share on X to spread the word about this amazing tool

# 这是什么一个统计README页面被打开多少次的badge生成服务, 其实原理上可以应用在任何可以显示svg的markdown/issue/html上, 当你每次打开这些页面, 浏览器就会向服务器发送一个请求, 将对应的访问数量加1, 之后生成最新的svg返回给浏览器.# 技术点1. badge的生成, 直接使用了google的开源项目, 非常简单2. 利用Flask写了非常简单的web服务, 接受请求, 缓存访问量, 生成svg并返回# 遇到的问题1. 缓存Github使用了camo作为图片的代理服务器, 当你审查README上的图片元素时, 你会发现所有的图片都不是指向真实的服务器地址, 而是一串的网址, 如下:而camo的服务器会对被代理的图片进行缓存, 使得当第一次刷新页面时, camo会像badge生成服务发起请求, camo记录访问次数为1, 之后再次刷新页面, camo会缓存这个badge图片, 从而无法达到我们想要的效果.经过一番搜索和研究发现, 在badge生成服务返回的http响应的header中, 需要动一些小手脚:1. 设置的内容为, 告诉camo服务器在使用缓存之前进行验证2. 这里我手动将资源的过期时间设置成了当前时间减去10分钟这样的话, 当用户打开README页面之后, camo服务器在返回缓存内容之前, 会像源服务器发起请求, badge生成服务收到请求之后会将访问量加1并生成相应的svg内容同时携带以上2个header信息返回.而正是由于这两个header的设置, camo服务器发现缓存的资源在10分钟之前已经过期, 于是就将最新的svg返回给了浏览器.# 使用方法在你的README里面, 添加一个图片:# 下一步计划1. > 所以如果你哪天发现你的访问量突然从0开始了, 还请见谅 :(3. 4. 新增生成最近7天/30天访问量折线图的badge

Latest Weekly Picks

Predict video virality before you publish.

Virality Predictor

Powerful Motion Control AI Video Generator

Motion Control AI

PlusGO 是面向中国大陆用户的 ChatGPT Plus 代充值服务平台。使用官方 CDKey,支持支付宝和微信扫码支付,平均 2 分钟完成 Plus 开通,自 2025 年起已为超过 10,000 名用户完成充值。

www.toolcenter.ai favicon
Weekly Pick

Discover the Best AI & Productivity Tools — 1,500+ tools with honest reviews.

ToolCenter
huntereyes.net favicon
Weekly Pick

AI Eye Area Evaluation

Hunter Eyes
www.payforchat.com favicon
Weekly Pick

Subscribe to ChatGPT Plus/Pro in 1 minute — no international credit card needed.

PayForChat
happyhorseai.ai favicon
Weekly Pick

Happy Horse AI Creates Videos with Motion and Storytelling

Happy Horse
promptbuilder.cc favicon
Weekly Pick

Generate, optimize, test, and manage AI prompts in one place. Turn an idea into a ready-to-use prompt in seconds.

Prompt Builder