使用 Statiq 在Github Page 部屬靜態部落格網站 4 添加評論系統 Giscus 使用 Statiq 在Github Page 部屬靜態部落格網站、添加評論系統、Giscus

Published on Friday, February 24, 2023

Giscus

Giscus 是一套利用 Github Discussions 提供的 API 所製作出來的 JS Library 可以快速的幫你的部落格添加一個留言板,另外一套 Disqus 也是經長被使用的留言板系統

我們靜態部落格雖然有許多好處但最大的問題就是沒有後端系統,一個完整的部落格系統通常使用到資料庫來保存文章與以及文章的留言 但靜態部落格就是一堆html,如果還要在架一個資料庫管理跟架設成本會隨之上升,那就喪失了靜態生成當初設計的美意了

所以就有 Giscus 和 Disqus 這類型的服務出現了,主打只要在網頁上添加一段 JS 與稍微修改樣式,就可以直接在我們的靜態部落格接入一個外部的留言板 就可以避免還要架設資料庫的問題了,我選擇使用 Giscus 作為我的留言板系統,因為相對安全簡單

首先第一步驟先開啟 Giscus App
先看看工作原理 Giscus 會使用 Github Discussions,訪客需要登入 Github 並且授權 giscus app 代表訪客發文
訪客也可以直接在 GitHub Discussion 裡面留言,這樣我們就不需要其他第三方的留言板系統了,可以從頭到尾依賴 github 的功能,完成一個部落格該具備的基礎功能

那什麼是 Github Discussions 呢?
簡單來說就是一個簡易的討論板,每一個 repo 都可以建立一個自己的討論板
可以在 Github Discussions 發起一個文章,讓大家這篇討論底下發表自己的看法
跟 Github Issues 類似,但是 Issues 的發起主要是針對一個明確的問題,所以像是大方向的討論發在 Issues 就有點不太合適了
所以 Github Discussions 就很適合存放這方面的討論

要使用Giscus 之前需要滿足三個條件

  1. Repo 需要是公開的
  2. Github 需要安裝 Giscus App
  3. Repo 需要開啟 Discussions 功能

安裝 Giscus App 很簡單,只要開啟網站按照步驟安裝即可 Giscus App StatiqGiscus-Install-giscus.png

StatiqGiscus-giscus-auth.png

StatiqGiscus-Github-Applications.png

接下來選擇要使用 Giscus 的 Repo ,並選擇 Settings 頁簽往下看到 Features 之中有一個 Discussions 選擇開啟 StatiqGiscus-Repo-Settings.png

StatiqGiscus-Features-Discussions.png

都開啟完成後我們回到 Giscus App往下有個輸入框可以在這邊輸入我們 Repo,網頁會去檢查我們的 Repo 有沒有符合需求
StatiqGiscus-GiscusApp-Repo.png

下方可以按照自己的需求做勾選
StatiqGiscus-GiscusApp-Setting1.png

StatiqGiscus-GiscusApp-Setting2.png

都完成後下方有一段 <script> 標籤只要將這一段 <script> 標籤加入到我們的頁面,留言欄位就會出現了

在 Statiq 的 Clean Bolg Theme當中,已經有將這段 <script> 加入到主題當中了,我們只需要開啟即可

接下來回到專案的 theme 資料夾,並開啟 settings.yml,並新增以下設定

CommentEngine: giscus
GiscusRepoName: ""
GiscusRepoId: ""
GiscusCategoryId: ""

以上的空值需要帶入<script> 標籤的三個設定值, data-repodata-repo-iddata-category

都設定完成後 Statiq 就會幫每個頁面添加一個新的留言區了

如果有人留言 Giscus Bot 會先查看這個頁面的路徑,然後透過 API 去 Github Discussions 檢查有沒有使用這個路徑作為標題的討論板 有的話就在此討論板新增你的留言,如果不存在的話 Giscus Bot 則透過 API 新增一個討論板
StatiqGiscus-Post-Test.png

StatiqGiscus-New-Discussions.png


Summary

至此我們已經成功新增了留言板到我們的文章上,之後每一篇 Post 最底下會出現留言板,之後訪客只要登入 Github 帳號就可以留言了
留言會保存到同一個Repo之中,不需要在依賴其他第三方的服務,之後就可以很方便的在 Github 上管理所有訪客的留言了