留言板上線啦！（以及我怎麼挑選我的留言板系統）
為什麼我的部落格之前沒有留言板？
前幾天有新朋友寄信問我：你的部落格沒有留言板，想請問你對部落格是否需要給讀者留言板的想法。
其實原因很單純：我的部落格剛搬完 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 網站的留言板
就這樣啦~ 快到底下測試一下新的留言板吧！
📝 发布时间：2025-07-31 | 🕷️ 采集时间：2025-07-31 06:01
苏公网安备32100302011680号