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

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

前言

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

GitHub授权接入

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

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。

Gitment评论框.png

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。
GitHub id获取.png

引入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
文有不当之处还请见谅!!!

常见问题:

参考:

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