基于Giscus和Github搭建一个评论区

最近了解到了Giscus,相较于Gitalk更加容易配置
因此有了这篇教程


0.你需要准备的

一个Github账号

1.准备工作

首先,您需要选择一个公共Github存储库(已存在或创建一个新的Github存储库)用于存储评论。
根据 giscus.app 的要求,需要对该仓库做以下配置

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

2.部署评论区

我的博客是基于hexo搭建的,所以只给出hexo下Giscus的部署方法

首先,打开Giscus,按照要求填写配置,在下方会出现启用 giscus

其次,转到_config.yml,找到部署Gitalk的地方,需要填写的内容可能如下可能如下(不同主题可能存在差异)

选择Giscus作为评论实现方法:

1
2
3
4
5
6
7
8
# 评论插件
# Comment plugin
comments:
enable: true
# 指定的插件,需要同时设置对应插件的必要参数
# The specified plugin needs to set the necessary parameters at the same time
# Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
type: giscus

配置Giscus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Giscus
# 基于 GitHub Discussions,类似于 Utterances
# Based on GitHub Discussions, similar to Utterances
# See: https://giscus.app/
giscus:
repo: <对应 data-repo>
repo-id: <对应 data-repo-id>
category: <对应 data-category>
category-id: <对应 data-category-id>
theme-light: light
theme-dark: dark
mapping: <对应 data-mapping>
reactions-enabled: <对应 data-reactions-enabled>
emit-metadata: <对应 data-emit-metadata>
input-position: <对应 data-input-position>
lang: <对应 data-lang>

向其中填入信息后,再次部署你的hexo,看看效果吧!


基于Giscus和Github搭建一个评论区
https://blog.byteloid.one/2024/02/03/基于Giscus和Github搭建一个评论区/
作者
bingxin666
发布于
2024年2月3日
许可协议