给静态博客加上阅读量统计:我的踩坑与最终方案

之前看别人的博客首页都带有访问量统计。昨天晚上纠结了一会儿决定也给自己的博客加上这个功能。一开始我是打算让博客有以下功能:

  1. 首页显示网站总访问量
  2. 首页显示各文章访问量
  3. 文章详情页面显示本文访问量

我现在用的是umami统计的官方服务,直接注册账号就能用的那种。但它不支持API调用服务,umami自部署版可以用它的API可以获取到访问量数据然后放到页面上显示就好了。可这需要一台独立运行的服务器。

我是不想独立维护一台服务器的,DDoS,cc攻击,WAF啥的实在是太麻烦,这也是为什么我用静态博客的原因。主打一个省心,安全,成本低。不用天天担心受怕。

说跑题了。

问了一下DeepSeek,给了我如下几种解决方案。

这里面我唯一熟悉的是不蒜子统计,这个不蒜子我在一个GitHub项目里用过。应该是叫Gmeek,是一个基于GitHub issues的极简博客搭建方案。主打“从搭建到写作,最快只需 18 秒”。

vercount我也去它家官网看了一下,是一个个人维护的小项目,有一个后台,但是全英文的。主打比不蒜子快。但想了一下还是没有使用。

  1. 后台全英文,语言不太友好,虽然都是很简单的功能。
  2. GitHub登录,有时候网络上会不太方便。

又跑偏了😅

最后还是决定使用不蒜子的服务。把文档链接和我的需求发给workbuddy,AI调研了一下,明确告知首页显示各文章访问量这个功能做不了,DeepSeek给出的原因如下:

为什么首页无法用不蒜子显示各文章阅读量?

  1. 不蒜子只统计“当前页面”
    不蒜子的 page_pv 本质上是统计当前访问页面的阅读量。首页列表里的每一篇文章并不是当前页面,因此拿不到对应文章页的 PV。

  2. 没有批量查询接口
    不蒜子不提供“传入多个文章 URL,返回各自阅读量”的 API。首页无法一次性获取多篇文章的阅读数据。

  3. Referrer 识别存在限制
    不蒜子依赖请求来源识别页面。现代浏览器默认使用 strict-origin-when-cross-origin,跨域请求往往只带域名,不带完整路径,容易导致不同文章无法被准确区分。

  4. 隐私浏览器会拦截统计请求
    Safari、Firefox 严格模式等会阻止跨站跟踪请求,导致不蒜子请求根本不发出或返回失败,统计自然无法显示。

  5. 首页只有一个页面级计数
    如果强行在首页多个位置放置 busuanzi_value_page_pv,它们读取到的都是“首页”这一个计数值,结果所有文章会显示同一个数字。

  6. 动态渲染与静态脚本不匹配
    Astro 首页通常通过列表循环动态生成文章卡片,而不蒜子脚本只在页面加载时处理固定元素,无法为每个动态生成的列表项单独查询对应文章的数据。

  7. 静态构建与运行时数据冲突
    文章阅读量是运行时不断变化的数据。首页列表若在构建时生成,无法提前写入未来变化的 PV;运行时又缺少按文章路径查询的接口。

  8. 本质是架构限制,不是配置问题
    不蒜子的定位是轻量级单页计数器,而不是多页面数据查询服务。它适合在文章详情页显示当前文章阅读量,但不适合在首页批量展示每篇文章的阅读量。

本来这个任务是交给workbuddy来完成的,可是因为一些原因,workbuddy的AI把自己的运行环境给搞坏了…

编写好的代码无法推送至Gitee。

只能换到TRAE work的云端环境来完成。同样的,将文档链接和需求发上去,大约5分钟左右代码就添加好了,我还让AI给我的博客后台增加了相应的“不蒜子统计”设置模块。


现在可以在网站首页和每篇文章的标题下方看到访问量信息了。

评论