[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/[email protected]/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected] /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 才能評論)如果大家有更好的外掛也可以留言分享。