爲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。