秉承着能省就省的原则，既然网站部署都已经托管了，那么评论区功能我也就使用 Giscus 好了 🤣。

Giscus 的使用也很简单，进入官网后按照步骤来进行配置就可以了，它主要是利用了 Github 的 discussions 来实现的。

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

集成 Giscus

如果你已经按照 Giscus 的步骤完成操作后即可把 Giscus 添加到网站中。

原生 js

如果你的网站是使用原生 javascript 实现的那么你需要在网站中新增标签

copy
<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 组件

copy
npm i @giscus/react

使用组件

copy
<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 账号的小伙伴评论 😊， 在本页最下方即可发表评论。