星辰
星辰
Published on 2024-02-25 / 4 Visits
0
0

Notion Next 接入 Giscus 评论系统

1 Giscus 系统简介

Giscus 是一个基于 GitHub Discussions 的评论系统,它允许访客通过 GitHub 账户在网站上留下评论和反应。这种集成不仅增强了用户互动,还确保了评论的安全性和可管理性,因为所有的评论都存储在 GitHub 的仓库中。

2 配置 Giscus

2.1 创建或选择仓库

Giscus 需要一个 GitHub 仓库来存储评论。可以选择一个现有的公共仓库,或者创建一个新的。例如,Astralor 选择了他的博客仓库来存放评论:https://github.com/astralor/blog。如果需要创建新仓库,可以访问 https://github.com/new 进行创建。

2.2 仓库开启 discussion 功能

在 GitHub 仓库的设置中,需要启用 Discussions 功能。这可以通过在仓库设置的“Features”部分勾选“Discussions”选项来完成。以下是具体步骤的截图:

image.png

image.png

2.3 在 GitHub 中安装 giscus 应用

访问 https://github.com/apps/giscus 安装 Giscus 应用。点击“Install”按钮,并确保授权给存放评论的仓库。以下是安装过程的截图:

image.png

image.png

安装成功后,将看到以下确认信息:

image.png

image.png

2.4 访问 Giscus 填写并获取配置参数

访问 Giscus 配置页面:https://giscus.app/zh-CN。在这里,需要输入仓库名称,并选择 Discussion 分类为“Announcements”。以下是配置页面的截图:

image.png

image.png

配置完成后,记录下以下参数:

  • data-repo

  • data-repo-id

  • data-category-id

以下是参数记录的截图:

image.png

3 配置 NotionNext

3.1 在 Vercel 后台将获取的 Giscus 配置参数添加到环境变量

登录 Vercel 并进入 NotionNext 项目设置,添加环境变量。将 Giscus 的配置参数与 Vercel 的环境变量对应如下:

Giscus 参数名

Vercel 变量名

data-repo

NEXT_PUBLIC_COMMENT_GISCUS_REPO

data-repo-id

NEXT_PUBLIC_COMMENT_GISCUS_REPO_ID

data-category-id

NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID

以下是环境变量配置的截图:

image.png

3.2 重新部署 NotionNext 项目

完成环境变量的配置后,重新部署 NotionNext 项目以确保更改生效。以下是重新部署的截图:

image.png

4 效果展示

配置完成后,可以在网站上看到 Giscus 评论系统的效果。以下是效果展示的截图:

image.png

5 参考文档

  1. Giscus 官方文档


Comment