Hexo中Gitalk配置使用教程-可能是目前最详细的教程

为什么换Gitalk

对,没错,Gitment用了不到48h,我又换了,换成了Gitalk。是因为Gitment对移动端优化不好。
这回就不像上回了,我光测试就花了我一下午……

怎样配置和使用Gitalk

首先,你得有一个Github账号(这个就不多说了吧),下面,打开这个链接,具体填法如下:

1
2
3
4
Application name //应用名称,随便填
Homepage URL //没有过多要求,可以填自己的博客地址
Application description //应用描述,描述一下,无要求
Authorization callback URL //这个就有要求了,填自己要使用Gitment的博客地址,不可乱填

接着,你就可以得到Client IDClient Secret,之后会用到的。接下来,我们回到hexo的主题配置里继续!
(熟悉的人就知道了,我又懒了……)

继续,在这里,我以NexT主题做示范,毕竟其他的也是大同小异。
在主题的\layout\_third-party\comments目录中,新建一个gitalk.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
{% 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.owner }}',
admin: ['{{ theme.gitalk.adminUser }}'],
id: {{ theme.gitalk.ID }},
labels: '{{ theme.gitalk.labels }}'
perPage: {{ theme.gitalk.perPage }},
pagerDirection: '{{ theme.gitalk.pagerDirection }}',
createIssueManually: {{ theme.gitalk.createIssueManually }},
distractionFreeMode: {{ theme.gitalk.distractionFreeMode }}
})

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

还是,在主题的\layout\_third-party\comments目录中,找到一个index.swig的文件,打开,添加这一行代码:

1
{% include 'gitalk.swig' %}

接着,在主题的\layout\_partials目录中,找到comments.swig文件,打开,找到

1
2
3
4
5
{% elseif theme.valine.appid and theme.valine.appkey %}
<div class="comments" id="comments">
</div>

{% endif %}

在空了一行的地方加上以下代码:

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

好,最难的部分你已经完成了!👏👏👏
(其实应该是博主最难的地方完成了,调试了半天……😢😢😢)

接下来,转到主题的配置文件里,加上这一段:

1
2
3
4
5
6
7
8
9
10
11
12
13
gitalk:
enable: true
ClientID: xxxxxx
ClientSecret: xxxxxxxxxxxx
repo: gitalk
owner: geedme
adminUser: geedme
ID: location.pathname
labels: gitalk
perPage: 15
pagerDirection: last
createIssueManually: true
distractionFreeMode: false

部分功能未添加,因为大部分人应该也用不到,这里就不多说了,如果需要更多,为什么不去官方文档呢(这回不是我不会了😁😁😁)

各个功能我来说一下吧:

1
2
3
4
5
6
7
8
9
10
11
12
enable: true //指的是是否开启Gitalk
ClientID: xxxxxx //之前的Client ID
ClientSecret: xxxxxxxxxxxx //之前的Client Secret
repo: gitalk //你要存放的项目名,下文会详细再说
owner: geedme //这个项目名的拥有者(GitHub账号或组织)
adminUser: geedme //管理员用户,下文也会详细讲
ID: location.pathname //页面ID,不知道就默认的就好了
labels: gitalk //GitHub issues的标签,下面会详细说
perPage: 15 //每页多少个评论
pagerDirection: last //排序方式是从旧到新(first)还是从新到旧(last)
createIssueManually: true //如果当前页面没有相应的 isssue ,且登录的用户属于 admin,则会自动创建 issue。如果设置为 true,则显示一个初始化页面,创建 issue 需要点击 init 按钮。
distractionFreeMode: false //是否启用快捷键(cmd|ctrl + enter) 提交评论.

详细说明:

  • repo
    Gitalk是基于GitHubissues功能的,所以,你要为他建一个库或用现成的库,我个人建议新建一个,而repo就是你要用的库的名称。 比如,我就为Gitalk专门建了一个叫gitalk的库,所以在repo:处填Gitalk

  • adminUser
    即管理员帐号。如果你是个人账号,那么这里就填你的账户名和协作者的账户名。
    如:我没有协作者,就填账户名,例:geedme;
    如果我有协作者, 就在每两个账户名之间添加',',如:geedme','geektowncn','gtcn
    如果用的是组织名,直接输入主账号即可,方法同上。

  • labels
    主要是说一下,如果你之前用的是Gitment,又有评论,把这里改成gitment即可,如果没有,默认的就可以啦!

所以,完成!

其它

Demo就在下面,欢迎留言评论!

2018年1月7日17:03:00

发现了hexo渲染代码部分出错……我在Markdown预览里面看着好好的呀……
已修复

2018年1月13日20:19:19

复制我之前的文章,关键词没改过来……

2018年1月19日20:21:55

第一次(其实是第二次)在GitHub上帮助添加了代码
在NeXT主题上添加了Gitalk代码!