前言

搭建个人博客或者其他网站站点的时候,只有静态页面显得比较冷清,想了解自己的文章能不能帮到更多有相同疑惑的人,或者为自己的网站增添功能

目标

扩展自己的网站支持评论功能

前置条件

有github的账号

正式内容

感谢提供这个评论功能的giscus,在不用维护评论功能以及数据库的情况下,这是款十分便利的评论系统

创建github仓库

首先需要创建一个github的仓库,用于保存评论的留言,并且需要一些小小的配置,参考官网
选择 giscus 连接到的仓库。请确保：

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

选择配置

创建完仓库后,在giscus的配置栏中选择自己需要的配置 如本文的配置为

<script src="https://giscus.app/client.js"
        data-repo="suguer/giscus.github.io"
        data-repo-id="R_kgDOH08FpA"
        data-category="Announcements"
        data-category-id="DIC_kwDOH08FpM4CQ2jj"
        data-mapping="title"
        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>

嵌入js代码

hugo的详情文章路径一般在主题下的layouts/_default/single.html，建议不要在主题下theme直接修改文件，避免后续升级覆盖没了，可在根目录下相同创建出layouts/_default/single.html，接着在代码最后粘贴giscus的那段js代码即可