用 Docker 部署 Twikoo 留言區供 Hugo 網站使用

Hugo Blowfish 主題客製化 - 本文屬於一個選集。

§ 6: 本文

介紹
#

Twikoo 是一款免費、開源、自由且可自架的網站評論系統，也就是留言區，用戶需要自行整合前後端。

後端能使用下列幾種方式部署，其中也包含幾個常見的函式即服務 (FaaS)。

騰訊雲
Vercel
Railway
Zeabur
Hugging Face
AWS Lambda
Cloudflare Workers
Node.js
Docker。

前端則支援網站架設工具，如 Hexo 、Hugo 和 VitePress 中的幾個常用主題，也可透過 CDN 導入。

官方 GitHub 頁面列出許多特色可點擊查看。

部署方式
#

我自己是在自架居家伺服器上透過 Docker 部署後端，並在 Hugo 中導入 CDN，再用 Cursor vibecode 了一下留言區整體外觀，因為我使用的主題 Blowfish 並沒有現成的模板。

下面依序說明我部署 Twikoo 的步驟。

Docker 容器與反向代理
#

我直接參考官方文檔的教學，撰寫 Docker compose 部署。

反向代理的部分我使用 Cloudflare Tunnel 取代傳統的反向代理服務，如果你的網域也是從 Cloudflare 上購買，可參考這種方式，網路上也有許多完整的教學。

完成後，輸入網址查看，會看到類似下方的資訊。

code: 100
message: "Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.htmL 完成前端的配置"
version: "1.7.1"

編輯網站配置文件 config.toml
#

找到/config/_default路徑中的網站配置文件/params.toml，並在其中新增：

[article]
  showComments = true

你也可以在文章的 front matter 中添加showComments，設定為true或false，個別調整每篇文章是否顯示留言區。

接著還要添加：

[twikoo]
  version = "Twikoo 版本號碼（可輸入後端網址進入頁面查看，例如本站目前使用的 1.7.1）"
  server = "Twikoo 伺服器網址（例如：https://xxx.mysite.com/）"

這邊的設定會在下面提到的留言區模板comments.html中作為變數被調用。

留言區模板 comments.html
#

在/layouts/partials路徑下創建comments.html，並貼上下面的程式碼。

我主要在 class 中添加設定留言區背景顏色、透明度、深淺色主題下的配色等等，並參考官方教學，稍微修改了一下（上一步設定的變數），透過 CDN 導入 Twikoo 的前端腳本。

<section
  class="comments-block mt-6 p-5 sm:p-6 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-neutral-100/50 dark:bg-neutral-800/50 shadow-sm"
  aria-label="留言區"
>
  <div class="flex items-center gap-2 mb-4">
    <span class="text-xl" aria-hidden="true">💬</span>
    <h2 class="m-0 text-lg font-semibold text-neutral-800 dark:text-neutral-200">
      留言區
    </h2>
  </div>
  <div id="tcomment" class="comments-block__inner"></div>
  <script src="https://cdn.jsdelivr.net/npm/twikoo@{{ .Site.Params.twikoo.version }}/dist/twikoo.min.js"></script>
  <script>
    twikoo.init({
      envId: '{{ .Site.Params.twikoo.server }}',
      el: '#tcomment',
      path: window.location.pathname
    })
  </script>
</section>

完成後在終端執行命令：hugo，重新生成網站並部署到伺服器，或用hugo server，先臨時架設本地開發伺服器，進入文章就可以看到留言區，並進行近一步的設定。

多語言網站 i18n 設定
#

如果你是多語言網站，可以把上面程式碼中提到留言區的兩個部分改成{{ i18n "comments.title" }}

並在 i18n 中對應的語言設定檔中加入翻譯，舉繁體中文zh-TW.yaml為例：

comments:
  title: "留言區"

Twikoo 設定
#

進入文章頁面後，會在留言區右下方看到齒輪圖示，初次點擊會要求你設定一串密碼作為往後的管理員密碼，以進入後台。

設定後台包括四個大項：

Comment：查詢、篩選留言。
Configuration：細項設定。
Import：匯入其它後端的留言資料庫。
Export：匯出當前後端中的留言資料庫。

其中，點擊 Configuration 可以看到 General、Plugin、Privacy、Spam、Instant notification、Email notification 及 Email notification test 等細項可設定，有興趣可以摸索看看，比較重要的有像是「跨網域請求」、「阻擋垃圾訊息」、「САРТСНА」及「郵件通知」等，每個設定欄位都有對應的說明可參考。