Nuxt 中使用 Giscus 利用 GitHub Discussions 实现的评论系统

它如何运作

giscus 加载时，会使用 GitHub Discussions 搜索 API 根据选定的映射方式（如 URL、pathname、title 等）来查找与当前页面关联的 discussion。如果找不到匹配的 discussion，giscus bot 就会在第一次有人留下评论或回应时自动创建一个 discussion。

访客如果想要评论，必须按照 GitHub OAuth 流程授权 giscus app 代表他发布，或者可以直接在 GitHub Discussion 里评论。你可以在 GitHub 上管理评论

开通 Github Discussions

1、创建一个公开的仓库，在仓库的 Settings -> Options -> Features 中启用 Discussions 功能。

2、在仓库的 Discussions 页面创建一个新的分类，用于存放评论。 discussion edit discussion category

在 Gihub Apps 中安装 Giscus

访问链接 giscus app，点击 Install，选择你的仓库，安装 Giscus App。

配置 Giscus

在 giscus config website 中配置

依次填写以下信息：

仓库名称
页面和评论的映射方式(由于我是多语言，所以不能选择 pathname, 否则会出现 /xxx, /en/xxx, /ja/xxx 多个评论主题)
仓库分类

giscus config

然后复制这段代码

giscus code

在 nuxt 中安装

bash

        npm install @giscus/vue

package.json

        "devDependencies": {
    "@giscus/vue": "^3.0.0"
}

xxx.vue

        <script setup lang="ts">
import Giscus from '@giscus/vue'
import 'giscus';
</script>

<template>
    <Giscus
        id="comments"
        repo="it-fb/it-fb-comment"
        repoid="xxx"
        category="Comment"
        categoryid="xxx"
        mapping="specific"
        :term="blog"
        reactionsenabled="1"
        emitmetadata="0"
        inputposition="top"
        :theme="color.value"
        :lang="locale === 'zh' ? 'zh-CN' : locale"
        loading="lazy"
    />
</template>