前言
我的部落格使用 Twikoo 匿名留言板 https://twikoo.js.org。
配置 Twikoo 要做到以下三件事：
-
設定資料庫：儲存留言紀錄，使用 MongoDB 串接 Twikoo（免費方案）
-
部屬服務：透過 Vercel 部屬（免費方案）
-
前端顯示：Hugo 主題能支援 Twikoo 留言服務（PaperMod 可以）
設定資料庫
註冊 MongoDB 服務 https://www.mongodb.com。
選擇 M0 方案，512MB 以我的部落格人數用到下輩子都沒問題～
位置選擇最近的 Hong Kong (ap-east1)。
下一步會看到資料庫 IP 位置，並建立 Database 帳號和密碼。
設定連線權限
前往「Network Access」修改設定「0.0.0.0/0」所有 IP 可以訪問資料庫。
複製 MONGODB_URI
前往「Clusters」點「Connect」設定 MongoDB Driver。
複製下面的連線字串 MONGODB_URI，後面部屬到 Vercel 會用到。
mongodb+srv://<username>:<db_password>@hugo.t3il4.mongodb.net/?retryWrites = true&w = majority&appName = Hugo
把 <username> 和 <db_password> 換成 Database 的帳號密碼。
# 範例
mongodb+srv://username:db_password@hugo.t3il4.mongodb.net/?retryWrites = true&w = majority&appName = Hugo
刪除資料庫預設資料
點垃圾桶圖示 Drop Database。
部屬服務
註冊 Vercel 服務 https://vercel.com。
連結 GitHub Repository。
前往 Twikoo 部屬文件 https://twikoo.js.org/backend.html。
點「Deploy」按鈕。
設定環境變量
前往「Settings」點「Environment Variables」，新增「Key」：MONGODB_URI、「Value」貼上 MongoDB 的 URI：mongodb+srv://<username>:<db_password>@hugo.t3il4.mongodb.net/?retryWrites = true&w = majority&appName = Hugo。
設定瀏覽權限
設定「Vercel Authentication」關閉，所有人可以瀏覽。
設定位置
設定位置「Hong Kong (East) - hkg1」。
以上設定好重新「Redeploy」。
成功部屬。
前往網址也能正常瀏覽。
前端顯示
我使用的 Hugo 主題 PaperMod 支援 Twikoo，修改部落格根目錄的 config.yml。
version 請填 Twikoo 部屬的版本。版本要填正確會透過 CDN 導入。
params:
comments: true
twikoo:
version: 1.6.39
修改 layouts/_default/single.html，在 /footer 後面加入下面這段。
</footer>
{{- if (.Param "comments") }}
{{- partial "comments.html" . }}
{{- end }}
</article>
修改 layouts/partials/comments.html，加上下面這段。
其中 envId 值填 Vercel 部屬網址、region 值填 Vercel 地理位置，我是選香港，所以填 ap-east-1。
<!-- Twikoo -->
<div>
<div class="pagination__title">
<span class="pagination__title-h" style="font-size: 20px;"><br>留言板</span>
<hr />
</div>
<div id="tcomment"></div>
<script src="https://cdn.jsdelivr.net/npm/twikoo@{{ .Site.Params.twikoo.version }}/dist/twikoo.all.min.js"></script>
<script>
twikoo.init({
envId: "Vercel 部屬網址",
el: "#tcomment",
lang: 'zh-TW',
region: 'ap-east-1',
path: '',
});
</script>
</div>
設定成功文章下方有留言區，點右下角齒輪，設定管理介面暗號以及密碼。
一般讀者看不到管理介面，只有在名字欄位輸入暗號才能開啟管理介面。
如果要用作者名字留言，必須先登入過管理介面才能留言。
詳細參考 Twikoo 常見問題。
其他設置
Twikoo 頭像支援 CDN：我是使用 gravatar.com 顯示。
留言板文字修改：修改 comments.html，換成修改的 JS 檔案，{{ .Site.BaseURL }} 指向部落格根目錄下的 static 資料夾。
<!--<script src="https://cdn.jsdelivr.net/npm/twikoo@{{ .Site.Params.twikoo.version }}/dist/twikoo.all.min.js"></script> -->
<script src="{{ .Site.BaseURL }}ZH_TW_twikoo.all.min.js"></script>