为 hexo 添加 gitment 评论

转载请附原文链接：为 hexo 添加 gitment 评论

一、前言

2015年开始写博客，用的是 hexo 搭建，主题采用的是 next，当时博客的评论功能采用的是多说，后来用了一段时间多说评论关闭无法使用，自己的博客就没有了评论，而去年一年各种原因没怎么折腾博客就没在意这事，最近准备重新开始继续坚持写，在 itsCoder 老司机的推荐下决定使用 Gitment 评论功能，但是在集成 的过程中自己一不留意踩了个大坑，折腾了好久，昨晚折腾到半夜一点半，本来很简单的一个事件让自己搞的这么复杂，浪费这么多时间，实在不应该，在此记录下，也希望能帮助到一些人。

二、搭建 Gitment 评论

Gitment 介绍

Gitment 是作者实现的一款基于 GitHub Issues 的评论系统。主要面向程序员群体，尤为适合各种静态博客和项目页面。

Gitment 包括以下特性：

• 在前端直接引入，不需要任何后端代码
• 使用 GitHub 账号登录
• 可以在页面进行查看、发送评论，点赞，@ 等操作
• 可以在 GitHub 进行编辑、删除评论等操作
• 有完整的 Markdown / GFM 支持
• 支持代码高亮
• 基于 GitHub 的通知
• 易于自定义

开始采坑之路

升级 next 主题

其实关于搭建 Gitment 评论已经有好多博客写了，但是都是基于作者搭建时候使用的 hexo 和 next 主题版本，有的可能当时使用主题版本比较低，没有支持 Gitment 评论功能，所以需要你配置很多代码，开始我自己也没注意，也是配置了一堆代码，后来发现有人提到升级 next 主题到最新版本已经支持 Gitment 评论了，于是就决定升级 next 主题，而且做技术的本该拥有一颗拥抱新鲜的事物的心态，但是这里升级 next 主题会有一个问题需要思考一下就是，当初你使用主题的时候会修改一些配置，比如添加统计代码，页面样式修改等待，那么如果直接拉去代码去升级一定会有很多冲突，所以想好自己怎么升级比较合理，网上也有一些解决方案自己可以查查，我开始是直接拉去代码然后解决冲突升级，但是解决完后发现很多地方报错，折腾几次后放弃了，采用直接拉去最新 next 代码，然后将原来的配置修改通过 git log 功能对比修改，粘贴到最新 next 代码中完成了升级，目前我使用的版本是 next 5.1.4 已经支持 gitment 评论功能，hexo 版本是 3.2.2 也是没毛病的。

注册 OAuth Application

1. 登录 Github。

2. 前往 https://github.com/settings/profile

3. 点击左侧下方的 Developer settings

4. 点击绿色 Register a new application

5. 填写以下内容：

   Application name：Gitment #自己随便起名字
   Homepage URL：http://yongyu.itscoder.com/ #这个是你自己博客主页地址，这个地址一定要写正确了，否则授权登录就会失败
   Application description：Blog comment system #随便写
   Authorization callback URL：http://yongyu.itscoder.com/ #这个是回调地址，一般写自己博客主页地址就行

6. 点击 Register application得到下面两条信息将来用于配置：

Client ID:b8bad0ebxxxxx
Client Secret:bcee560c6xxxxxxd042b

创建存放 Gitment 评论仓库 repository

这个仓库就是用于存储我们博客的评论，博客的评论会显示在仓库的 issue 中。

1. 在自己的 Github 创建 repository 项目。名字自己随便起，例如我的 Repository name 为 BlogComments
2. 地址：https://github.com/yongyu0102/BlogComments.git
3. 但是稍后填的配置信息是 BlogComments，不是全地址路径，这里一定要注意。

配置 next 主题参数

打开 D:\Android\hexo\themes\next 文件夹下的 _config.yml 文件，配置信息如下：

gitment:   
  enable:  true
  mint: true  
  count: true 
  lazy: false  
  cleanly: false  
  language: zh-Hans
  github_user: yongyu0102
  github_repo: BlogComments
  client_id: b8bad0exxxx #上面注册 OAuth Application 申请的 id
  client_secret: bcee560xxxxxx #上面注册 OAuth Application 申请的 client_secret
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

正常完成这一步，直接进行 hexo g -d之后生成并且部署就会生效，博客下面就会显示评论框，但是我的就是死活不显示啊，而且也没有任何报错信息啊，尴尬了。

采的坑

配置完成不显示 Gitment 评论框

遇到问题就开始查问题吧，可是没有报错信息，蛋疼，然后把网上的教程大概都看了一遍也都试过也没找到解决办法，然后想到是不是当前的 hexo 版本过低的原因，查看了下了下 hexo 版本是 3.2.2 ，然后试着把 hexo 也升级到最新，结果还是没好使，然后就折腾到半夜一点半，睡觉。

