在前面的系列文章中，我們成功的利用Github Pages搭建了基于hugo生成的博客站，并且可以通過Github Action實現CI/CD。
隨著博文的不斷更新，勢必有一天會出現讀者希望通過評論直接與作者溝通的需求，我們寫博文的目的之一就是希望與更大范圍的人建立聯結。因此，評論系統成為了剛需。
選型giscus
希望以最小代價上手，我選擇評論系統的依據如下：
- 越輕越好，盡量不需要自建服務，如果可以和
Github Pages整合最好。 - 配置越簡單越好。
- 當前使用的主題很容易支持。
我當前選擇的Hugo主題是Clean White Theme for Hugo, 目前支持三種評論系統，分別是Giscus 、Disqus 和Twikoo 。
Giscus
Giscus 是由 GitHub Discussions 驅動的評論系統，與GitHub Pages有非常好的天然聯結。根據官網，Giscus的特性有：
- 開源。
- 無跟蹤，無廣告，永久免費。
- 無需數據庫。全部數據均儲存在
GitHub Discussions中。 - 支持自定義主題！
- 支持多種語言。
- 高度可配置。
- 自動從
GitHub拉取新評論與編輯。 - 可自建服務！
Clean White Theme for Hugo 主題配置Giscus只需要在config.toml中加上一段配置：
[params.giscus]
data_repo="your GitHub repo"
data_repo_id="your repo id"
data_category="your category"
data_category_id="your category id"
data_mapping="pathname"
data_reactions_enabled="1"
data_emit_metadata="0"
data_theme="light"
data_lang="en"
crossorigin="anonymous"
Disqus
Disqus 目前最主流的第三方社會化評論系統，主要為網站主提供評論托管服務。簡單易用，功能豐富。但官方對于免費版會自帶很多廣告推廣，不清爽。
Twikoo
Twikoo 是基于騰訊云服務的評論系統，官方自稱為一個簡潔、安全、免費的靜態網站評論系統。
對于國內網站來說，確實可以提供很豐富的功能，包括微信和QQ的即時提醒，以及評論檢測和審核功能。額，所以呢，還是棄用吧。
最終，我選擇了主題所支持的Giscus 作為自己的評論系統。
原理
Giscus 加載時，會使用 GitHub Discussions 搜索 API 根據選定的映射方式（如 URL、pathname、<title> 等）來查找與當前頁面關聯的 discussion。如果找不到匹配的 discussion，giscus bot 就會在第一次有人留下評論或回應時自動創建一個 discussion。
要評論，訪客必須按 GitHub OAuth 流程授權 giscus app 代表他發帖。或者訪客也可以直接在 GitHub Discussion 里評論。你可以在 GitHub 上管理評論。
配置過程
Giscus 官網提供了配置參數生成的功能。你可以通過各種選擇獲得配置參數，并且按提示安裝giscus app以及開啟Discussions功能。
這里需要注意的地方是，倉庫要選擇Github Pages項目，這樣開啟的Discussions功能才能正常使用。
對于Clean White Theme for Hugo 主題，最重要的4個參數，分別是：data-repo，data-repo-id，data-category，data-category-id。我生成的配置參數如下所示：
<script src="https://giscus.app/client.js"
data-repo="DeeWooo/DeeWooo.github.io"
data-repo-id="**************************"
data-category="Announcements"
data-category-id="*********************"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
crossorigin="anonymous"
async>
</script>
最終，我在主題示例的配置參數中只修改了data-repo，data-repo-id，data-category，data-category-id4個參數的值，在config.toml文件最后，加上了下面一段配置：
[params.giscus]
data_repo="DeeWooo/DeeWooo.github.io"
data-repo-id="**************************"
data_category="Announcements"
data_category_id="*********************"
data_mapping="pathname"
data_reactions_enabled="1"
data_emit_metadata="0"
data_theme="light"
data_lang="en"
crossorigin="anonymous"
這樣就完成了Giscus的配置。
效果
在每個博文頁面下，都出現了評論框
參考文章
- giscus官網，https://giscus.app/zh-CN
- Clean White Theme for Hugo，https://github.com/zhaohuabing/hugo-theme-cleanwhite
>
本作品由 IvyWooo 采用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 進行許可，轉載請注明出處。 本文鏈接
