如何为博客添加评论系统（基于giscus）

发表于 分类于 阅读次数：

如何为博客添加评论系统（基于giscus）

介绍

Giscus 是一个基于 GitHub Discussions 的开源评论系统，适用于博客、文档网站等静态网站。它能让读者通过 GitHub 账号发表评论，评论内容将同步保存到GitHub 仓库中。最重要的是它开源免费，方便配置。

在参照了网上众多教程后最终成功进行了配置（个人是基于hexo+next主题,我相信在其它的主题中也大差不差），写下这篇文章用于记录，希望能够帮助到别人。

在github页面需要做的

  • 首先在个人博客的仓库中将discussions打开

    image-20250618201638779

    image-20250618201728739

    • 同时需要确保要用于存储评论数据的库是公开的

    image-20250618201753428

  • 在github中安装giscus APP，随后点击图示部分进行指定

    image-20250618201115009

  • 之后可以指定令其适用于哪些仓库，存放评论的仓库与搭建网站的仓库不是必须相同的。前者必须是 Public 的仓库（否则网站访客就无法看到评论信息），但后者可以是 Private 的仓库。当然，这两者也可以是同一仓库。

    • 博主这里选择令其适用于我的个人博客仓库（所有之前的图片中，我的个人仓库是公开的）。

    image-20250618201417082

  • 随后点击该链接进行giscus配置

    • 将之前所指定的仓库的链接粘入

image-20250618202325693

在相关设置完成后，临时找个记事本将网页给出的代码粘入，之后有用，这里称为代码1

image-20250618202601306

  • 复制 hexo-next-giscus 项目 Readme 中 Configure 部分的代码块到刚才提到的记事本中，这里称为代码2

image-20250618202906985

在博客文件中需要做的

  • 在博客目录中打开命令行执行以下命令，安装：

    1
    npm install hexo-next-giscus

  • 将代码2与代码1进行比较，针对代码2中注释的提示，参照代码1进行修改，改好后将代码块2放到你_config.next.yml（next的主题配置文件） 中，同时 设置 comments.active为giscus

image-20250618203434006

  • 随后找到博客生成模板的目录（./ scaffolds ）,在其中找到post.md,打开后将代码1粘到文件最后，这样之后生成的博客都是有评论的，之前没评论的，也可以将代码1粘到最后，也会出现评论

    image-20250618204511664

    优化：

    如果想要自由控制是否添加评论，可以在上面的配置选项中加入comment: ture的选项，以后想取消某篇文章的评论，在该文章中将comment: ture改为comment: false即可

    同时，将原本粘贴的代码1改为如下格式即可：

    1
    2
    3
    {% if theme.comments and theme.comments.giscus and theme.comments.giscus.enable %}
      代码1
    {% endif %}

    image-20250618204629894

    路易丝