内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

为hexo添加gitment评论

2018-04-23 17:39 出处:清屏网 人气: 评论(0

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 %}
    <divclass="comments"id="comments">
      <divclass="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 %}
    <divclass="comments"id="comments">
      <divclass="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 %}
    <divclass="comments"id="comments">
      <divid="vk_comments"></div>
    </div>

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

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

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

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

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

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

  {% elseif theme.valine.appid and theme.valine.appkey %}
    <divclass="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 很简单的事情,用了我那么多时间,好气

分享给小伙伴们:
本文标签: gitmenthexo

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号