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中。