前言

twikoo 不知道哪个版本更新后，就有了记录文章访问量的功能。

虽然可能不准确，但是聊胜于无。

twikoo的云函数提供了 COUNTER_GET 事件，可以按文章路径查询浏览量。它只是一个只读查询，并不校验管理员身份，所以不需要 accessToken 就能拿到数据。下面是我在博客里的实现。

教程

1. 页面结构

在文章页放一个带 data- 属性的容器，用来标记要显示浏览量的位置：

<span class="post-views"
      data-path="/post/100.html"
      data-title="文章标题"
      data-env-id="https://你的twikoo服务地址">
  <span class="views-count">加载中...</span>
</span>
  • data-path：文章的唯一路径，浏览量就是按它统计的
  • data-title：文章标题（可选）
  • data-env-id：你的 twikoo 服务地址，也就是请求要发往的地址

2. 请求代码

页面加载后用 fetch 向 twikoo 服务发送 COUNTER_GET 请求：

(function() {
  const viewsEl = document.querySelector('.post-views');
  if (!viewsEl) return;

  const path = viewsEl.dataset.path;
  const envId = viewsEl.dataset.envId;
  const title = viewsEl.dataset.title;
  if (!path || !envId) return;

  fetch(envId, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      event: 'COUNTER_GET',
      url: path,
      href: window.location.href,
      title: title || document.title
    })
  })
    .then(function(res) { return res.json(); })
    .then(function(data) {
      const count = data?.time || 0;
      viewsEl.querySelector('.views-count').textContent = count + ' 次浏览';
    })
    .catch(function() {
      viewsEl.querySelector('.views-count').textContent = '-';
    });
})();

请求体里不需要accessToken字段，服务端会直接返回该路径的浏览量，保存在返回数据的 time 字段中。

3. 注意事项

  • 浏览量数据来自twikoo的 counter 集合，只有当页面上的twikoo评论组件初始化过，访问量才会被记录。所以新文章在有人访问之前，查询结果是0。
  • 如果请求失败，这里做了兜底显示 -，不会影响页面其他功能。

结语

用 COUNTER_GET 事件查询浏览量，代码量不大，也不需要暴露管理员的token，适合想在静态博客里展示文章访问量的场景。