为Hexo添加Gitalk评论插件

本文同步于我的博客：https://zhoushuo.me/blog/2018/03/22/hexo-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提供了两种方式：

• 直接引入

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

• npm 安装

$ npm i --save gitalk

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

使用

新建仓库

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

建立OAuth Application

Gitalk 须要一个 Github Application，点击这里申请。固然，也能够在用户头像下的setting下的Developer settings中new一个Application，而后填写相应的参数。

完成后会生成相应的clientIDandclientSecret。

集成 Gitalk

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

<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中增长如下内容。

#gitalk settings
gitalk:
  enable: true #用来作启用判断能够不用
  owner: #Github 用户名,
  repo: #储存评论issue的github仓库名
  admin: #Github 用户名,
  clientID: #`Github Application clientID`
  clientSecret: #`Github Application clientSecret`

在../post.ejs文件末尾添加 ：（post.ejs是个人文章模板，你们根据本身的需求添加就行）

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

其余

到这里基本就大功告成了，不出意外的话，当你点击进入你的博客页面后就会出现评论框了。

当你用 github 账号登陆（管理员），而且第一次加载该会比较慢，由于第一次加载会自动在你 repo的仓库下建立对应 issue。