摘要：說明是一個(gè)基于和開發(fā)的評(píng)論插件。默認(rèn)值類型布爾值，選填，類似評(píng)論框的全屏遮罩效果。默認(rèn)值類型布爾值，選填，如果當(dāng)前頁面沒有相應(yīng)的且登錄的用戶屬于，則會(huì)自動(dòng)創(chuàng)建。參考類型布爾值，選填，啟用快捷鍵提交評(píng)論。

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

Gitalk 的特性：

1、使用 GitHub 登錄
2、支持多語言 [en, zh-CN, zh-TW, es-ES, fr, ru]
3、支持個(gè)人或組織
4、無干擾模式（設(shè)置 distractionFreeMode 為 true 開啟）
5、快捷鍵提交評(píng)論 （cmd|ctrl + enter）

使用Gitalk需要你做一些提前準(zhǔn)備：
1、在github上創(chuàng)建一個(gè)倉庫，Gitalk會(huì)把評(píng)論放在這個(gè)倉庫的issues里面。
2、在github上申請(qǐng)一個(gè)GitHub OAuth application，來讓Gitalk有權(quán)限操作github上的倉庫。

兩種方式引入：

1、直接在HTML文件中引入

建議直接把文件下載后放在項(xiàng)目目錄中，這樣就可以不再依賴第三方網(wǎng)絡(luò)了。
注意：如果連接失效了，請(qǐng)?jiān)趆ttps://www.bootcdn.cn/上搜索gitalk然后找到對(duì)應(yīng)資源鏈接復(fù)制過來。

2、通過npm安裝

npm i --save gitalk

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

1、首先需要在html文件中添加一個(gè)容器，Gitalk組件會(huì)在此處顯示

2、使用下面的JavaScript代碼來生成Gitalk評(píng)論：

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

gitalk.render("gitalk-container");    // 渲染Gitalk評(píng)論組件

