使用Giscus将GitHub discussion接入博客评论

背景

很早就见过那种接入GitHub issue的评论系统，这样的好处是不用自己数据库储存数据，而且用GitHub账号一键登录很方便。

最近突然也想着给博客接入一下，不然好像总感觉少了点什么。于是我就选择了Giscus来实现。

准备工作

首先需要创建一个公开的GitHub仓库，比如说我的取名为blog-comments。

Giscus是基于GitHub Discussion的，所以要确保在仓库的 Settings->General->Features 中勾选Discussions以开启功能。

然后安装GitHub giscus app，可以通过configure，选择安装到刚才的仓库。

接着就可以到https://giscus.app/zh-CN输入仓库名检查一下是否没有问题。

接入

如官方教程所述，只需要在网页中插入一个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>

支持一些自定义参数，比如说"data-input-position"改成"top"就可以让输入框显示在评论上方，"data-mapping"改成"title"就可以让评论数据和网页的title属性形成映射。

原理很简单，在这个js脚本中，通过dataset属性获取在script标签上设置的各种参数，动态创建一个iframe元素并插入到页面中，GitHub登录后得到session密钥会通过localStorage储存在本地，并在加载的时候调用接口完成oauth。后端调用GitHub api通过映射的属性去查找对应的discussion页面，如果不存在，在有人回应之后就创建一个，最后将数据显示出来，其中iframe高度的调整是通过接收message进行动态自适应调整的。

官方的这个是部署在Vercel上，由于是开源的，所以也可以选择自部署。

我的做法是把client.js保存到本地，进行了部分魔改以更好地适配我的博客。