[Day 20] 如何在 Github Page 上建立留言回覆系統 - 嘗試 30 日寫文充版挑戰

前言 - Prologue

嘗試寫 30 天文充實版面 (跳過假日 ლ(́◕◞౪◟◕‵ლ) ) 更新文章的 Day 20

在當今社交化的網路環境下，互動和社交已經成為網站發展的重要組成部分。在建立自己的網站時，除了提供有價值的內容和良好的使用體驗，還需要考慮如何增強使用者參與感。因此，為網站添加評論系統和留言板已成為許多站長的必選項。GitHub Pages 是一種免費且可靠的網站托管服務，讓使用者可以在上面建立自己的網站並分享代碼、文章、專案等。

若想為 GitHub Page 增加留言回覆系統，可以使用名為 utteranc 的工具。它能輕鬆地在 GitHub Page 上添加評論系統，讓網站更互動和豐富。透過 utteranc 工具，可以快速設置評論框位置、主題、標籤等，也方便管理評論資料和回覆信息。下面將介紹如何使用 utteranc 工具在 GitHub Page 上建立留言回覆系統。

正文 - Main text

要在 Github Page 上建立部落格留言回覆系統，可以依照以下步驟使用 utterances 工具：

1. 於 Github 安裝 utterances 工具

進入 GitHub Apps - utterances，點擊 Install 按鈕。

2. 選擇要授權使用的 Repository

選擇部落格所在的 Repository，一般都是直接放在 [用戶名].Github.io 底下居多 (下圖以我為例(?))，確認後再點擊 Install 按鈕。

3. 跳轉到 utterances 的設置頁面

在底下可以選擇各種風格與設置等等，選擇好後，先去 "Enable Utterances" 複製 script。然後在自己的 Github Pages 網頁中，找到想要添加的位置，並在該位置複製貼上就 OK 拉。

如果是 Vue 的話將 <script> 替換為 <component :is="'script'"。

參考資料 - Reference

[1] Comment feature in Jekyll blog - Let's see how to use utterances service to add a comment feature to Jekyll project.

https://dev-yakuza.posstree.com/en/jekyll/utterances/

[2] utterances

https://utteranc.es/

後記 - Epilogue

因為今天突發奇想將自己一直很想做的評論區功能補上，於是去查了如何在 Github page 上新增留言區塊，最後發現了 utterances 這款優秀的 Github App，真的有夠方便！！