里面參數(shù)下面會(huì)講解。
配置好后，頁面最終效果(https://gitalk.github.io/)：

注意：

1、第一次Gitalk需要初始化評(píng)論，需要你先點(diǎn)擊使用GitHub登陸，然后刷新頁面才會(huì)初始化，或者自己去倉庫里手動(dòng)創(chuàng)建一個(gè)issues，并添加issues的labels值為Gitalk的labels參數(shù)和id參數(shù)的值。

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

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

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

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

申請(qǐng)GitHub OAuth application流程：

1、打開github網(wǎng)站登陸后，點(diǎn)擊右上角的用戶圖標(biāo)，選擇Settings
2、 在Settings頁面選擇Developer settings選項(xiàng)。
3、在Developer settings選擇OAuth Apps,然后會(huì)在頁面右邊有一個(gè)New OAuth App按鈕，點(diǎn)擊這個(gè)按鈕就進(jìn)入到新建OAuth application頁面
4、也可以直接代開這個(gè)鏈接：https://github.com/settings/a... 進(jìn)入新建頁面

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

Application name：必填，OAuth的名字
Homepage URL：必填，你應(yīng)用的網(wǎng)址，哪個(gè)網(wǎng)站用了Gitalk組件，就填寫這個(gè)網(wǎng)址
Application description：選填，該OAuth的說明
Authorization callback URL：必填，授權(quán)成功后回調(diào)網(wǎng)址，跟Homepage URL參數(shù)保持一致就好
這些參數(shù)在注冊(cè)成功后是可以修改。

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

注冊(cè)成功后會(huì)自動(dòng)跳轉(zhuǎn)到這個(gè)OAuth應(yīng)用的頁面，或者在Developer settings選擇OAuth Apps后就能看見你創(chuàng)建的OAuth應(yīng)用名字，點(diǎn)擊它進(jìn)入這個(gè)OAuth應(yīng)用的頁面：

在新創(chuàng)建的OAuth應(yīng)用里面的Client ID和Client Secret就是我們需要的參數(shù)。

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

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

主要的參數(shù)：

clientID
類型：字符串，必填，申請(qǐng)的OAuth App的Client ID

clientSecret
類型：字符串，必填，申請(qǐng)的OAuth App的Client Secret

repo
類型：字符串，必填，github上的倉庫名字，用于存放Gitalk評(píng)論

owner
類型：字符串，必填，github倉庫的所有者的名字

admin
類型：數(shù)組(元素是字符串)，必填，github倉庫的所有者和合作者 (對(duì)這個(gè) repository 有寫權(quán)限的用戶)

id
類型：字符串，選填，頁面的唯一標(biāo)識(shí)。長(zhǎng)度必須小于50。此參數(shù)用于評(píng)論和頁面對(duì)應(yīng)的標(biāo)識(shí)，如果想讓兩個(gè)頁面用一個(gè)評(píng)論，可設(shè)置兩個(gè)頁面的id一樣。默認(rèn)值：location.href(頁面URL)

title
類型：字符串，選填，GitHub issue 的標(biāo)題，默認(rèn)值：document.title(HTML中title標(biāo)簽中的值)

注意：

雖然id和title參數(shù)是不是必填的選項(xiàng)，但是這個(gè)兩個(gè)參數(shù)很重要建議填上：
1、id參數(shù)用于評(píng)論記錄和頁面對(duì)應(yīng)的唯一標(biāo)記，有的時(shí)候發(fā)現(xiàn)好幾個(gè)頁面評(píng)論是一樣的，就是由于配置id參數(shù)的時(shí)候，這幾個(gè)頁面的id是一樣導(dǎo)致。由于id參數(shù)默認(rèn)值是location.href頁面URL，而有的時(shí)候URL中帶著頁面標(biāo)題的鏈接，導(dǎo)致URL長(zhǎng)度超過了50個(gè)字符長(zhǎng)度，會(huì)導(dǎo)致創(chuàng)建評(píng)論issues失敗(長(zhǎng)度超過50個(gè)會(huì)創(chuàng)建失敗)，這點(diǎn)要注意。
2、title用于在github倉庫issues的標(biāo)題，如果你想管理評(píng)論可以設(shè)置一下這個(gè)參數(shù)，來區(qū)分該評(píng)論是來自于那個(gè)文章。

其他參數(shù)：

number: 類型：數(shù)字，選填，頁面的 issue ID 標(biāo)識(shí)，若未定義number屬性則會(huì)使用id進(jìn)行定位。默認(rèn)值：-1
labels：類型：數(shù)組，選填，GitHub issue 的標(biāo)簽，默認(rèn)值：["Gitalk"]
body：類型：字符串，選填， GitHub issue 的內(nèi)容，默認(rèn)值：URL + HTML中meta標(biāo)簽中description的值
language：類型：字符串，選填，設(shè)置語言，支持 [en, zh-CN, zh-TW]。默認(rèn)值：navigator.language 或者 navigator.userLanguage
perPage：類型：數(shù)字，選填，每次加載的數(shù)據(jù)大小，最多 100。默認(rèn)值：10
distractionFreeMode：類型：布爾值，選填，類似Facebook評(píng)論框的全屏遮罩效果。默認(rèn)值：false 
pagerDirection：類型：字符串，選填，評(píng)論排序方式，last為按評(píng)論創(chuàng)建時(shí)間倒敘，first為按創(chuàng)建時(shí)間正序。默認(rèn)值：last
createIssueManually：類型：布爾值，選填，如果當(dāng)前頁面沒有相應(yīng)的 isssue 且登錄的用戶屬于 admin，則會(huì)自動(dòng)創(chuàng)建 issue。如果設(shè)置為 true，則顯示一個(gè)初始化頁面，創(chuàng)建 issue 需要點(diǎn)擊 init 按鈕。 默認(rèn)值：false
proxy：類型：字符串，選填，GitHub oauth 請(qǐng)求到反向代理，為了支持 CORS。默認(rèn)值:https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token
flipMoveOptions：類型：對(duì)象，選填，評(píng)論列表的動(dòng)畫。參考
enableHotKey：類型：布爾值，選填，啟用快捷鍵(cmd/ctrl + enter)提交評(píng)論。默認(rèn)值：true

docsify是一個(gè)神奇的文檔網(wǎng)站生成工具。詳情介紹請(qǐng)看官網(wǎng)：https://docsify.js.org/#/zh-cn/
使用docsify教程請(qǐng)查看：https://segmentfault.com/a/11...

docsify支持Gitalk評(píng)論插件，需要引入一個(gè)JavaScript腳本文件：
https://unpkg.com/docsify@4.8.6/lib/plugins/gitalk.min.js

一個(gè)實(shí)際使用例子：

說明：

1、由于docsify的鏈接URL使用的是hash的方式，導(dǎo)致切換頁面的時(shí)候不會(huì)刷新頁面，導(dǎo)致整個(gè)網(wǎng)站的Gitalk評(píng)論使用的是一個(gè)評(píng)論，因此做了監(jiān)聽hash事件，來刷新頁面，這樣就能每次切換頁面刷新，然后加載對(duì)應(yīng)的評(píng)論。
2、關(guān)于Gitalk參數(shù)id的值，由于點(diǎn)擊二級(jí)標(biāo)題后，二級(jí)標(biāo)題會(huì)以參數(shù)的形式出現(xiàn)在url上，導(dǎo)致長(zhǎng)度有事超過了50，所以過濾掉URL中的參數(shù)，此外還能解決評(píng)論定位不到問題(二級(jí)標(biāo)題會(huì)在URL上)。

關(guān)于VuePress，請(qǐng)參考：https://vuepress.vuejs.org/zh/

我們需要?jiǎng)?chuàng)建.vuepress/enhanceApp.js文件，內(nèi)容如下：

