如何在 VitePress 站点集成 Giscus 评论系统

// .vitepress/config.mts
import { readFileSync, existsSync } from 'node:fs'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'node:url'

function loadEnvFile(envPath: string): void {
  if (!existsSync(envPath)) return
  const content = readFileSync(envPath, 'utf-8')
  for (const rawLine of content.split(/\r?\n/)) {
    const line = rawLine.trim()
    if (!line || line.startsWith('#')) continue
    const m = line.match(/^([A-Z0-9_]+)\s*=\s*(.*)$/i)
    if (!m) continue
    const key = m[1]
    let value = m[2].trim()
    if (
      (value.startsWith('"') && value.endsWith('"')) ||
      (value.startsWith("'") && value.endsWith("'"))
    ) value = value.slice(1, -1)
    if (process.env[key] === undefined) process.env[key] = value
  }
}

loadEnvFile(resolve(dirname(fileURLToPath(import.meta.url)), '../.env'))

export default defineConfig({
  vite: {
    define: {
      'import.meta.env.VITE_GISCUS_REPO': JSON.stringify(process.env.VITE_GISCUS_REPO ?? ''),
      'import.meta.env.VITE_GISCUS_REPO_ID': JSON.stringify(process.env.VITE_GISCUS_REPO_ID ?? ''),
      'import.meta.env.VITE_GISCUS_CATEGORY': JSON.stringify(process.env.VITE_GISCUS_CATEGORY ?? 'General'),
      'import.meta.env.VITE_GISCUS_CATEGORY_ID': JSON.stringify(process.env.VITE_GISCUS_CATEGORY_ID ?? ''),
      'import.meta.env.VITE_GISCUS_LANG': JSON.stringify(process.env.VITE_GISCUS_LANG ?? 'zh-CN')
    }
  }
  // ... 其他配置
})

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vitepress'
import { MessagesSquare } from 'lucide-vue-next'

const route = useRoute()

const env = (import.meta.env ?? {}) as Record<string, string | undefined>
const repo = env.VITE_GISCUS_REPO ?? ''
const repoId = env.VITE_GISCUS_REPO_ID ?? ''
const category = env.VITE_GISCUS_CATEGORY ?? 'General'
const categoryId = env.VITE_GISCUS_CATEGORY_ID ?? ''
const lang = env.VITE_GISCUS_LANG ?? 'zh-CN'

// 配置齐全才渲染；缺失时整段隐藏
const ready = Boolean(repo && repoId && categoryId)
const containerRef = ref<HTMLDivElement | null>(null)

function mount(): void {
  if (!ready || !containerRef.value) return
  // 路由切换时清空旧实例，避免内存泄漏
  containerRef.value.replaceChildren()

  const s = document.createElement('script')
  s.src = 'https://giscus.app/client.js'
  s.async = true
  s.crossOrigin = 'anonymous'

  // 关键：直接挂 DOM 属性，Giscus 内部按 DOM 读取
  s.setAttribute('data-repo', repo)
  s.setAttribute('data-repo-id', repoId)
  s.setAttribute('data-category', category)
  s.setAttribute('data-category-id', categoryId)
  s.setAttribute('data-mapping', 'specific')
  s.setAttribute('data-term', route.path)        // 每篇文章独立 Discussion
  s.setAttribute('data-strict', '1')             // 严格按 term 匹配
  s.setAttribute('data-reactions-enabled', '1')  // 启用表情
  s.setAttribute('data-emit-metadata', '0')
  s.setAttribute('data-input-position', 'top')
  s.setAttribute('data-theme', 'preferred_color_scheme')  // 跟随系统主题
  s.setAttribute('data-lang', lang)
  s.setAttribute('data-loading', 'lazy')          // 视口可见才加载

  containerRef.value.appendChild(s)
}

onMounted(mount)
onBeforeUnmount(() => containerRef.value?.replaceChildren())
watch(() => route.path, mount)  // SPA 路由切换时重载
</script>

<template>
  <section v-if="ready" class="comments" aria-label="评论区">
    <header class="comments__header">
      <MessagesSquare class="h-5 w-5" style="color: var(--accent);" aria-hidden="true" />
      <h2 class="comments__title">评论</h2>
      <span class="comments__hint">由 GitHub Discussions 驱动</span>
    </header>
    <div ref="containerRef" class="comments__giscus" />
  </section>
</template>