【原创首发】基于Workers的极轻量GitHub(Shields.io)风格多彩计数器，一分钟无脑搭建稳定可靠

前言

由于知名计数器hit-counter关闭服务，影响到了脚本的正常运行量统计，因此随手复刻了一个一模一样的，供大家使用。

⭐ GitHub地址：https://github.com/xykt/Hits ⭐

（省流自吹）这个复刻版的好处是基于Cloudflare Workers，完全轻量化，无需服务器，稳定不怕跑路，无脑一分钟搭建完成

xhj008 xhj008 xhj008

Hits! - 基于Cloudflare Workers的综合访问计数器

Hits

Hits! 一款完全免费、无需服务器、基于 Cloudflare Workers 和 D1 SQL Database 的轻量级访问计数器系统，支持JSON及GitHub（Shields.io）风格SVG图片，一分钟快速部署

✨ 功能特性

🚀 快速部署 - 一分钟即可完成部署
☁️ 云端托管 - 无需维护服务器
💰 完全免费 - 使用Cloudflare免费套餐
📊 多站点支持 - 通过不同keyword支持多个计数器
🔒 安全可靠 - 基于Cloudflare全球网络
🎨 多彩展示 - 支持自定义色彩的SVG及JSON输出

🛠 快速部署指南

1. 创建D1数据库

进入Cloudflare Dashboard，导航至 Storage & Databases > D1 SQL Database - Create，命名为hits，在 Console 中执行以下SQL创建表:

CREATE TABLE counters ( name TEXT PRIMARY KEY, count INTEGER DEFAULT 0 );

2. 创建Workers

导航至 Workers & Pages > Create application > Create Worker，命名为 hits，复制hit.js代码到Worker编辑器中，修改第七行domain为你的计数器域名，并设置keyword，每个计数器对应一个keyword，后续新增计数器只需要新增keyword即可

3. 配置绑定

在Worker的 Settings > Bindings > Add > D1 Database中，变量名称输入 HITS，数据库选择 hits。在Worker的 Domains & Routes - Add - Custom domain中添加您的刚才设定的计数器域名

4. 使用方法

SVG图片

https://your.domain/keyword.svg?action=view&count_bg=%233DC8C0&title_bg=%23555555&title=Visits&edge_flat=false

参数	值	Description	说明
action	view / hit	View only or hit & view	仅展示/点击并展示
count_bg	%23{colorcode}	Background color of count area	数字部分背景颜色
title_bg	%23{colorcode}	Background color of title area	标题部分背景颜色
title	TitleToShow	Text to display	展示标题
edge_flat	true / false	Sharp or rounded corners	尖角/圆角

Shields.io 预设	别名	Hits! 示例	Shields.io 示例
`count_bg=brightgreen`	`success`
`count_bg=green`
`count_bg=yellow`
`count_bg=yellowgreen`
`count_bg=orange`	`important`
`count_bg=red`	`critical`
`count_bg=blue`	`informational`
`count_bg=grey`	`gray`
`count_bg=lightgrey`	`lightgray` `inactive`

自定义	黑色	灰色	蓝色	绿色	紫色	红色
红色
橘色
黄色
绿色
蓝色
紫色
灰色

JSON结果

请求	Description	说明
`https://your.domain/keyword?action=view`	View only	仅展示
`https://your.domain/keyword?action=hit`	Hit & View	点击并展示

返回JSON结果

{
  "counter": "keyword",
  "action": "hit",
  "total": 1024,
  "daily": 32,
  "date": "2025-03-31",
  "timestamp": "2025-03-31T04:08:16.512Z"
}

历史统计图

https://your.domain/history/keyword.svg?days=31&chartType=bar&title=Chart%20Title&width=1024&height=400&color=green

参数	值	Description	说明
days	{days_number}	Statistical days	统计天数
chartType	bar / scatter	Chart type: bar / scaater	图表类型：柱状图 / 散点图
title	{title_text}	Chart title	图表标题
width	{width_pixels}	Chart width	图表宽度
height	{height_pixels}	Chart height	图表高度
color	%23{colorcode}	Chart color	图表颜色