function integrateGitalk (router) {
    const linkGitalk = document.createElement("link");
    linkGitalk.;
    linkGitalk.rel = "stylesheet";
    document.body.appendChild(linkGitalk);
    const scriptGitalk = document.createElement("script");
    scriptGitalk.src = "https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js";
    document.body.appendChild(scriptGitalk);
    var path = "";

    router.afterEach((to) => {
        if (scriptGitalk.onload) {
            setTimeout(loadGitalk, 5, to)
        } else {
            scriptGitalk.onload = () => {
                loadGitalk(to.fullPath);
            }
        }
    });

    function loadGitalk (to) {
        if (to.path !== path) {
            path = to.path;
            let commentsContainer = document.getElementById("gitalk-container");
            const $page = document.querySelector(".page");
            if (commentsContainer && $page) {
                $page.removeChild(commentsContainer)
            }
            commentsContainer = document.createElement("div");
            commentsContainer.id = "gitalk-container";
            commentsContainer.classList.add("content");
            if ($page) {
                $page.appendChild(commentsContainer);
                if (typeof Gitalk !== "undefined" && Gitalk instanceof Function) {
                    renderGitalk();
                }
            }
        }
    }
    function renderGitalk () {
        const gitalk = new Gitalk({
            clientID: "2eb19afceda708b27e64",
            clientSecret: "36aedb5a30321626a8631689fee5fafd5929f612",
            repo: "gitalk-comment",
            owner: "yulilong",
            admin: ["yulilong"],
            title: location.pathname,
            id: location.pathname,      // Ensure uniqueness and length less than 50
            language: "zh-CN",
        });
        gitalk.render("gitalk-container");
    }
    window.loadGitalk = loadGitalk;
}

export default ({ Vue, options, router }) => {
    try {
        document && integrateGitalk(router)
    } catch (e) {
        console.error(e.message)
    }
}

保存文件后，重啟vuePress服務(wù)即可。
效果如下圖：

Gitalk 官網(wǎng)
Gitalk中文文檔