[JavaScript] 給靜態博客添加 Gitalk 評論插件

做爲一個靜態博客， Jekyll 並無自帶評論系統，可是有了評論模塊可讓你們更方便地交流意見，灌灌水之類的，因此我也一直想嘗試爲本身的博客添加評論插件。

一開始查找評論插件時，發現你們主要在用的是 Disqus ，可是 Disqus 如今在國內沒法使用了，不少狀況下它都沒法正常加載。而原本能夠用的多說在 2017 年中止了服務。後來我發現了 Gitment ，可是它也好久沒有維護了。最終我找到了一個叫 Gitalk 的評論插件。它的原理和 Gitment 相似，它經過在 GitHub 倉庫中的 issues 中添加回答來實現評論的功能。這是它的倉庫連接：Gitalk on Github

1. 在前端頁面中引入 Gitalk

在使用以前，先要在頁面的適當位置插入一個 Gitalk 的 div 容器：

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

在頁面文件最前面能夠經過連接添加 Gitalk 的 css 文件與 js 支持：

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

若是出現 gitalk 的 css 文件將原來的 markdown 樣式覆蓋的狀況，能夠將 css 文件下載到本地，並刪去 markdown 的樣式，以後引用本地的 css 文件就能夠解決問題。

2. 添加 Javascrpt 塊

咱們能夠經過引用 js 文件或者直接添加 script 標籤來設置 Gitalk ，這裏我使用直接添加 script 標籤的方式：

<script>
const 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,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')
</script>

咱們首先須要填寫的是 repo ， owner ， admin 這三個參數：

• repo 倉庫名稱

• owner 倉庫全部者

• admin 能夠建立 Github issues 的管理者

可是其中， id 這一個也須要咱們修改，由於 id 的默認值爲路徑，而它不能超過50個字符，否則會出現 Error: Validation Failed. 這個錯誤。在 Jekyll 的框架下，咱們能夠將這個值改成 '{{ page.title }}' ，這樣通常來講就不會超過長度了。

Gitalk 對象還有許多參數，其中較爲經常使用的還有如下兩個：

• createIssueManually 若是爲 true ，則在不存在當前頁面的 issue 的狀況下能夠由管理員手動建立，推薦打開，默認爲 false

• title 設置 issue 的標題，若是使用 Jekyll 推薦改成 '{{ page.title }}' ，否則默認爲網頁標題（可能會很長）

其餘的參數能夠參考 Gitalk 的文檔。

3. 建立一個 GitHub Application

在 Javascript 代碼中，還有 clientID 和 clientSecret 這兩個屬性沒有填寫。它們就和 GitHub Application 有關了。

首先咱們須要註冊一個GitHub Application：

Register a new OAuth application

其中的 Application name 能夠隨便填， Homepage URL 和 Authorization callback URL 須要填寫你博客網頁的網址。

生成一個 GitHub Application 以後，網頁會顯示一個 clientID 和一個 clientSecret ，將其複製到代碼中。其中這兩個參數只會顯示一次，因此必定記得填寫完以後要保存代碼。

4. 鏈接你的 GitHub 帳號並新建 issue

以上咱們就完成了代碼內容，如今咱們生成靜態頁面，打開一篇文章，應該就能夠在相應的區域看到 Gitalk 的插件了。第一次使用時，咱們須要「初始化issue」，這個時候你須要用你的 Github 帳號登錄，而後點擊一下初始化按鈕（不要點不少次，否則會新建多個issue），等進度完成後，刷新頁面，你應該就可以看到評論模塊了。

目前來講咱們只能經過手動添加來給每篇文章建立一個評論，以後能夠寫一個腳原本完成自動初始化，可是稍有些複雜，因此若是想要了解能夠自行搜索。

結語與其餘文檔

以上就完成了 Gitalk 插件的安裝了，這樣也能給博客增長些活躍的氣氛。不過但願以後可以出現更加方便的評論插件。（ Gitalk 須要登錄 GitHub 才能評論）若是你們有更好的插件也能夠留言分享。