为 Github 博客添加 Gitalk 评论插件

blog, hexo

Gitalk 介绍

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。

特性

  • 使用 GitHub 登录
  • 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]
  • 支持个人或组织
  • 无干扰模式（设置 distractionFreeMode 为 true 开启）
  • 快捷键提交评论 （cmd|ctrl + enter）

创建 OAuth Application

打开 这个链接，点击 New OAuth App，填入以下信息：

  • Application name：应用名称，可以随便填
  • Homepage URL：主页 URL，一般填你的博客地址
  • Application description：应用描述，选填
  • Authorization callback URL：授权回调地址，必须填你的博客地址

接着你就可以得到 Client ID 和 Client Secret。

Client ID 和 Client Secret

新建 github 仓库保存评论

gitalk 评论采用的是 github 仓库 issues 的方式，所以你需要将它与你的仓库联系起来。建议新建一个仓库，专门用于保存评论。

我的仓库为 blog-comment。

修改主题

拿到 Client ID 和 Client Secret 后，接下来，我们要到我们主题配置文件下，新增如下配置：

_config.yml

# Gitalk
gitalk:
    enable: true     # 是否开启评论功能
    clientID: xxxxxxxxxx    # 刚才生成的 Client ID
    clientSecret: xxxxxxxxxxxxxx    # Client Secret，同上
    repo: blog-comment  # 刚才新建的用于保存评论的仓库名
    owner: isJaakko # 这个项目的拥有者（填你的账户名）
    admin: ['isJaakko'] # 管理员用户，可以填多个
    ID: location.pathname   # 页面 ID默认值，用于生成的 Issues 的 Labels 的值
    perPage: 15 # 每页最大评论数
    pagerDirection: last    # 排序方式是从旧到新（first）还是从新到旧（last）
    createIssueManually: true   #如果当前页面没有相应的 isssue ，且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮。
    distractionFreeMode: false  #是否启用快捷键(cmd|ctrl + enter) 提交评论.

点击 查看 各参数详细含义

找到你所使用的主题中，渲染文章的页面，如我使用的主题 cactus-white 中，该文件目录为 /layout/post.ejs，在最底部添加：

<div id="gitalk-container"></div>

// 引入 gitalk
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>
// 引入 MD5 加密算法
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '<%= theme.gitalk.clientID %>',
      clientSecret: '<%= theme.gitalk.clientSecret %>',
      repo: '<%= theme.gitalk.repo %>',
      owner: '<%= theme.gitalk.owner %>',
      admin: '<%= theme.gitalk.admin %>',
      id: md5(location.pathname),   // 这里需要注意！稍后会说
      createIssueManually: '<%= theme.gitalk.createIssueManually %>',
      distractionFreeMode: '<%= theme.gitalk.distractionFreeMode %>'
    });

    gitalk.render('gitalk-container');
</script>

现在，打开你的博客，你就可以看到评论区了。

gitalk 的界面非常简洁美观，很符合我的审美需求。唯一美中不足的是，每篇文章都需要管理员（刚才 admin 字段所填内容）手动打开初始化一下，才能使用评论。这就意味着，当你有多篇博客以后才开始用 gitalk 的话，之前的所有文章，你都需要手动打开一遍才能使用评论。

注意

  1. 应当为 gitalk 的 id 使用 MD5 加密生成唯一 32 位字符串，否则当文章名过长时，评论会初始化错误。
  2. 文章名称中如果使用了中文字符，会导致登陆出错，所以避免在文章名中使用中文字符。

至此，我们就大功告成了，快去叫上你的朋友们来评论吧！

参考：