今天早上醒来回头想想，感觉自己的问题肯定是出在配置参数上面，然后就打开 next 主题查看关于评论的参数文件，在 D:\Android\hexo\themes\next\layout_partials 目录下找到一个文件 comments.swig 文件，虽然自己只是一个搞 Android 的，但是打开也能看个大概，看名字就知道是有关评论的（可见自己写代码的时候一定要考虑下看代码人的感受，名字。）代码如下：

{% if page.comments %}
  {% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
    <div class="comments" id="comments">
      <div class="ds-thread" data-thread-key="{{ page.path }}"
           data-title="{{ page.title }}" data-url="{{ page.permalink }}">
      </div>
    </div>

  {% elseif theme.facebook_sdk.enable and theme.facebook_comments_plugin.enable %}
    <div class="comments" id="comments">
      <div class="fb-comments"
           data-href="{{ page.permalink }}"
           data-numposts="{{ theme.facebook_comments_plugin.num_of_posts }}"
           data-width="{{ theme.facebook_comments_plugin.width }}"
           data-colorscheme="{{ theme.facebook_comments_plugin.scheme }}">
      </div>
    </div>

  {% elseif theme.vkontakte_api.enable and theme.vkontakte_api.comments %}
    <div class="comments" id="comments">
      <div id="vk_comments"></div>
    </div>

  {% elseif theme.disqus.enable %}
    <div class="comments" id="comments">
      <div id="disqus_thread">
        <noscript>
          Please enable JavaScript to view the
          <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
        </noscript>
      </div>
    </div>

  {% elseif theme.hypercomments_id %}
    <div class="comments" id="comments">
      <div id="hypercomments_widget"></div>
    </div>

  {% elseif theme.youyan_uid %}
    <div class="comments" id="comments">
      <div id="uyan_frame"></div>
    </div>

  {% elseif theme.livere_uid %}
    <div class="comments" id="comments">
      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
    </div>

  {% elseif theme.changyan.appid and theme.changyan.appkey %}
    <div class="comments" id="comments">
      <div id="SOHUCS"></div>
    </div>

  {% elseif theme.gitment.enable %}
    <div class="comments" id="comments">
      {% if theme.gitment.lazy %}
        <div onclick="showGitment()" id="gitment-display-button">{{ __('gitmentbutton') }}</div>
        <div id="gitment-container" style="display:none"></div>
      {% else %}
        <div id="gitment-container"></div>
      {% endif %}
    </div>

  {% elseif theme.valine.appid and theme.valine.appkey %}
    <div class="comments" id="comments">
    </div>
  {% endif %}

{% endif %}

一看原来这个文件是配置 next 主题使用哪个评论功能的，因为 next 主题支持很多种类评论，需要自己配置自己使用哪一种，其中关键的一句是 elseif theme.gitment.enable 如果 theme.gitment.enable 配置为 true 就会显示 gitment 评论功能，然后看了下自己的配置是正确的呀：

gitment:   
  enable:  true
  mint: true  
  count: true

然后从头到尾自己看了下代码，最上面这行 theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname

这是配置显示多说的，如果配置了多说参数就会显示多说评论，想一下自己之前使用的就是多说，那是不是可能是因为自己配置了多说，但是现在多说关闭了，所以没显示。然后查看 D:\Android\hexo\themes\next 文件夹下的 _config.yml 文件 关于多说的配置，然后把关于所有关于多说的配置全部设置为 false， 然后重新生成部署，结果还是没好使，尴尬，继续查找，打开 D:\Android\hexo 文件夹下的 _config.yml 配置信息，然后看见了一行关于多说的配置 duoshuo_shortname: yongyu ，原来这里也配置了多说信息，直接给注释掉，重新生成部署，终于成功显示 Gitment 评论框了。

点击评论框登录按钮没有跳转到授权登录页面

终于显示评论框了，然后点击登录测试下评论，结果没有正确跳转到登录授权页面，报错信息

?error=redirect_uri_mismatch&error_description=The redirect_uri MUST match the registered callback URL for this application.&error_uri=https://developer.github.com/apps/managing-oauth-apps/troubleshooting-authorization-request-errors/#redirect-uri-mismatch

看报错信息是注册回到 callback 的错误，查看一下因为我在注册 OAuth Application 时候填写的 Authorization callback 不是我博客主页地址域名 http://yongyu.itscoder.com/ ，而是之前为了测试评论框不显示的功能填写的 https://yongyu0102.github.io 没有绑定域名地址导致回调找不到报错，改成自己博客域名，一切正常了。

结语：折腾 Gitment 很简单的事情，用了我那么多时间，好气