如何通過Gitalk評論插件，5分鍾為你的博客快速集成評論功能

本文轉載自查看原文 2019-05-26 11:01 1015

歡迎關注個人微信公眾號: 小哈學Java, 文末分享阿里 P8 高級架構師吐血總結的《Java 核心知識整理&面試.pdf》資源鏈接！！

個人網站: https://www.exception.site/essay/how-to-install-gitalk-on-your-blog

Gitalk評論插件,為你的博客快速集成評論功能

小哈之前有給大家分享如何給自己的個站快速集成聊天室功能，新關注的小伙伴可參考：《黑科技！僅需 3 行代碼，就能將 Gitter 集成到個人網站中，實現一個 IM 即時通訊聊天室功能？》

集成完了聊天室，是不是感覺還少了什么？今天給大家分享一下，如何通過 Gitalk 快速集成評論功能。

一、什么是 Gitalk

Gitalk 的官方網站地址是: https://gitalk.github.io

Gitalk

小哈截圖的時候，Star 數已經達到 2000+ 了，那它到底是個什么玩意呢？來自官方的解釋：

Gitalk 是一個基於 GitHub Issue 和 Preact 開發的評論插件。

二、Gitalk 特性

使用 GitHub 登錄
支持多語言 [en, zh-CN, zh-TW, es-ES, fr, ru]
支持個人或組織
無干擾模式（設置 distractionFreeMode 為 true 開啟）
快捷鍵提交評論（cmd|ctrl + enter）

三、為什么要使用 Gitalk

其實國內也有很多易於集成的評論插件，如多說、友言等。國外呢，用的比較多的就是 Dispus 了。這其中小哈使用過的有多說和 Dispus。

先說說 Dispus, 由於服務器架設在國外，訪問速度首先是個問題，第二個就是注冊了，界面全英文，對一些小白想要快速集成評論功能的，也是相當不友好的；另外，Dispus 僅支持國外一些社交賬號登錄，如 Fackbook, Google, Twritter 等，我想你的個人博客一定還是國內用戶訪問多些，選它的話，需要思量一下了。

當然，追求逼格，當我沒說，哈哈！

當我沒說

在來說說國內的多說、友言，集成很方便，由於在國內，訪問速度也是棒棒噠。而它們支持國內各種社交賬號登錄，如 QQ，微博等。也正是因為留言的門檻低了，導致了一些素質較低的鍵盤俠隨意登錄評論，你可能花了很長時間寫的一篇博文，他們評論兩個字：傻X ！就給你懟的懷疑人生！

所以小哈選擇了 Gitalk, 它限制了只有 GitHub 用戶才能登錄評論，還世界一片清凈，哈哈！

四、Gitalk 安裝

Gitalk 安裝有兩種方式：

直接引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

<!-- or -->

<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'

五、為你的個站集成 Gitalk

首先，添加一個 div 容器：

<div id="gitalk-container"></div>

添加下面的 javascript 代碼來生成 Gitalk 插件：

var gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID',
  clientSecret: 'GitHub Application Client Secret',
  repo: 'GitHub repo',
  owner: 'GitHub repo owner',
  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
  id: location.pathname,      // 請確保你的 location 連接小於 50 個字符，否則，插件會生成失敗
  distractionFreeMode: false  // 專注模式
})

gitalk.render('gitalk-container')

看完上面這段 javascripte 代碼，你肯定很疑惑，clientID、clientSecret 是個啥？

別急！你需要先申請 GitHub Application，沒有的話，通過這個網址去申請：https://github.com/settings/applications/new, 跳轉頁面如下：

Github OAuth 應用注冊

點擊注冊：

填寫好 clientID 與 clientSecret，你還需要單獨新建一個倉庫，或者一個你已經創建好的倉庫名稱到 repo 項中。owner 和 admin 填寫你的個人 ID 即可。

Github 個人ID

最終，下哈的填寫的參數如下，小伙伴們根據自己個人情況填寫自己的：

var gitalk = new Gitalk({
    clientID: '6b60cd90107d766',
    clientSecret: 'aaef1f960ce2a61393b8f173b672b',
    repo: 'weiwosuoai.github.io',
    owner: 'weiwosuoai',
    admin: ['weiwosuoai'],
    id: location.pathname,
    distractionFreeMode: false
})

六、你可能會碰到的坑

6.1 未找到相關的issue評論，請聯系xxx初始化創建

出現這總情況是因為博主未給文章評論初始化，博主只需要登錄 GitHub 賬戶即可。如果你登錄后，返回了首頁，說明你的配置可能有問題，再檢查一下 gitalk 個項參數是否正確。

6.2 Error: Not Found.

未能正確找到倉庫 repo，檢查一下你的倉庫是否配置正確。

6.3 Error: Validation Failed.

發生這種情況，是因為 GitHub 對 Issue 的 label 存在限制，不能超過 50 個字符。

PS: label 標簽就是文章頁面的鏈接地址，如果地址過長，會導致加載 Gitalk 插件失敗。

小哈的解決版本是，對 localtion.pathname 做了一個截取，只取 50 個字符：

// 截取字符串
var title = location.pathname.substr(0, 50);
var gitalk = new Gitalk({
    clientID: '6b60cd9017d766',
    clientSecret: 'aaef1f960ce2a6c0bec583e1e1393b8',
    repo: 'weiwosuoai.github.io',
    owner: 'weiwosuoai',
    admin: ['weiwosuoai'],
    id: title,
    distractionFreeMode: false
})

還有另外一些解決方案，如 MD5 等。可參考鏈接：https://github.com/gitalk/gitalk/issues/102