前言

當讀者對你的部落格內容有問題，想發問交流時，勢必需要留言溝通的工具，此類工具通常稱為 Comments System (評論系統)，常見的有：Disqus、Facebook comments、GitHub issue、Livefyre 等。

Hugo 具有追加整合 Comments 服務的彈性，讓我們可以輕鬆地將此類工具，放在任何頁面中，本篇會介紹 Disqus 評論系統的整合方式。

Disqus

按照官網介紹，Hugo 已經幫你內建了一套評論系統：Disqus，以下是啟用的文字版說明，後面會在依照流程附上圖片給大家參考：

• 未有 Disqus 帳號，請先註冊
• 已有 Disqus 帳號，請按 GET STARTED
• 點擊 I want to install Disqus on my site. 頁面在此可快速前往
• 填入網站資訊：
  • 網站名稱 (Web Site Name)
  • 網站種類 (Category)
  • 按下 Create
• 進入 Disqus Install 環節：
  • 選擇整合平台：頁面跳到 Select Platform，但因為官方沒有 Hugo 的選項，請拉到最下面選 I don't see my platform listed, install manually with Universal Code
  • 配置整合程式碼：接著 Select Platform 之後，頁面跳到 Universal Code 頁面，在這一步要看使用者選用的佈景，有沒有整合好 Disqus 到你的 layout 中
    • 已有整合：可跳過 Universal Code 這部分
    • 尚未整合：
      • 若你不想換佈景，請參考 Partial Templates 的配置說明，自己動手整合
      • 若你想換佈景，筆者試過用 ananke 以及 tranquilpeak 兩個佈景，都有整合 Disqus
  • 此步驟以「已有整合」為例，在 Universal Code 頁面拉到最下面按 Configure
  • 配置你的 Disqus Configure
    • 網站名稱 Website Name
    • 網站網址 Website URL 請配置上線後的公開網址，子域名就是你的 disqusShortname
    • 網站種類 Category
    • 顯示語系 Language 評論系統介面要顯示的語系
  • 配置好後，按下 Complete Setup
  • 接著 Disqus 會問你要不要設置 Community，這邊先不用，拉到最下面按 Dismiss Setup
  • 完成

附圖說明

未有 Disqus 帳號，請先到官網註冊，請按 GET STARTED：

選擇你偏好的註冊方式，完成註冊，頁面會跳轉回首頁，請按 GET STARTED，選擇 I want to install Disqus on my site：

建立新站，填入網站資訊，按下 Create：

選擇整合平台，請拉到最下面選 I don't see my platform listed, install manually with Universal Code：

在 Universal Code 頁面拉到最下面按 Configure：

配置完整的網站資訊，

請注意，這邊的 Website URL 子域名會作為 hugo 配置參數 disqusShortname 被使用到，網址結構為： https://yourDisqusShortName.website.com

完成配置後，拉到最下面，按下 Dismiss Setup 跳過配置 Community：

建站完成後，會跳到這個頁面：

Hugo 配置

假設你的 Website URL 為 https://littlebookboy.website.com，則 config.toml 配置就會是：

disqusShortname = "littlebookboy"

本地執行結果，以 tranquilpeak 為例：

線上執行結果 (丟到公開頁面後，評論系統介面才會被渲染成功)：

小結

若沒有其他特別需求，選擇使用 Disqus 是很快可以滿足我們需求的方式 (讓使用者可以留言)，另外若是想使用如 GitHub issue 這類工具，因為沒有官方文件說明如何整合，想必要使用者自行摸索，或是可以在 google 看有沒有人已經做好工具，導入其他 comment system 到你的 Hugo Site 中了。

參考連結

• Hugo Comments
• Hugo Partial Templates
• Disqus
• What's a shortname