秉承着能省就省的原则,既然网站部署都已经托管了,那么评论区功能我也就使用 Giscus 好了 🤣。
Giscus 的使用也很简单,进入官网后按照步骤来进行配置就可以了,它主要是利用了 Github 的 discussions 来实现的。
- 你的仓库必须是公开的,否则访客将无法查看 discussion。
- giscus app 已安装,否则访客将无法评论和回应。
- Discussions 功能已在你的仓库中启用。
集成 Giscus
如果你已经按照 Giscus 的步骤完成操作后即可把 Giscus 添加到网站中。
原生 js
如果你的网站是使用原生 javascript 实现的那么你需要在网站中新增标签
<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>
组件框架
但如果向我这样使用了组件化的框架那么就需要使用 giscus 组件库
比如,我的网站是用 Docusaurus 构建的,而 Docusaurus 使用的是 React,因此我们需要安装 Giscus React 组件
npm i @giscus/react
使用组件
<Giscus
id="comments"
repo="[在此输入仓库]"
repoId="[在此输入仓库 ID]"
category="[在此输入分类名]"
categoryId="[在此输入分类 ID]"
mapping="pathname"
reactionsEnabled="1"
emitMetadata="0"
inputPosition="top"
theme="light"
lang="zh-CN"
loading="lazy"
/>
因为是由 Github 的 discussions 来实现的,因此目前只允许有 Github 账号的小伙伴评论 😊, 在本页最下方即可发表评论。