关于Gitalk

Gitalk是一个基于Github Issue和Preact开发的评论插件,可以使用Github进行登陆,界面干净整洁,并且支持Markdown语法。

Gitalk插件

Gitalk的特点:

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

安装方式

(1)直接引入

1
2
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

(2)npm安装

1
npm i --save gitalk

然后进行引入

1
2
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

使用方式

创建存放评论的仓库

在你的github中新建一个用来存放评论的仓库,这个就不在赘述了。需要注意的是需要在Settings-Features-Issures上打勾,你的存放博客的主仓库也需要打勾,默认应该是勾选上的,为了保险起见,建议进行检查。

创建OAuth Application

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

网上好多文章说Homepage URL填写博客地址,实际上是新建的存放评论的仓库地址,简直是误人子弟,搞得我调试了半天才意识到那是错误的做法。
配置参考
完成后会生成相应的clientIDandclientSecret。

在hexo主题中集成Gitalk

找到/layout/_partial/comment.ejs文件,把这段代码粘进去。注意,不同的主题方式不太一样,使用时请参考相关主题的用法,比如我的主题就不是用ejs的后缀,而是pug

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>

注意: 上面的代码只是参考,大家需要根据自己的主题进行修改。
然后可以在主题配置文件/_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

其它

到这里基本就大功告成了,不出意外的话,即使出了意外,百度上几乎都会有答案,此时动动你的小手指搜索一下吧。当你点击进入你的博客页面后就会出现评论框了。

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