hexo 博客next主题集成gitment或者gitalk评论系统

前言

之前使用多说,多说挂了,用网易跟帖代替,网易跟帖又没了。前段时间用来必力,感觉还行,但总归不踏实。后面发现有gitment,用github的issue作为评论载体,感觉靠谱许多。下面介绍一下hexo 的naxt主题中如何集成gitment以及gitalk评论系统。注:next主题版本为5.1.3,其他版本可能略有差异。

准备

在使用以上两个评论系统之前,都需要在github注册新的应用

参数说明:

1
2
3
4
Application name: #应用名称
Homepage URL: #网站URL
Application description #描述
Authorization callback URL:#网站URL

填写完成后,点击register application。

最后会生成Client ID以及Client Secret,后面需要用到。

完成之后需要创建一个仓库,仓库的名称为刚才应用的名称。

next主题集成gitment

主题配置

修改主题配置文件next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
gitment:
enable: true
githubID: github帐号
repo: 仓库名 #例如:BlogComments
ClientID: Client ID
ClientSecret: Client Secret
lazy: flase #false显示github评论框

修改next/languages/zh-Hans.yml

在zh-Hans.yml中增加一行,当然来如果你的主题语言是英语,就修改
en.yml

1
gitmentbutton: 显示评论

修改/layout/_partials/comments.swig

在文件的最后一个

1
</div>

后面再插入一个else if 分支

1
2
3
4
5
6
7
{% 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 %}

修改layout/_third-party/comments/index.swig

在最后增加一行

1
{% include 'gitment.swig' %}

在/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: window.location.pathname,
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.styl

在./source/css/_common/components/third-party/下增加gitment.styl
内容如下:

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;
}

修改third-party.styl

修改/source/css/_common/components/third-party/third-party.styl,
在最后增加一行,引入样式

1
@import "gitment";

小结

可能遇到的问题

1.页面提示ERROR NOT FOUND
解决:一般是由于你的repo填写错误,repo纯粹指的是的你的仓库名称。

2.每篇文章都需要初始化
next主题版本过低,建议更新到5.1.1及以上版本,可全部自动初始化每篇文章的评论。

3.在上面说到的路径找不到对应文件时,建议使用find 命令查找,因为next主题的目录结构可能会变化。

4.在本地查看时,建议打开浏览器的调试模式,可以查看控制台是否有错。

特点总结

优点

样式比较还可以,并且支持markdown语法,能够预览,相对于其他评论系统应该是比较稳定可靠来。

缺点

1.移动端不支持
2.只能使用github登录,不过github应该已经够了。

next主题集成gitalk

在集成gitalk之前,同样需要建立应用,操作步骤已经在准备章节中说明了。
gitalk

主题配置

修改主题配置文件next/_config.yml

在修改主题配置文件next/_config.yml中增加以下内容

1
2
3
4
5
6
7
8
gitalk:
enable: true
githubID: github帐号
repo: 仓库名称
ClientID: Client ID
ClientSecret: Client Secret
adminUser: github帐号#指定可初始化评论账户
distractionFreeMode: true

增加/layout/_third-party/comments/gitalk.swig

增加gitalk.swig,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if page.comments && theme.gitalk.enable %}
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: '{{ theme.gitalk.ClientID }}',
clientSecret: '{{ theme.gitalk.ClientSecret }}',
repo: '{{ theme.gitalk.repo }}',
owner: '{{ theme.gitalk.githubID }}',
admin: ['{{ theme.gitalk.adminUser }}'],
id: location.pathname,
distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
})
gitalk.render('gitalk-container')
</script>
{% endif %}

修改/layout/_partials/comments.swig

在最后一个div增加内容

1
2
{% elseif theme.gitalk.enable %}
<div id="gitalk-container"></div>

修改layout/_third-party/comments/index.swig

在最后增加一行

1
{% include 'gitalk.swig' %}

增加gitment.styl

在./source/css/_common/components/third-party/下增加gitalk.styl
内容如下:

1
2
3
4
.gt-header a, .gt-comments a, .gt-popup a
border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
top: 0.7em;

修改third-party.styl

修改/source/css/_common/components/third-party/third-party.styl,
在最后增加一行,引入样式

1
@import "gitalk";

小结

可能遇到的问题

1.页面提示ERROR NOT FOUND
解决:可能是仓库未创建或者仓库名填写错误。

2.每篇文章都需要初始化
next主题版本过低,建议更新到5.1.1及以上版本.

3.在上面说到的路径找不到对应文件时,建议使用find 命令查找,因为next主题的目录结构可能会变化。

4.在本地查看时,建议打开浏览器的调试模式,可以查看控制台是否有错。

特点总结

优点

支持移动端

缺点

缺点:不支持markdown在线预览

提高加载速度

为了提高加载速度,可以将gitalk.swig的https://unpkg.com/gitalk/dist/gitalk.css和https://unpkg.com/gitalk/dist/gitalk.min.js替换加载本地文件。

比如,在next/source/lib下新建gitalk文件夹,里面放置gitalk.css和gitalk.min.js文件。
引用方法

1
2
/lib/gitalk/gitalk.css
/lib/gitalk/gitalk.min.js

上面两个文件可以在github上的gitalk dist中下载

常见问题

提示Error: Cannot read property ‘avatarUrl’ of null

原因:评论中的github用户已经被注销了,需要到你的评论仓库删除该用户的评论。

总结

配置好的next主题可以在next中下载使用
以上两种方式私以为都是比较稳定的方式,还是值得一试。另外写这篇文章时,这两种评论系统的一些特点,可能到最新版本已经没有了,因此需要自己去尝试。

欢迎提出意见或者建议。
参考文章:Next主题的Gitalk移植

守望 wechat
关注[编程珠玑]获取更多原创技术文章
出入相友,守望相助!