博客添加 Giscus 评论系统

2

第一步：在 Github 中创建一个公开仓库，用于存储评论数据，并为仓库开启 Discussions 功能；

进入刚刚新建的仓库，点击仓库里的设置，开启 Discussions 功能。

第二步：安装 Giscus app；

点击 https://github.com/apps/giscus 安装 Giscus app，非常简单，仓库授权时选择刚刚创建的仓库即可，在此不过多赘述。

至于 Giscus 的配置，可以参考如下：

第三步：在博客中添加 Giscus 组件并进行样式调整；

在博客中添加 Giscus 组件，非常简单。当 Giscus 配置完成后，下方就会出现 Giscus 的配置代码，复制到需要添加评论的地方即可。

<script
  is:inline
  data-astro-rerun
  src="https://giscus.app/client.js"
  data-repo="mrm-im/mrm-im"
  data-repo-id="R_kgDONpduXg"
  data-category="Announcements"
  data-category-id="DIC_kwDONpduXs4CmBRi"
  data-mapping="title"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="bottom"
  data-theme="preferred_color_scheme"
  data-lang="zh-CN"
  data-loading="lazy"
  crossorigin="anonymous"
  async
></script>

如果需要调整样式，可以将 data-theme="preferred_color_scheme" 改为 data-theme="https://your-blog-url/style.css" 即可。

以下是本博客的样式，仅供参考。

main {
  --color-canvas-overlay: #2c2d2d;
}
.gsc-reactions-popover.color-text-secondary {
  color: #e5e0da;
}

main .pagination-loader-container {
  background-image: url(./progressive-disclosure-line.svg);
}

main .gsc-loading-image {
  background-image: url(./mona-loading-default.gif);
}

@media (prefers-color-scheme: dark) {
  main {
    --color-canvas-overlay: #e5e0da;
  }
  .gsc-reactions-popover.color-text-secondary {
    color: #2c2d2d;
  }

  main .pagination-loader-container {
    background-image: url(./progressive-disclosure-line-dark.svg);
  }

  main .gsc-loading-image {
    background-image: url(./mona-loading-default.gif);
  }
}

其实只需对样式进行微调即可，让 Giscus 获取不到定义的样式变量，这时可发现 Giscus 适配博客样式变得异常简单。

注：data-theme="https://your-blog-url/style.css" 需考虑 CORS 问题，否则会报错。