给自己的网站添加访问量统计

2023-06-27 22:57:59

首先我这里使用的是 vitepress 搭建的博客，然后使用的统计工具是 busuanzi，没错这个包就叫这个，第一次看的时候也很懵，不知道为啥叫这个名字，后面搜了下是 不蒜子 - 极简网页计数器

首先把这个包加入到项目中

pnpm add -D busuanzi.pure.js

然后在 .vitepress/theme/index.ts 中导入包，在每次路由切换时调用一次 fetch 方法

TIP

一定要在这里判断一下是否是在浏览器中，不然在我们打包项目的时候会报错

import { inBrowser } from 'vitepress'
import busuanzi from 'busuanzi.pure.js'

export default {
  ...DefaultTheme,
  enhanceApp({ router }) {
    if (inBrowser) {
      router.onAfterRouteChanged = () => {
        busuanzi.fetch()
      }
    }
  }
}

然后在我们需要显示访问量的地方使用标签和对应的id获取，就会直接显示出对应的统计结果，对应效果可以在本博客首页看到

本站总访问量 <span id="busuanzi_value_site_pv" /> 次
本站访客数 <span id="busuanzi_value_site_uv" /> 人次