1、仓库准备

随便建一个仓库,或者直接用博客仓库也行,但更建议单开一个仓库,这不仅有利于评论系统测试,也利用数据分开存放。

开启 Discussions

进入评论存储仓库,Settings → General → Features 勾选 Discussions。

安装 giscus App

打开 github.com/apps/giscus → Install → 选择当前仓库。若是组织仓库,需要拥有者授予权限。

创建分类

在仓库 Discussions 页左侧点击 Categories 的铅笔图标,创建一个分类(例如 Blog Comments)。后续每篇文章的讨论都会落在这个分类里。

2、giscus.app 生成配置

访问 https://giscus.app
按照页面从上到下的顺序依次修改配置。
语言选择中文;
在仓库输入框填入你的评论仓库,若第一步设置正确,输入仓库地址后会提示“成功!该仓库满足所有条件。”;
页面 discussion 映射关系建议选择默认的“Discussion 的标题包含页面的 pathname”,你可根据需要选择其他选项,但一定要先查阅它们的区别和你的主题模板设置;
Discussion 分类选择你上面创建的分类,底下的复选框“只搜索该分类中的 discussion”是默认开启的;
特性-选择是否启用某些特性,默认开启的是“启用主帖子上的反应(reaction)”;
主题我就不懂了大家可以自己选;
最后就是在你想让评论出现的位置添加以下 <script> 标签。但如果已经存在带有 giscus 类的元素,则评论会被放在那里。重要的部分我就删掉了,大家自己操作时会生成。

<script src="https://giscus.app/client.js"
        data-repo=""
        data-repo-id=""
        data-category=""
        data-category-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"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

大家要注意data-theme和data-loading,如果你的主题模板支持明暗甚至更多颜色方案,还想设置评论懒加载,你要格外注意它们的引用和切换。

3、Gridea Pro设定

评论选项卡中giscus评论系统的几个信息就在上面提到的script中。