Giscus 评论系统

Giscus 是一个由 GitHub Discussions 驱动的评论系统，面向 GitHub 用户。

Giscus 的数据存储在 GitHub Discussions 中不需要额外的数据库，一个公开的 Git 仓库搞定。

工作流程

Giscus工作时序

使用 Giscus

创建一个独立、公开的 Git 仓库

Giscus 的评论仓库与站点源码仓库分开，各司其职，同时也方便维护和管理。

开启仓库 Discussions 功能

进入仓库的主页。
点击仓库设置（⚙️ Settings）。
在功能模块下（Features），勾选启用讨论功能（Discussions）。

安装并授权 Giscus App

访问 https://github.com/apps/giscus 安装。
选择”评论仓库”并授权。

获取 Giscus 代码

访问 https://giscus.app/zh-CN 完成系统配置。
复制生成的 <script> ....</script> 代码


<script src="https://giscus.app/client.js"
        data-repo="[在此输入仓库]"
        data-repo-id="[在此输入仓库 ID]"
        data-category="[在此输入分类名]"
        data-category-id="[在此输入分类 ID]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>

将该代码插入页面中即可生效。

组件化使用

在 React、Vue 和 Next 中使用 Giscus ，可使用官方提供的组件。

1. 安装 Giscus 库


npm i giscus


pnpm add giscus


yarn add giscus


bun add giscus

2. 封装组件并使用

替换高亮处代码完成组件定义，在需要使用的地方导入应用组件 <GiscusComments/>


'use client'
 
import React from 'react'
import Giscus from '@giscus/react';
 
const GiscusComments = () => {
    return (
        <div style={{paddingTop: '50px'}}>
            <Giscus
                id="comments"
                repo="[GitHub 用户名]/[评论仓库名]"
                repoId="[评论仓库名 ID]"
                category="[Discussion 分类名]"
                categoryId="[Discussion 分类ID]"
                mapping="pathname"
                reactionsEnabled="1"
                emitMetadata="0"
                inputPosition="bottom"
                theme='dark'
                lang="zh-CN"
                loading="lazy"
            />
        </div>
    );
}
export default GiscusComments;