搭建 Github 个人博客(四)：配置博客评论功能

发表于 | 分类于

之前写了三篇关于怎么在 Github Pages 上使用 Hexo 搭建个人博客的教程。这两天自己想着给博客加一个评论的功能，上网搜了一下教程，发现网上关于这方面的文章比较少。东拼西凑的看了好几篇文章，终于是把这个功能是弄出来了。

所以，弄好之后干脆就把自己的操作过程整理一下，写一篇关于给博客添加评论系统的教程。

评论系统选择

现在很多的技术博客都是程序员们自己搭建的，所以博客本身并不带有评论功能。这时候我们就需要借助第三方的评论系统，来为自己的博客添加评论功能。

上网搜了一下，现在使用人数比较多的几个第三方评论系统：

  • 多说：以前是比较火的，但是在 2017 年 6 月 1 日已经正式关停服务，所以没法再使用了。
  • 畅言：搜狐旗下产品。但是需要个人博客备案后才能使用（我不会备案，所以放弃）。
  • 友言：JiaThis 旗下产品。但由于它是 Http 请求，而 Github Pages 现在是 Https 请求，在 Https 站点无法调用 Http 请求，所以也无法使用。
  • 网易云跟帖：我屁颠颠的去搜，结果告诉我，云跟帖产品将于2017年8月1日停止服务… …然后，没有然后了。
  • Disqus：国外的评论系统。火是很火，但是国内被墙了，而且官网全英文。所以我放弃了。

我能找到的几个主流的评论系统基本上已经全军覆没了。无意中看到有很多人在推荐 gitment，所以就去搜了一下。

gitment 是国内的大神孙士权基于 GitHub 的 Issues 开发的一款评论系统。

因此最终我选择了用 gitment 来搭建设置博客的评论功能（其实也没啥选择，只有这个能用）。

申请一个Github OAuth Application

使用 gitment 的第一步，就是需要去申请一个 GitHub 的 OAuth Application。

（1）点击个人头像选择 Settings 进入设置页面。

（2）选择下图左侧红框选中的选项 OAuth Apps。

（3）看到出现下图右侧中的提示，点击绿色按钮 Register a new application 注册一个应用程序。

（4）按照下图填写相关信息。

（5）注册成功之后会跳转到一个新页面，在新页面中我们可以得到我们的 Client ID 和 Client Secret，如下图所示：

（我也不知道这两串数字能不能展示出来，所以先糊了再说。）

记住自己的 Client ID 和 Client Secret，后面需要用到。

在博客中调用 gitment

上一步中的 Client ID 和 Client Secret 得到之后，接下来我们需要在自己的博客页面（具体位置看后面解释）中添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="gitmentContainer"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
    owner: 'Your GitHub username',
    repo: 'The repo to store comments',
    oauth: {
        client_id: 'Your client ID',
        client_secret: 'Your client secret',
    },
});
gitment.render('gitmentContainer');
</script>

说明：以上代码有四个需要修改的地方：

  1. Your GitHub username：填写你的博客所在的 GitHub 账户名；
  2. The repo to store comments：填写存放评论的 GitHub 仓库名（由于 gitment 的评论是通过 issues 来存放的，所以建议这里填写个人博客所在的仓库）。
  3. Your client ID：前面所申请到的 Client ID。
  4. Your client secret：前面所申请到的 Client Secret。

填完之后把代码保存然后执行以下命令上传到 Github 就可以了。

1
2
hexo g
hexo d

调用 gitment 的位置

上面的那一大段代码，到底添加到什么地方，是我纠结了半天的问题。搜索了很多都没有详细解释这一块内容的，原作者的博客中也只写了下面这一句话。

我找了很久这个“你的页面”到底是指的哪个页面。

后来发现，实际上，这段代码的作用就是调用 gitment 并添加评论功能。所以，你博客里哪个页面需要评论功能，就在哪个页面添加这个代码。但是又会有一个新的问题，我们的每一篇博文都需要有评论功能，总不能每发一篇博文都去添加一次。

所以我去翻了一下我的主题文件目录。（我用的是Even主题，其他主题应该也差不多）。

我在主题文件里找到一个comments.swig文件，然后将上面的代码按照上图所示位置添加进去。再保存上传以后就成功了。

初始化评论

由于 gitment 的原理是为每一遍博文以其 URL 作为标识创建一个 GitHub issue，对该篇博客的评论就是对这个 issue 的评论。因此，我们需要为每篇博文初始化一下评论系统，初始化后，你可以在你的 GitHub 上会创建相对应的 issue。

接下来，介绍一下如何初始化评论系统：

（1）上面的代码添加成功并上传后，你就可以在你的博文页下面看到一个评论框。还有一个报错提示，提示该篇博文的评论系统还没初始化。

（2）点击登录之后，使用自己的 GitHub 账号登录后，就可以在上面错误信息处看到一个 Initialize Comments 的按钮。

（3）点击 Initialize Comments 按钮后，就可以开始对该篇博文进行评论了，同时也可以在对应的 GitHub 仓库看到相应的 issue。

安全问题

因为我们在页面填写的 Client ID 和 Client Secret 别人都是可以看到的。虽然我也不知道这两串数字具体有什么用，但是如果这两串数字还有其他作用的话，那么明文显示在页面代码中就会存在安全性问题。但是也没有想到好的解决办法，所以暂时的办法就是创建一个小号，用小号的 Client ID 和 Client Secret。

我 秦始皇 打钱