留言板上線啦！（以及我怎麼挑選我的留言板系統）

為什麼我的部落格之前沒有留言板？ 前幾天有新朋友寄信問我：你的部落格沒有留言板，想請問你對部落格是否需要給讀者留言板的想法。 其實原因很單純：我的部落格剛搬完 theme，還沒有時間研究要用哪套留言板系統，就暫時還沒有設定了。 對我來說，留言板的目的離不開增強站長以及讀者之間的交流，無論是提出問題、針對文章回饋、或是針對內容做補充。我認為這在建立社群連結是有正面幫助的。 什麼情況下不需要留言板？ 直接舉個例子，Wiwi 有一篇文章在解釋為什麼他不需要留言板。以他在經營好和弦頻道、以及好檸檬 Podcast 的時候，應該就受夠了各種酸民的留言，他應該是不想再花時間處理了。 以他的情況來說，他的部落格應該是有相當數量的忠實讀者， 他應該也無意把網站做大（畢竟人紅是非多），沒有理由再去積極開發更多與讀者的連結。 對他來說，他需要的是透過提高門檻來篩選高品質的交流，他選擇透過 Email，我認為是一個非常方便又頗有效果的方法。 我如何挑選部落格的留言板系統？ 這次 回來寫部落格的原因，主要就是想改變之前大部分在社群平台上分享近況的習慣。因此，比起過去可能有比較多的技術向內容，現在會比較偏重在我的生活紀錄或是心得分享。我的部落格目前流量還不大，還不太需要太擔心垃圾訊息或酸民的問題。而且我的部落格也非純技術向，甚至我也想分享給一些沒有技術背景的親友。 基於這幾個原因以及一些個人偏好，我理想的留言板系統應該要符合這幾個要求： 留言的門檻越低越好，最好是不需要任何登入 開源系統，而且需要可以自架 具備原生備份以及匯出功能，保留未來更換留言系統的後路 輕量，我不想因為留言板嚴重拖累我的部落格的載入時間 要符合這幾個條件的話，熱門的 Disqus、Giscus 都不太滿足我的需求。我在網路上逛了一圈，發現 Artalk 應該是最符合我需求的一個。雖然他們官方的 demo 是壞掉的，但我從他們的 showcase 的其中幾個站試過之後確定這個留言板系統非常符合我的需求。 開工——安裝 Artalk 安裝過程我就簡單帶過，如果有人需要詳細的過程的話我再另外分享。 後端 & 管理介面 後端和管理介面照著 Artalk 的部署說明 用 docker-compose 很簡單就能起起來。 如果有 Artalk 是在 Reverse Proxy 後面的話記得去設定一下 CORS 的 Origin，否則會被瀏覽器擋下來。 Artalk 的維運也是相對單純：所有設定檔都是寫到一個檔案（即使透過管理介面也是一樣）、DB 也是用 SQLite 寫成一個檔案，管理起來非常方便。 前端 我的部落格用的主題是 Stack，在 2025 年 7 月的時候還沒有直接內建支援 Artalk 的設定，需要自己覆寫 theme 的檔案才能做到。 好在 Hugo 如果主題是使用 gomodule 安裝的話，只需要在相對應的路徑新增檔案就可以覆蓋原始 theme 的檔案，達到修改或者擴充 theme 的目的。 主要就是建立相對應的資料夾 partials/comments/provider，在底下新增一個 artalk.html。然後參考 官方說明 把 html 的參數抽出來： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 {{- with .Site.Params.comments.artalk -}} <!-- CSS --> <link href="https://{{ .host }}/dist/Artalk.css" rel="stylesheet" /> <!-- JS --> <script src="https://{{ .host }}/dist/Artalk.js"></script> <!-- Artalk --> <div id="Comments"></div> <script> Artalk.init({ el: '#Comments', pageKey: '{{ .Permalink }}', pageTitle: '{{ .Title }}', server: 'https://{{ .host }}', site: '{{ .sitename }}', }) </script> {{- end -}} 然後記得到 config/params.toml 將系統設定到 artalk，再補上參數設定就可以了： 1 2 3 4 5 6 7 8 9 [comments] enabled = true # 開啟留言板 provider = "artalk" # 選擇 artalk #...略 [comments.artalk] host = "<設定成自架 artalk 的 domain>" sitename = "<你的網站名稱>" 啟用設定 如果一開始就直接進到管理介面的話會發現是登入畫面，這個時候要先執行指令建立 admin 帳號： 1 docker compose exec -it artalk artalk admin 然後會需要在 左上角選單 > 網站 > 右邊 + 號 建立網站，名稱需要和前端設定的一模一樣。 這時候留言板應該已經可以用了！剩下比較細節繁瑣的設定我就不在這邊贅述。 跟隨主題切換夜晚模式 2025/08/14 更新： 如果想跟著 Stack 的主題切換夜晚模式的話，要把 script 改成以下： （這個解法比較暴力，透過 observer 去 listen data-scheme 的值再去直接 call Artalk 的 API，理論上應該是可以透過 SCSS 去處理但我不會 ww） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <script> let isDarkMode = document.documentElement.getAttribute('data-scheme') === 'dark' const artalk = Artalk.init({ el: '#Comments', pageKey: '{{ .Permalink }}', pageTitle: '{{ .Title }}', server: 'https://{{ .host }}', site: '{{ .sitename }}', darkMode: isDarkMode, }) function switchDarkMode() { isDarkMode = !isDarkMode; artalk.setDarkMode(isDarkMode); }; const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes' && mutation.attributeName === 'data-scheme') { switchDarkMode(); } }); }); const config = { attributes: true, attributeFilter: ['data-scheme'] // Only watch for data-scheme changes }; // Start observing observer.observe(document.documentElement, config); </script> 然後後台設定的這個 Dark mode 要設定成 inherit 相關資源 & 討論 在東翻西翻的時候，我也找到了一些比較值得參考的資訊： r0k1s#i 的部落格 的做法蠻有趣的，他直接把 Fediverse 貼文回覆接到文章底下當留言板。 Ivon 在部落格同時用了 Disqus 和 Giscus 兩種系統，可以參考：為什麼我要用 Disqus 取代 Giscus 當作 Hugo 網站的留言板 就這樣啦~ 快到底下測試一下新的留言板吧！