如何經過Gitalk評論插件，5分鐘爲你的博客快速集成評論功能

時間 2019-11-07

標籤如何經過 gitalk 評論插件 5分爲你博客快速集成功能简体版

原文原文鏈接

歡迎關注我的微信公衆號: 小哈學Java, 優質文章第一時間推送喲！！javascript

我的網站: www.exception.site/essay/how-t…css

小哈以前有給你們分享如何給本身的個站快速集成聊天室功能，新關注的小夥伴可參考：《黑科技！僅需 3 行代碼，就能將 Gitter 集成到我的網站中，實現一個 IM 即時通信聊天室功能？》html

集成完了聊天室，是否是感受還少了什麼？今天給你們分享一下，如何經過 Gitalk 快速集成評論功能。java

1、什麼是 Gitalk

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

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

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

2、Gitalk 特性

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

3、爲何要使用 Gitalk

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

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

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

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

因此小哈選擇了 Gitalk, 它限制了只有 GitHub 用戶才能登陸評論，還世界一片清淨，哈哈！

4、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'
複製代碼

5、爲你的個站集成 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，沒有的話，經過這個網址去申請：github.com/settings/ap…, 跳轉頁面以下：

點擊註冊：

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

最終，下哈的填寫的參數以下，小夥伴們根據本身我的狀況填寫本身的：

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

6、你可能會碰到的坑

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
})
複製代碼