自建可可爱爱的网页计数器

偶然发现了可可爱爱的~~二刺螈~~网页计数器：https://github.com/journey-ad/Moe-counter 先前一直在白嫖作者的服务，但貌似服务状态不太稳定，自建计数器的事项也提上了日程。经过一番寻觅，发现一个可以运行在~~赛博佛祖~~Cloudflare上的moe-counter-cf项目，支持将其部署到Workers，~~非常适合我这种白嫖怪~~

部署过程参考了下面两篇博文： https://www.shirakii.com/post/moe-counter-cf/

https://champhoon.xyz/note/moe-counter-cf/

如果你的域名dns服务商本身就是cloudflare，那么只需要新建KV空间、二级域名，记录下KV空间ID、账户ID、区域ID即可。

这一步需要拥有一个 Cloudflare 账号，若不曾拥有，须注册之。另外，还需准备一个域名，由于 Cloudflare Workers 自动分配的域名处于被墙的状态，因此若不绑定自有域名，计数器将无法在中国大陆地区成功加载。找到侧边栏的 Workers，点击创建服务。服务名称填 moe-counter-cf，启动器就选择默认的 HTTP 处理程序。再选择侧边栏 Workers 下的 KV，点击创建命名空间，名称自拟。创建完成后点击查看刚刚创建的 KV，记下这个 KV 的命名空间 ID。接下来要将准备好的域名转移到 Cloudflare 解析，选择侧边栏中的网站，点击添加站点，添加上准备好的域名，按照页面出现的提示前往域名的注册商处更改 NS 记录，NS 记录的更改需要一定时间，在 NS 记录同步完成之前，可以先进行下面不涉及域名操作的步骤。当 Cloudflare 提醒站点添加成功，进入网站，选择准备好的域名，看到页面右侧下方，找到 API，记录下区域 ID 和账户 ID。选择侧边栏中的 DNS，添加一个 A 记录，自拟一个三级域名给 moe-counter-cf，IPv4 地址可以随便填，例如 8.8.8.8，记得开启代理的橙色云朵。回到刚刚创建的 Workers，点击触发器，找到路由，选择添加路由，填写刚刚添加的三级域名你的域名/* ，如 count.champhoon.xyz/* ，下面的区域就选择对应的二级域名，设置完成别忘记保存。至此，Cloudflare Worker 的创建工作就此完成。

接下来建议将moe-counter-cf项目下载到本地，在本地修改相关配置：参考wrangler.example.toml修改文件配置，并重命名为wrangler.toml保存以下是配置参考：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


name = "moe-counter"
main = "dist/worker"
type = "javascript"
account_id = "<CF_ACCOUNT_ID>" # 此处将 <CF_ACCOUNT_ID> 替换为账户 ID
zone_id = "<CF_ZONE_ID>"  # 此处将 <CF_ZONE_ID> 替换为区域 ID
workers_dev = false
route = "<YOUR_DOMAIN>/*"  # 此处将 <YOUR_DOMAIN> 替换为你前面的域名
compatibility_date = "2022-03-12"
kv_namespaces = [
  { binding = "KV", id = "<CF_KV_ID>"},  # 此处将 <CF_KV_ID> 替换为命名空间 ID
]

[build]
command = "npm run build"
[build.upload]
format = "service-worker"

找到settings.json文件进行编辑：其中"dsrkafuu:demo"引号内部分为id，均可修改，所有主题样式参数可在moe-counter-cf\themes\目录下查看

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


{
  "defaults": {
    "theme": "gelbooru",  # 选择默认的计数器主题，所有主题样式详见 https://count.getloli.com/
    "length": 7,  # 控制计数器默认位数
    "render": "auto"
  },
  "api": {
    "get": true,
    "delete": false
  },
  "index": {
    "enabled": true
  },
  "ids": {  # 管理计数器的 ID，防止滥用，只有填写在这里的 ID 才能计数
    "dsrkafuu:demo": "Demo for GitHub & preview site.",  # 这一行不要改动，这个是 DEMO 页默认使用的 ID，不建议删除，否则建好的 DMEO 站显示不了计数器很难看
    "your id": "Personal blog & GitHub page.",  # 从这行开始可以换成自拟的 ID，前半部分是 ID，后半部分是备注
    "dsrkafuu:tools": "For DSRTOOLs counter."   #  同理，可自行增删
  }
}

前序工作准备好后，就该使用Wrangler-CLI 工具部署 moe-counter-cf了。前提需安装好npm环境然后安装wrangler： npm install wrangler --save-dev 或npm install -g @cloudflare/wrangler

运行npx wrangler --version，若有正确版本号输出则安装成功。使用npx wrangler login登录，若浏览器未自动弹出可自行复制链接登录。进入刚才项目的文件夹，如

1

cd moe-counter-cf

接着运行命令

1
2
3


npx wrangler deploy
或者
wrangler publish

耐心等待即可部署成功后进入自己的域名，若demo页面正常显示就可以愉快地食用啦~

以上