在 VitePress 静态博客中集成不蒜子统计：优雅实现站点 PV/UV 计数

<!-- .vitepress/theme/components/SiteFooter.vue -->
<script setup lang="ts">
import { onMounted, ref } from 'vue'

const mounted = ref(false)
onMounted(() => {
  mounted.value = true
})
</script>

<template>
  <footer class="site-footer">
    <!-- 不蒜子 PV/UV 展示（v-if="mounted" 修复 Hydration Mismatch） -->
    <div v-if="mounted" class="footer-stats">
      <span class="stat-item">
        本站总访问量
        <span id="busuanzi_site_pv" class="stat-num">0</span> 次
      </span>
      <span class="separator">·</span>
      <span class="stat-item">
        访客数
        <span id="busuanzi_site_uv" class="stat-num">0</span> 人
      </span>
    </div>

    <p class="copyright">© {{ new Date().getFullYear() }} FilePress Blog</p>
  </footer>
</template>

<style scoped>
.footer-stats {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--vp-c-text-3);
  margin-bottom: 0.5rem;
}
.stat-num {
  font-weight: 600;
  color: var(--vp-c-brand-1);
  font-variant-numeric: tabular-nums;
}
.separator {
  color: var(--vp-c-divider);
}
</style>

<!-- .vitepress/theme/components/PostPage.vue -->
<script setup lang="ts">
import { onMounted, ref } from 'vue'

const mounted = ref(false)
onMounted(() => {
  mounted.value = true
})
</script>

<template>
  <article class="post-content">
    <!-- ... 文章正文渲染 ... -->

    <div class="post-meta">
      <span v-if="mounted" class="view-count">
        👁️ 本文已被阅读
        <span id="busuanzi_page_pv" class="view-num">0</span> 次
      </span>
    </div>
  </article>
</template>

<style scoped>
.view-count {
  font-size: 0.875rem;
  color: var(--vp-c-text-3);
}
.view-num {
  font-weight: 600;
  color: var(--vp-c-brand-1);
  font-variant-numeric: tabular-nums;
}
</style>

// .vitepress/theme/utils/viewCount.ts

const STORAGE_KEY = 'fpb:article-view-counts:v1'
const SESSION_KEY = 'fpb:article-session:v1'

/** 检测不蒜子是否已就绪 */
export function isBusuanziLoaded(): boolean {
  if (typeof window === 'undefined') return false
  return typeof (window as any).busuanzi !== 'undefined'
}

/** 等待不蒜子脚本执行（最多 2s） */
export function waitBusuanzi(timeout = 2000): Promise<boolean> {
  return new Promise(resolve => {
    if (isBusuanziLoaded()) return resolve(true)
    const timer = setTimeout(() => resolve(false), timeout)
    const interval = setInterval(() => {
      if (isBusuanziLoaded()) {
        clearTimeout(timer)
        clearInterval(interval)
        resolve(true)
      }
    }, 100)
  })
}

/** 文章页 PV 的兜底计数 */
export function getFallbackViewCount(slug: string): number {
  if (typeof localStorage === 'undefined') return 0
  try {
    const data = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}')
    return data[slug] || 0
  } catch {
    return 0
  }
}

export function incrementFallbackViewCount(slug: string): void {
  if (typeof localStorage === 'undefined') return
  // sessionStorage 去重：同一会话只计 1 次
  const sessionHits = JSON.parse(
    sessionStorage.getItem(SESSION_KEY) || '[]'
  ) as string[]
  if (sessionHits.includes(slug)) return
  sessionHits.push(slug)
  sessionStorage.setItem(SESSION_KEY, JSON.stringify(sessionHits))

  // localStorage 累加
  const data = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}')
  data[slug] = (data[slug] || 0) + 1
  localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
}