在Hexo的Next主题中集成gitalk

之前初搭Hexo时本想在Next主题中集成评论功能,无奈当时多说,网易云跟帖等评论系统已经关闭或即将关闭服务,而看Disqus等也有或多或少的问题,索性便放弃了这个功能。不过最近看到一个基于Github IssuePreact的评论插件gitalk非常流行,使用也较为方便,于是便上网找了相关博客将其集成于Next。

参考博客:https://asdfv1929.github.io/2018/01/20/gitalk/
Error: Validation Failed解决策略:https://liujunzhou.top/2018/8/10/gitalk-error/#Error-Validation-Failed

gitalk简介

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。

特性

  • 使用 GitHub 登录
  • 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]
  • 支持个人或组织
  • 无干扰模式(设置 distractionFreeMode 为 true 开启)
  • 快捷键提交评论 (cmd|ctrl + enter)

Gitalk详情请访问:https://github.com/gitalk/gitalk/blob/master/readme-cn.md

应用注册

首先在Github上注册新应用,注册链接:https://github.com/settings/applications/new
注册需有github账号,若无账号需先注册,注册链接:https://github.com/join?source=header-home

注册界面

参数说明:

  • Application name: 应用名称,随意命名即可(eg:hexo-gitalk)
  • Homepage URL: 应用主页的地址,必须使用以http://或https://为首的绝对地址,若用私有域名对github page地址做过解析,则以私有域名为准
  • Application description:应用描述,随意即可
  • Authorization callback URL:授权回调地址,与Homepage URL同理,设为域名解析后的地址

点击注册后界面会跳转至应用设置界面,其中的Client ID与Client Secret之后需要用到。

设置界面

Next 配置文件

gitalk.swig

在Next主题的/layout/_third-party/comments/目录新建gitalk.swig,并添加如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% 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 %}

comments.swig

在Next主题的/layout/_partials/comments.swig文件中添加如下内容,注意添加在最后一个elseif之前,保证有效:

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

index.swig

在Next主题的layout/_third-party/comments/index.swig文件中添加如下内容,位置随意:

1
{% include 'gitalk.swig' %}

gitalk.styl

在Next主题的/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

在Next主题的/source/css/_common/components/third-party/third-party.styl文件最后一行上添加如下内容,引入样式:

1
@import "gitalk";

_config.yml

在Next主题的配置文件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

注意:

  • ClientId 与 ClientSecret复制之前的即可
  • githubID 与 repo 虽然github显示首字母大写,但徜若昵称为小写则以小写为准
  • enable 表示gitablk功能是否开启
  • distractionFreeMode 表示免打扰模式是否开启

初始化应用

在第一次使用时gitalk尚未初始化,点击使用GitHub登录即可

Error: Validation Failed

有一部分博客可能会出现这种错误,原因是在gitalkissue中发现,若location.pathname大于50,便会出现这种错误。
解决策略是使用MD5编码URL缩短地址长度,方法如下:

md5.min.js

下载md5.min.js文件并将其粘贴至Next主题的themes\next\source\js\src\目录下

gitalk.swig

将之前创建的gitalk.swig文件替换如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% 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 src="/js/src/md5.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: md5(location.pathname),
distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
})
gitalk.render('gitalk-container')
</script>
{% endif %}

至此便成功将gitlab集成至Hexo的Nexo主题中。

0%