本篇文章将介绍个人博客搭建时，几种常用的评论方案，以及遇到的坑

主流的几种评论方案

gitalk

采用 github issue 作为评论内容

vuepress 使用方式

在 vuepress 中使用 vuepress-plugin-comment 进行配置，底层是采用的 gitalk npm 包

    [
      'vuepress-plugin-comment', // 评论
      {
        choosen: 'gitalk',
        options: {
          clientID: '',
          clientSecret: '',
          repo: 'blog-gitalk-comment', // GitHub 仓库
          owner: 'francecil', // GitHub仓库所有者
          admin: ['francecil'], // 对仓库有写权限的人
          // gitalk 跨域代理问题可以看这个帖子 https://prohibitorum.top/7cc2c97a15b4.html
          proxy: 'https://safe-cors-server.vercel.app//github_access_token',
          // distractionFreeMode: true,
          pagerDirection: 'last', // 'first'正序 | 'last'倒序
          id: '<%- (frontmatter.permalink || frontmatter.to.path).slice(-16) %>', //  页面的唯一标识,长度不能超过50
          title: '「评论」<%- frontmatter.title %>', // GitHub issue 的标题
          labels: ['Gitalk', 'Comment'], // GitHub issue 的标签
          body:
            '页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>', // GitHub issue 的内容
        },
      },
    ],

存在的问题

• 默认的跨域中转服务被墙，需要自建代理，参考 https://prohibitorum.top/7cc2c97a15b4.html 基于 vercel 快速搭建一个免费的服务
• 默认未创建 issue，需要写个脚本在部署服务时批量创建，若某篇文章已创建则跳过
• 配置的权限过于松散，且明文配置在页面中，可能有安全风险（？）

utterances 使用

utterance (opens new window)

采用 github issue 作为评论内容，与 gitalk 不同的是， utterances 提供了一个中间服务和 github app 来鉴权，安全性会更好一点。

同时由于无需配置密钥，用户接入成本很低，博客也无需提前创建 github issue

使用方式

1. 新建评论仓库
2. 打开 utterances github app (opens new window) ，为其授予新建评论仓库的权限
3. 在页面中插件 utterances 的脚本

对于 vuepress 仓库，可以参考 https://github.com/francecil/blog/tree/master/docs/.vuepress/plugins/commemt 这边的代码，后续会抽成 npm 包

存在的问题

• 基于 iframe 展示评论，加载速度和性能相对 gitalk 较差，同时页面主题色同步需要一些 iframe 通信的成本。
• 依赖 utterances 服务，若 utterances 服务关闭则无法使用。

不过数据不会丢失（存在 github issues 中），同时 utterances 也提供了 utterances-oauth 自部署服务的方案

utterances 原理

见 https://lipk.org/blog/2020/06/08/run-utterances/

讲下 beaudar

国产版本：https://beaudar.lipk.org/ ，访问速度更快，支持了一些新功能

注意分支配置，新建的插件默认是 main 分支，beaudar 默认是 master 分支

使用的时候一直鉴权报错，估计是 beaudar 服务维护问题，暂时放弃使用