Gitalk評論插件使用

簡介

參考： Gitalk評論插件使用教程

Gitalk 是一個基于 GitHub Issue 和 Preact 開發(fā)的評論插件。

Gitalk 的特性：

1、使用 GitHub 登錄

2、支持多語言 [en, zh-CN, zh-TW, es-ES, fr, ru]

3、支持個人或組織

4、無干擾模式（設(shè)置 distractionFreeMode 為 true 開啟）

5、快捷鍵提交評論

使用Gitalk需要你做一些提前準(zhǔn)備：

1、在github上創(chuàng)建一個倉庫，Gitalk會把評論放在這個倉庫的issues里面。

2、在github上申請一個GitHub OAuth application，來讓Gitalk有權(quán)限操作github上的倉庫。

安裝與使用

采用 該博客 設(shè)置方法

• 在HTML文件中引入

<link rel="stylesheet" >
<script src="http://cdn.bootcss.com/gitalk/1.5.0/gitalk.min.js"></script>

建議直接把文件下載后放在項目目錄中，這樣就可以不再依賴第三方網(wǎng)絡(luò)了。

注意： 如果連接失效了，請在https://www.bootcdn.cn/上搜索gitalk然后找到對應(yīng)資源鏈接復(fù)制過來。

• 首先需要在html文件中添加一個容器，Gitalk組件會在此處顯示

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

• 使用下面的JavaScript代碼來生成Gitalk評論：

var gitalk = new Gitalk({
  clientID: '2eb19afceda708b27e64', // GitHub Application Client ID
  clientSecret: '36aedb5a30321626a8631689fee5fafd5929f612', // GitHub Application Client Secret
  repo: 'gitalk-comment'      // 存放評論的倉庫
  owner: 'yulilong',          // 倉庫的創(chuàng)建者，
  admin: ['yulilong'],        // 如果倉庫有多個人可以操作，那么在這里以數(shù)組形式寫出
  id: location.pathname,      // 用于標(biāo)記評論是哪個頁面的，確保唯一，并且長度小于50
})

gitalk.render('gitalk-container');    // 渲染Gitalk評論組件

里面參數(shù)下面會講解。

注意： 第一次Gitalk需要初始化評論，需要你先點擊使用GitHub登陸，然后刷新頁面才會初始化

new Gitalk的參數(shù)中有g(shù)ithub的倉庫信息和GitHub Application信息，所以首先我們創(chuàng)建這兩個。

在github上創(chuàng)建一個倉庫比較簡單這里就不講解了。下面講一下如何申請一個GitHub OAuth application

注意： 如果你打算在自己網(wǎng)站使用Gitalk，并且這個網(wǎng)站的源碼在github的倉庫上，那么你也可以直接使用這個倉庫，Gitalk只使用倉庫的Issues。

申請一個OAuth application

GitHub OAuth application允許程序來操作你的github賬戶，可以對github中倉庫讀寫。
詳情介紹：https://developer.github.com/...

申請GitHub OAuth application流程：

1、打開github網(wǎng)站登陸后，點擊右上角的用戶圖標(biāo)，選擇Settings

2、 在Settings頁面選擇Developer settings選項。

3、在Developer settings選擇OAuth Apps,然后會在頁面右邊有一個New OAuth App按鈕，點擊這個按鈕就進(jìn)入到新建OAuth application頁面

4、也可以直接代開這個鏈接：https://github.com/settings/a... 進(jìn)入新建頁面

在注冊OAuth應(yīng)用頁面有如下幾個參數(shù)需要填寫：

Application name：必填，OAuth的名字

Homepage URL：必填，你應(yīng)用的網(wǎng)址，哪個網(wǎng)站用了Gitalk組件，就填寫這個網(wǎng)址

Application description：選填，該OAuth的說明

Authorization callback URL：必填，授權(quán)成功后回調(diào)網(wǎng)址，跟Homepage URL參數(shù)保持一致就好

這些參數(shù)在注冊成功后是可以修改。

參數(shù)填好后，點Register application按鈕即可完成注冊。

注冊成功后會自動跳轉(zhuǎn)到這個OAuth應(yīng)用的頁面，或者在Developer settings選擇OAuth Apps后就能看見你創(chuàng)建的OAuth應(yīng)用名字，點擊它進(jìn)入這個OAuth應(yīng)用的頁面。在新創(chuàng)建的OAuth應(yīng)用里面的Client ID和Client Secret就是我們需要的參數(shù)。

Gitalk的參數(shù)說明

在上面使用Gitalk的JavaScript代碼中有一些參數(shù)：

var gitalk = new Gitalk({
  clientID: '2eb19afceda708b27e64', // GitHub Application Client ID
  clientSecret: '36aedb5a30321626a8631689fee5fafd5929f612',
  repo: 'gitalk-comment'      // 存放評論的倉庫
  owner: 'yulilong',          // 倉庫的創(chuàng)建者，
  admin: ['yulilong'],        // 如果倉庫有多個人可以操作，那么在這里以數(shù)組形式寫出
  id: location.pathname,      // 用于標(biāo)記評論是哪個頁面的
})

主要的參數(shù)：

• clientID
  類型：字符串，必填，申請的OAuth App的Client ID
• clientSecret
  類型：字符串，必填，申請的OAuth App的Client Secret
• repo
  類型：字符串，必填，github上的倉庫名字，用于存放Gitalk評論
• owner
  類型：字符串，必填，github倉庫的所有者的名字
• admin
  類型：數(shù)組(元素是字符串)，必填，github倉庫的所有者和合作者 (對這個 repository 有寫權(quán)限的用戶)
• id
  類型：字符串，選填，頁面的唯一標(biāo)識。長度必須小于50。此參數(shù)用于評論和頁面對應(yīng)的標(biāo)識，如果想讓兩個頁面用一個評論，可設(shè)置兩個頁面的id一樣。默認(rèn)值：location.href(頁面URL)
• title
  類型：字符串，選填，GitHub issue 的標(biāo)題，默認(rèn)值：document.title(HTML中title標(biāo)簽中的值)

注意：

雖然id和title參數(shù)是不是必填的選項，但是這個兩個參數(shù)很重要建議填上：

1、id參數(shù)用于評論記錄和頁面對應(yīng)的唯一標(biāo)記，有的時候發(fā)現(xiàn)好幾個頁面評論是一樣的，就是由于配置id參數(shù)的時候，這幾個頁面的id是一樣導(dǎo)致。由于id參數(shù)默認(rèn)值是location.href頁面URL，而有的時候URL中帶著頁面標(biāo)題的鏈接，導(dǎo)致URL長度超過了50個字符長度，會導(dǎo)致創(chuàng)建評論issues失敗(長度超過50個會創(chuàng)建失敗)，這點要注意。

2、title用于在github倉庫issues的標(biāo)題，如果你想管理評論可以設(shè)置一下這個參數(shù)，來區(qū)分該評論是來自于那個文章。

實際使用

• 可查看 關(guān)于 Gitalk評論 的源碼，其中實際參數(shù)配置位于 _config.yml

• 該博客 已實現(xiàn)評論功能，可體驗嘗試