静态博客（Hexo / Hugo / VuePress）怎么加访问量统计

静态站没有 PHP、没有数据库，但统计不需要后端——统计是浏览器端执行的脚本，只要页面里有一段 JS，数据就能发出去。难点只有一个：找到那个全站共用的模板文件，改一次让所有页面生效。

Hexo

主流主题都提供了注入点，按主题不同选一种：

• 主题支持配置注入：在 _config.yml（主题目录下）找 inject: 段，把脚本填到 head_end 或 bottom
• 主题不支持：新建 source/_partial/统计.ejs，再在主题的 layout/layout.ejs 里 <%- partial('统计') %>
• 最省事的做法：在 themes/你的主题/layout/_partial/head.ejs 末尾直接粘代码

改完执行 hexo clean && hexo g 重新生成。

Hugo

Hugo 的标准做法是覆盖主题的 partial。在项目根目录建 layouts/partials/，放一个 统计.html：

{{/* layouts/partials/统计.html */}}
<script>
  window.小葱计数器 = { 站点密钥: 'xk_你的密钥' };
  (function(d,s){
    s=d.createElement('script');
    s.src='https://js.7w4.net/sdk.js';
    s.async=true;
    d.head.appendChild(s);
  })(document);
</script>

然后在 layouts/partials/footer.html 里引入：{{ partial "统计.html" . }}。项目目录下的 layouts 优先级高于主题，所以不用改主题源码，升级主题也不会丢。

VuePress / VitePress

在 .vuepress/config.js（或 VitePress 的 config.ts）里挂 head 脚本：

module.exports = {
  head: [
    ['script', {}, `
      window.小葱计数器 = { 站点密钥: 'xk_你的密钥' };
      (function(d,s){
        s=d.createElement('script');
        s.src='https://js.7w4.net/sdk.js';
        s.async=true;
        d.head.appendChild(s);
      })(document);
    `]
  ]
}

VuePress 是单页应用，站内跳转不刷新页面。小葱计数器 SDK 会监听路由变化补发页面浏览，因此每个页面都能正确统计，不需要额外配置。

Next.js / Nuxt（SSR 或 SSG）

用框架自带的脚本组件挂到根布局上，避免重复注入：

// app/layout.tsx（Next.js App Router）
import Script from 'next/script'

<Script id="xc-counter" strategy="afterInteractive">{`
  window.小葱计数器 = { 站点密钥: 'xk_你的密钥' };
  (function(d,s){
    s=d.createElement('script');
    s.src='https://js.7w4.net/sdk.js';
    s.async=true;
    d.head.appendChild(s);
  })(document);
`}</Script>

页面上显示一个访问量数字

如果只是想在页脚显示"今日 / 总访问"，不需要面板，用 count.php 接口：

<span id="xc-count">加载中…</span>
<script>
fetch('https://js.7w4.net/count.php?站点密钥=xk_你的密钥')
  .then(r => r.json())
  .then(d => {
    document.getElementById('xc-count').textContent =
      '本站总访问 ' + d.数据.总访问 + ' 次';
  });
</script>

接口自带 5 分钟缓存，静态站被高频访问也不会给统计服务器带来压力。

验证

1. 本地 hexo s / hugo server 起服务，打开任意页面
2. F12 → Network → 筛 track.php，确认 POST 200
3. 面板「实时」页出现该页面，且页面标题和路径都正确