介紹 #
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，先臨時架設本地開發伺服器，進入文章就可以看到留言區，並進行近一步的設定。
Twikoo 設定 #
進入文章頁面後，會在留言區右下方看到齒輪圖示，初次點擊會要求你設定一串密碼作為往後的管理員密碼，以進入後台。
設定後台包括四個大項：
- Comment：查詢、篩選留言。
- Configuration：細項設定。
- Import：匯入其它後端的留言資料庫。
- Export：匯出當前後端中的留言資料庫。
其中，點擊 Configuration 可以看到 General、Plugin、Privacy、Spam、Instant notification、Email notification 及 Email notification test 等細項可設定，有興趣可以摸索看看，比較重要的有像是「跨網域請求」、「阻擋垃圾訊息」、「САРТСНА」及「郵件通知」等，每個設定欄位都有對應的說明可參考。
透過郵件回覆
