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

Gitalk logo

作爲一個靜態博客, 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>

我們首先需要填寫的是 repoowneradmin 這三個參數:

  • 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 代碼中,還有 clientIDclientSecret 這兩個屬性沒有填寫。它們就和 GitHub Application 有關了。

首先我們需要註冊一個GitHub Application:

Register a new OAuth application

其中的 Application name 可以隨便填, Homepage URLAuthorization callback URL 需要填寫你博客網頁的網址。

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

4. 連接你的 GitHub 賬號並新建 issue

以上我們就完成了代碼內容,現在我們生成靜態頁面,打開一篇文章,應該就可以在相應的區域看到 Gitalk 的插件了。第一次使用時,我們需要“初始化issue”,這個時候你需要用你的 Github 賬號登陸,然後點擊一下初始化按鈕(不要點很多次,不然會新建多個issue),等進度完成後,刷新頁面,你應該就能夠看到評論模塊了。

Gitalk-sample

目前來說我們只能通過手動添加來給每篇文章創建一個評論,之後可以寫一個腳本來完成自動初始化,但是稍有些複雜,所以如果想要了解可以自行搜索。

結語與其他文檔

以上就完成了 Gitalk 插件的安裝了,這樣也能給博客增加些活躍的氣氛。不過希望之後能夠出現更加方便的評論插件。( Gitalk 需要登陸 GitHub 才能評論)如果大家有更好的插件也可以留言分享。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章