由于gitalk插件的评论是基于GithubIssues来做的,所以比较方便。

Hexo中的Indigo主题当前并没有支持gitalk插件,研究了一下该主题的代码,发现比较简单,于是决定将gitalk插件集成进来。

关于gitalk的具体使用方法这里就不说明啦,可以查看官方文档

添加gitalk插件支持代码

Indigo主题文件夹路径themes/indigo/layout/_partial/plugins中新建文件gittalk.ejs

gitalk
gitalk

并添加如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% if (theme.gitalk.enable){ %>
<section class="comments" id="comments">
<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script>
var gitalk = new Gitalk({
clientID: '<%- theme.gitalk.client_id %>',
clientSecret: '<%- theme.gitalk.client_secret %>',
repo: '<%- theme.gitalk.repo %>',
owner: '<%- theme.gitalk.owner %>',
admin: '<%- theme.gitalk.admin %>',
id: '<%= page.date %>',
distractionFreeMode: false
})

gitalk.render('gitalk-container')
</script>
</section>
<% } %>

comment.ejs中引入gitalk

修改comment.ejs,在这个文件里引入上一步的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<% if(post.comments){ %>

<%- partial('../plugins/disqus') %>

<%- partial('../plugins/uyan') %>

<%- partial('../plugins/gitment') %>

<%- partial('../plugins/valine') %>

<%- partial('../plugins/hyper-comments') %>

<%- partial('../plugins/gittalk') %>

<%} %>

添加的内容为:

1
<%- partial('../plugins/gittalk') %>

修改主题的_config.yml文件

修改indigo主题的配置文件_config.yml在适当的位置添加以下代码:

1
2
3
4
5
6
7
8
# 拓展:添加Gittalk支持
gitalk:
enable: true # 开启gitalk
client_id: # 这里填你的ClientId
client_secret: # 这里填你的ClientSecret
repo: # 这里填你的repo,一般为 username.github.io
owner: # 这里填所有者
admin: # 这里填管理者

结束

将文章的comments属性设置为true,在终端分别运行以下代码:

1
2
hexo g;
hexo d;

将你的静态博客发不到github page,看到以下效果则说明成功集成了gitlak插件。

gitalk
gitalk

ok,大功告成。