先叨叨几句

心心念念的博客评论功能上线了。🔥🔥🔥

本期就由聪明又知心的我来跟大家讲讲如何在 hexo 的 nosie 主题下配置 gitment 的评论功能。

首先每个 hexo 的博客主题都可能是不同语言模版写的，有的是手撕原生 HTML + CSS， 有的用的是 jade，有的用的是 pug。
就比如 noise 这个主题，当初选择它是因为样式够简单干净，没有那么花里胡哨的，所以就一直用着它，但是最近在折腾它的时候发现只支持 duoshuo 和 disqus 两种评论插件。
而 duoshuo 在 2017 就被迫关闭了: Duoshuo comment service is closing
帮懒得点的你们截个图算了：
duoshuo is closing
disqus 不够和社区友好，只能通过 facebook，twwiter 和 google 账户登陆才能添加评论，在这人均 github 的时代，用 gitHub 登陆无疑是明智之选。

什么是 gitment

在这个环境下，gitment 应运而生，它主要是利用 github 的 issue 功能，将博客的评论与 github 的 issue 绑定。而这样的方法，已经被前贤所验证过，所以基本不会存在被封的可能。
先把这个先贤拉出来给你们看看：

哦豁，找不到这个先贤了，反正你们记着有这人就行了，他亲自发了信给 github，询问他是否这样影响了 github 的开源精神，有没有违反相关龟定，github 官方亲自回复了，这样（将 issue 功能用来做评论功能）是不违反 github 使用协议的。

所以到这里我们就可以开心使用 gitment 了。

部署评论功能的第一步

首先我们需要去 github 认证我们的博客应用，这里利用的就是 oauth2 的授权码模式，大概意思就是让你有权限访问 github 的部分功能比如 issue 功能，具体可以看 阮一峰的 理解OAuth 2.0
不想看的不用点了，跟着我走就完事儿了。
先去 github 的 oauth 应用中心 认证你的博客应用：
github-oauth.png

然后就会跳转到认证成功的页面。保存好其中 Client ID 和 Client Secret

github-ouath-app.png

如何在 noise 主题中部署 gitment

noise 这个主题的 master 版本当前只支持 duoshuo 和 disqus 两种评论插件，但我想集成 gitment，然后我去作者的 github 上看了下，真有位勇士给他提了一个 PR，主要代码就是支持 gitment 评论功能，结果作者一直不给 merge 到 master 版本，无奈的很，我就手动复制那块代码到 nosie 主题下的 layout/_partial 目录下的 comment.pug 文件中，顺便给作者提了个 issue，叫他赶紧 merge 一下。

来围观：

github-noise.png

好了言归正传，首先：所以我们这里要把那位勇士的代码复制到 comment.pug 文件中，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if theme.gitment.enable
  link(rel="stylesheet", href="https://imsun.github.io/gitment/style/default.css")
  script(src="https://imsun.github.io/gitment/dist/gitment.browser.js")
  script.
    const gitment = new Gitment({
      id: '#{page.path}',
      owner: '#{theme.gitment.owner}',
      repo: '#{theme.gitment.repo}',
      oauth: {
        client_id: '#{theme.gitment.client_id}',
        client_secret: '#{theme.gitment.client_secret}',
      },
    });
    var comments = document.getElementsByClassName('post-comment');
    if (comments.length) {
      comments[0].appendChild(gitment.render());
    }

然后在 noise 的主题的 _config.yml 中加入以下配置：

1
2
3
4
5
6
gitment: 
  enable: true
  owner: OhIAmFine # 你的 github 账户名
  repo: blog # 用来存放 issue 评论的仓库名（注意只需要写仓库名，不需要写完整的仓库地址）
  client_id: xxx  # 刚才复制的 Client ID
  client_secret: xxx # 刚才复制的 Client Secret

配置好了之后再安装一下 gitment 的 npm 包：npm i gitment

部署博客评论功能

本地配置好之后，我们开始将我们的评论上线： hexo g && hexo d

然后打开随便一篇博客，登陆之后初始化评论功能之后，我们就可以使用我们的博客评论功能了。

gitment-init.png

其他

遇到同学反馈说博客评论时登录报错，查询了一下发现是 gitment 的服务器挂了，本来作者是自己搭的服务器，但是作者的服务器挂了，导致请求失败，传送门：网站无法访问了？

亲测的最新解决方案有两种：
1，自己搭一个服务器，将请求地址指向自己的服务器地址，安全又稳定。
2，用别人搭的服务器，将请求地址指向别人的服务器地址，不是特别安全，因为会将你的 Client ID 和 Client Secret 发送给他。

具体可以见这里： 解决gitment登录失败，报[object ProgressEvent]的错
done!