首页 > 开发手册 > 添加 giscus 评论系统

添加 giscus 评论系统

虽然之前写的评论系统也有楼中楼的实现，但是因为账户并不是对接的第三方网站，用户评论还需要手动添加邮箱用户名什么的，也无法验证是否真实。

最关键的是，我还要注意 XSS 漏洞，写个博客还要花精力在 Web 安全上面，有点不值得。

所以想想，还是使用第三方的评论系统吧。市面上看了看，感觉就 giscus 的风格跟我现在的博客风格类似，那就决定是你了。

 1. 什么是 giscus？

giscus 由 GitHub Discussions 驱动的评论系统，详细介绍大家看官网就行，我使用它的原因主要就下面两个：

  1. 开源免费。这个很重要?
  2. 使用 Github Discussion 作为存储后端，无需自行建立存储。

2. 配置 giscus

配置过程很简单，按照官网的步骤操作即可。

2.1 安装 giscus app

打开 此链接 后，点击右侧的 install。

仓库选择，我们可以手动选择放置评论数据的仓库，这里我使用我的 github page 的仓库作为存储。

2.2 开启 Discussion 功能。

进入刚刚选择的仓库，点击 Settings，找到 Features 标题，勾选  开启 discussion 功能。

到这里，github 的配置已经完成，接下来我们配置 giscus。

2.3 配置 giscus

为了配置简化，我们直接使用官网的配置工具，按要求填入相关信息。

这里的映射关系没特殊需求的推荐 pathname 或者 url。

Discussion 的分类已经有一些默认值了，直接使用即可；也可以在刚刚仓库的 Discussion 面板中手动添加一种分类，回到配置页面刷新即可选择你自定义的类型了。

特性和主题大家就按需勾选，也可以多尝试尝试，找到自己想要的配置方案。

2.4 加载 giscus

前面已经配置完成了，剩下的就是如何加载。官方工具里其实已经有了 script 加载的例子了，正常情况下直接在页面中引入这段标签即可。

<script src="https://giscus.app/client.js"
        data-repo="DYSDF/DYSDF.github.io"
        data-repo-id="MDEwOlJlcG9YaXRvDnk0MDYxNTIwMzg="
        data-category="Comments"
        data-category-id="DIC_QwaOGDbzBE4sQ9nE"
        data-mapping="url"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

而 Vue/React 的 SPA 用户，则可以使用官方提供的组件 @giscus/vue、@giscus/react。

不过这两个组件貌似只支持最新版 Vue/React，而我的博客是基于 Vue2的，所以，我还需要手动引入一下。因为直接写 script 标签会报错，所以我们通过手动创建 script 标签的方式来引入。

const script = document.createElement('script')
script.src = 'https://giscus.app/client.js'
script.setAttribute('data-repo', 'DYSDF/DYSDF.github.io')
script.setAttribute('data-repo-id', "xxxxxx")
script.setAttribute('data-category', "Comments")
script.setAttribute('data-category-id', "xxxxxxx")
script.setAttribute('data-mapping', "url")
script.setAttribute('data-strict', "0")
script.setAttribute('data-reactions-enabled', "0")
script.setAttribute('data-emit-metadata', "0")
script.setAttribute('data-input-position', "top")
script.setAttribute('data-theme', "preferred_color_scheme")
script.setAttribute('data-lang', "zh-CN")
script.setAttribute('data-loading', "lazy")
script.setAttribute('crossorigin', "anonymous")
script.setAttribute('async', '')
this.$el.appendChild(script)

3. 总结

通过上面的步骤，你已经可以将 giscus 集成到你的网站了，整个流程下来，还是十分简单的。

而且默认的主题配色跟我的博客还是蛮搭的，也支持夜间模式，访客评论也不需要手动输入邮箱什么的，我也不用担心填写的是假数据之类的，更不用担心会不会有 XSS 的风险，使用感受不错。

唯一的问题是，网站右侧没法展示最新的评论数据了。。。有时间再解决吧。