为博客添加Gitalk评论插件

前言

之前体验过畅言、来必力、gitalk等评论插件,体验最好的就是gitalk了。我目前用的icalm主题内置了 Disqus评论插件,用着还行,但在国内的加载速度那个惨啊… 所以决定还是换回gitalk。

关于Gitalk

Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。使用 Github 帐号登录,界面干净整洁,最喜欢的一点是支持 MarkDown语法

主要特性:

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

安装

Gitalk提供了两种方式:

  • 直接引入
1
2
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  • npm 安装
1
$ npm i --save gitalk
1
2
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

使用

新建仓库

Github上新建一个仓库,操作简单,这里就不废话了。

创建OAuth Application

Gitalk 需要一个 Github Application,点击这里申请。当然,也可以在用户头像下的setting下的Developer settings中new一个Application,然后填写相应的参数。

OAuth Application

完成后会生成相应的clientIDandclientSecret

集成 Gitalk

找到icalm/layout/_partial/comment.ejs文件,把这段代码粘进去。注意,不同的主题方式不太一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<div id="gitalk-container"></div>
<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 %>',
id: window.location.pathname,
repo: '<%= theme.gitalk.repo %>',
owner: '<%= theme.gitalk.owner %>',
admin: '<%= theme.gitalk.admin %>'
})
gitalk.render('gitalk-container')
</script>

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

1
2
3
4
5
6
7
8
#gitalk settings
gitalk:
enable: true #用来做启用判断可以不用
owner: #Github 用户名,
repo: #储存评论issue的github仓库名
admin: #Github 用户名,
clientID: #`Github Application clientID`
clientSecret: #`Github Application clientSecret`

../post.ejs文件末尾添加 :(post.ejs是我的文章模板,大家根据自己的需求添加就行)

1
2
3
{% elseif theme.gitalk.enable %}
true<%- partial('_partial/comment') %>
{% endif %}

小结

到这里基本就大功告成了,没什么问题的话,当你点击进入你的博客页面后就会出现评论框了。

当你用 github 帐号登录(管理员),并且第一次加载该会比较慢,因为第一次加载会自动在你 repo的仓库下创建对应 issue。