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

為什麼我的部落格之前沒有留言板？

前幾天有新朋友寄信問我：你的部落格沒有留言板，想請問你對部落格是否需要給讀者留言板的想法。

其實原因很單純：我的部落格剛搬完 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

與你的連結，是我寫部落格的動力

喜歡這篇文章的話，歡迎在下方留言或是寄 Email 回饋給我！

也可以去誰來我家簽個到，或是去看看其他文章 ~~