Docusaurus 添加评论功能

November 26, 2024 · 2 min read

Docusaurus 本身是不支持评论系统的，它是静态网站，没有数据库，所以我们需要找一个地方存储我们的评论信息。所以这里我们要借助其它组件，有个叫做Gicus的组件，它其实是基于Github做了封装，把评论信息存储在Github 的仓库里了。

Gicus 主页

https://giscus.app/zh-CN

进入Gicus 主页，我们填写我们的仓库信息，然后会给你一个 script 脚本信息

<script
  src="https://giscus.app/client.js"
  data-repo="vicoqi/giscus"
  data-repo-id="R_kgDO***"
  data-category="Announcements"
  data-category-id="DIC_kwDONSHvHM4CkcCv"
  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"
  data-loading="lazy"
  crossorigin="anonymous"
  async
></script>

放入到 Docusaurus 里

我们需要把上面脚本信息，用到页面里，这样每个博客页面才有评论窗口。

那就需要使用到自定义组件了，使用下面的 swizzle 指令，会自动在项目下生成 BlogPostPage 组件。然后我们在这个组件里添加评论组件。

执行命令

npm run  swizzle @docusaurus/theme-classic BlogPostPage -- --eject

TODO

感知网站主题黑白样式，调整评论黑白样式展示

Gicus 主页​

放入到 Docusaurus 里​

参考​

Gicus 主页

放入到 Docusaurus 里

参考