跳到主要内容

Utterances评论插件

utterances 是一款基于 GitHub issues 的开源评论插件，类似于 Gitalk，支持 markdown

对比其他插件​

为什么不用 Disqus 与 Gitalk

  1. Disqus: UI 过于冗余了，而且免费使用有广告，看起来不舒服。

  2. Gitalk: 基于 GitHub issues 的评论插件，存在安全性问题

    • 这些评论插件都是通过 OAuth 取得操作 issues 的权限，因此必须将 clientID 和 clientSecret 硬编码入 commit，而这个操作会将二者直接暴露出去
    • 尽管获得对 repos 的操作权限还需要授权 Token，但是这个可以通过反代 GitHub API 等手段拿到
    • 由于 GitHub 在权限粒度上并没有进一步细分（也就是说不能只操作 issues），所以一旦拿到 Token，对方就可以删光你的 public repos，因此使用它们的风险是非常高的。
为什么选择 Utterances
  1. Utterances 通过 GitHub App 实现，可以 只对 issues 进行授权，因此没有了安全性风险。

( 唯一要担心的问题是 Utterances 的开发者跑路（因为 Utterances 仍然需要服务端设施），但即使如此 issues 中的评论也不会消失，所以也不用担心数据丢失，大不了到时候将数据导出就好了)

  1. Utterances 另一个好处就是 不需要初始化，而 Gitalk 等评论插件都是需要作者手动初始化的。

当然，Utterances 也有 缺点，就是 加载可能会比较慢

安装 Utterances​

申请 GitHub App​

首先保证自己的博客是 public 仓库

打开 utterances - GitHub App 点击 Configure 进入你的个人Applications页面

在打开的页面中选择 Only select repositories，并在下拉框中选择自己的博客仓库（比如我就是 lacorda/lacorda.github.io，也可以安装到其他仓库），然后点击 Save并Install

utterances

生成HTML配置​

安装完成后就会自动跳转到配置页面，也可以手动打开 Utterances

在 repository 中填入仓库名称，比如我就是 lacorda/lacorda.github.io，注意格式，不要忘记用户名

Blog Post ↔️ Issue Mapping 表示 issues 标题和博客 posts 的映射关系，我选择默认的第一项 Issue title contains page pathname。

Issue Label 表示用于评论的 issues 要不要打上 label，这一项是可选的。我选择为这些 issues 打上 Comment。

最后一项是 Theme 根据自己的喜好选择即可。

utterances

然后就会生成一段对应选项的 HTML 配置，应该是类似于这样的：

<script src="https://utteranc.es/client.js"
        repo="lacorda/lacorda.github.io"
        issue-term="pathname"
        label="Comment"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

直接将它插入到你的博客中对应的位置即可

如何在 docusaurus 博客中插入 utterances插件​

首先，你需要找到你要插入评论的位置，以 docusaurus 为例

通过 swizzle 找到 DocItem/Layout，并使用 Eject，可以对已知组件进行重新编辑

src/theme/DocItem/Layout/index.js
import InnerHTML from 'dangerously-set-html-content';

// 将这段插入到需要放入的位置
<InnerHTML html={`
  <script src="https://utteranc.es/client.js"
          repo="lacorda/lacorda.github.io"
          issue-term="pathname"
          label="Comment"
          theme="github-light"
          crossorigin="anonymous"
          async>
  </script>
`}/>