Giscus评论系统简单配置

很早之前就想给博客弄个评论系统，又互动才更加有乐趣。看了其他的一些评论系统，就选择了Giscus评论系统，由于小白一个，弄了很久才搞明白怎么回事。

第一步 #

根据官网的说明，先满足这些条件：

• 此仓库是公开的，否则访客将无法查看 discussion。
• giscus app 已安装否则访客将无法评论和回应。
• Discussions功能已在你的仓库中启用。

之后输入你的github仓库，看下是否成功设置。

第二步 #

在giscus官网找到这里，这是只要填写分类名，分类id就行了。

<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-repo="[在此输入仓库]"
data-repo-id="[在此输入仓库 ID]"

如果上面的 仓库 名字设置显示成功，这两个数值我们是不用设置的。我们只需要设置分类名和分类ID就可以了。

repo_id是托管博客的代码仓库的一个标识值，category是该仓库Issues里面对应的分类（或者说是主题）。一个仓库默认具有下面几个分类：Announcements、General、Ideas、Q&A、Show and tell。这里我选择Announcements作为评论的分类。最后的category_id类似repo_id也是对该分类的一个标识值。

那如何快速的获取这些数据呢，可以通过GitHub官方的GraphQL API Explorer查询到。这里把查询所用的语句进行记录。

{
 repository(owner:  "jawaylog", name: "giscus") {
   id
   discussionCategories (first: 5) {
     nodes {
       name
       id
     }
   }
 }
}

点击查询可得以下结果

"nodes": [
         {
           "name": "Announcements",
           "id": "DIC_kwDOIMxYZc4CR8Kb"
         },
         {
           "name": "General",
           "id": "DIC_kwDOIMxYZc4CR8Kc"
         },
         {
           "name": "Ideas",
           "id": "DIC_kwDOIMxYZc4CR8Ke"
         },
         {
           "name": "Polls",
           "id": "DIC_kwDOIMxYZc4CR8Kg"
         },
         {
           "name": "Q&A",
           "id": "DIC_kwDOIMxYZc4CR8Kd"
         }
       ]
     }
   }
 }
}

配置完最终得到的代码是这样的：

<script src="https://giscus.app/client.js"
       data-repo="jawaylog/giscus"
       data-repo-id="R_kgDOIMxYZQ"
       data-category="Announcements"
       data-category-id="DIC_kwDOIMxYZc4CR8Kb"
       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>

至于如何显示评论系统，需要根据各自的主题文档设置，又或者你可以尝试在_config.yml配置。