Hexo博客框架下Gitment取代多说评论

前言

以往的儿童节都会给儿子说：“亲爱的儿子，不好意思，今年你爹又没追到你娘，你再等等吧，提前祝你六一快乐”。今年六一略显不同，多说正式关闭服务，心塞。曾也想转回Disqus，也尝试注册了畅言(奈何要备案网站)，最终种种原因不得不放弃了。
近期，不经意间看到了，imsun实现的一款基于 GitHub Issues 的评论系统Gitment，作为菜鸟的我看到后，还是蛮佩服的。

GitHub授权接入

Gitment是使用的GitHub Issues作为评论系统，在接入Gitment前，需要获得GitHub的授权，获得相应的客户端id和客户端私钥，以备站点使用。具体步骤如下图所示：
OAuth application注册接入

Hexo框架Next主题下添加Gitment

如果您使用的是Hexo框架的Next主题博客，想要添加Gitment的时候，记得将自己的Next主题更新下版本，开始本人使用的是version 5.1.0的，配置后，会遇到每次打开文章，都需要重新点击Initialize comments的情况，以往评论历史数据获取也有问题。鉴于此，我更新了Next主题（当前为version 5.1.1），现在使用正常，大家可先来本人博客看看效果：仁伯安GitHub主页，（首先得谢谢DotaWang11同学的支持评论O(∩_∩)O~），如果您从事iOS工作，还请在仁伯安的GitHub给个Star。

Next主题下Gitment配置

引自：Gitment - 使用 GitHub Issues 搭建评论系统

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div id="container"></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({ id: '页面 ID', // 可选。默认为 location.href owner: '你的 GitHub ID', // 可以是你的GitHub用户名，也可以是github id repo: '存储评论的 github repo', oauth: { client_id: '你的 client id', client_secret: '你的 client secret', }, }) gitment.render('container') </script>

在配置owner的时候，可以在浏览器中输入：https://api.github.com/users/GitHub用户名，来获取对应数据id。

引入Gitment需要将以上引文代码写入对应的页面即可，在Hexo框架的Next主题中配置Gitment的步骤如下：

• 主题文件config.yml配置
  在主题下themes/next/_config.yml文件中添加：

  1 2 3 4 5 6 7 8 9

  # Gitment # Introduction: https://imsun.net/posts/gitment-introduction/ gitment: enable: true githubID: zonghongyan repo: zonghongyan.github.io ClientID: ------ ClientSecret: ------ lazy: false

其中lazy的含义，是否懒加载相应评论框，如果为true，文章底部评论是收起状态，提示显示 Gitment 评论按钮，单击展开评论框。

• 懒加载按钮显示的文字设置：

  在主题下languages/en.yml文件中添加：

  1	gitmentbutton: Show comments from Gitment

在主题下languages/zh-Hans.yml文件中添加：

1

gitmentbutton: 显示 Gitment 评论

在主题下languages/zh-hk.yml文件中添加：

1

gitmentbutton: 顯示 Gitment 評論

在主题下languages/zh-tw.yml文件中添加：

1

gitmentbutton: 顯示 Gitment 評論

• 懒加载按钮div及事件配置

  在主题下layout/_partials/comments.swig文件中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13

      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
    {% elseif theme.changyan.appid and theme.changyan.appkey %}
      <div id="SOHUCS"></div>
   {% elseif theme.gitment.enable %}
     {% 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 %}
    {% endif %}
  </div>
{% endif %}

• 对应页面生成JS代码配置
  在主题下layout/_third-party/comments/目录下中添加文件gitment.swig：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

  {% if theme.gitment.enable %} {% set owner = theme.gitment.githubID %} {% set repo = theme.gitment.repo %} {% set cid = theme.gitment.ClientID %} {% set cs = theme.gitment.ClientSecret %} <link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css"> <script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script> {% if not theme.gitment.lazy %} <script type="text/javascript"> var gitment = new Gitment({ id: document.location.href, owner: '{{owner}}', repo: '{{repo}}', oauth: { client_id: '{{cid}}', client_secret: '{{cs}}', }}); gitment.render('gitment-container'); </script> {% else %} <script type="text/javascript"> function ShowGitment(){ document.getElementById("gitment-display-button").style.display = "none"; document.getElementById("gitment-container").style.display = "block"; var gitment = new Gitment({ id: document.location.href, owner: '{{owner}}', repo: '{{repo}}', oauth: { client_id: '{{cid}}', client_secret: '{{cs}}', }}); gitment.render('gitment-container'); } </script> {% endif %} {% endif %}

添加gitment.swig文件后，在主题下layout/_third-party/comments/index.swig文件中引入gitment.swig文件：

1

{% include 'gitment.swig' %}

• 设置CSS样式
  在主题下source/css/_common/components/third-party/目录下添加gitment.styl文件，设置button的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13

#gitment-display-button{
     display: inline-block;
     padding: 0 15px;
     color: #0a9caf;
     cursor: pointer;
     font-size: 14px;
     border: 1px solid #0a9caf;
     border-radius: 4px;
 }
 #gitment-display-button:hover{
     color: #fff;
     background: #0a9caf;
 }

之后，在主题下 source/css/_common/components/third-party/third-party.styl文件中引入相应的CSS样式即可

1

@import "gitment";

详见：Add Gitment Support
文有不当之处还请见谅！！！

常见问题：

• 配置主题文件_config.yml时，格式错误，比如gitment前有空格也会造成代码生成问题；
• Error: Not Found问题，repo库填写问题，详见gitment issues 18；
• 其他问题，参见作者项目的Issue
• 作者提醒使用本项目的用户，请保持克制，切勿滥用。详见 Gitment：使用 GitHub Issues 搭建评论系统

参考：

• [1]. 使用 GitHub Issues 搭建评论系统
• [2]. imsun-gitment
• [3]. Add Gitment Support

本文已在版权印备案，如需转载请在版权印获取授权。获取版权

原文来自: 仁伯安

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com