跳到主要內容
返回文章列表

留言系統從 Disqus 換成 Giscus

發布: 4 分鐘

這站用靜態站產生器很久了,留言卻一直外包給 Disqus。方便、舊文也有歷史討論。直到暗色主題變成常態,問題才變得刺眼:一切換明暗,留言區就開始「看得到框、讀不到字」。

山姆鍋本來想修完就算了。修了一輪,發現根因比想像中醜,乾脆換掉。

目錄

展開目錄

症狀:暗色頁面,淺色留言(或反過來)

Disqus 管理後台可以把 Color scheme 設成 Auto。官方說法大致是:看嵌入頁繼承到的文字色,偏深就用淺色主題,偏淺就用深色主題。聽起來很合理。

實務上卻常變成:

  • 站台已是暗色,留言本文卻仍是深灰字——幾乎貼在深色背景上。
  • 使用者名稱因為繼承站台連結色,反而還看得見;本文反而看不見,對比更怪。
  • 在頁面上按主題切換,站台換了,Disqus iframe 常常不跟。

也就是說:Auto 只在「載入當下」賭一把,不會乖乖跟著你的主題按鈕跑。

試過什麼,為什麼還是煩

山姆鍋這邊的站台主題是自己用 data-theme 切的,不是只靠系統的 prefers-color-scheme。這對很多第三方嵌入都不友善。

試過的方向包括:

  1. 載入前先寫死 #disqus_thread 的文字色,逼 Auto 判對。
  2. 主題變更時呼叫 DISQUS.reset({ reload: true }),甚至帶上 colorScheme
  3. MutationObserverdata-theme,避免只靠自訂事件。
  4. toggle-theme.js 加 query string 做 cache bust——因為 Cloudflare/瀏覽器把舊腳本快了半小時,新 HTML 已經會聽事件,舊 JS 卻根本沒發事件。

有些組合在本機看起來「有好一點」,上正式站又被快取或時序搞歪。最糟的感覺是:你在修「留言系統的主題」,實際上在跟 CDN 快取、iframe 不透明、第三方只初始化一次的設計 三重疊。

對個人部落格來說,這種維護成本不成比例。留言本來就不該比正文還難養。

為什麼換成 Giscus

最後選的是 Giscus:留言存在 GitHub Discussions,前端只是嵌入。對山姆鍋這種技術向、本來就在 GitHub 混的站,讀者門檻可以接受。

選它的理由很土,也很實際:

  • 主題可主動設定:用 postMessage 告訴 iframe 現在是 light/dark,不必猜繼承色。
  • 沒有廣告追蹤那一套:個人站能少一個第三方追蹤腳本就少一個。
  • 資料在自己的公開儲存庫:審核、備份、搜尋都還在 GitHub 生態裡;本站原始碼儲存庫是 private,所以另開了公開的 myblog-comments 專門放討論。
  • 跟 Astro 合得來:純前端腳本,搭配 View Transitions 時把留言區重載一次就行。

代價也很清楚,山姆鍋是故意吞下去的:

  • 硬切:舊 Disqus 討論不會自動搬過來。幾年前那幾則 K8S/Vagrant 相關留言,就留在 Disqus 那邊當考古了。
  • 要 GitHub 帳號才能留言:訪客隨便留一句的門檻變高;換來的是比較乾淨的技術討論場。

若你的讀者多半不是開發者,或舊留言對你很重要,這筆帳可能算不過去。山姆鍋這邊是技術文為主、舊討論也不多,所以選硬切。

換成之後,站上多了什麼取捨

實作上沒有魔法:文章頁嵌 Giscus,主題切換時同步 theme,換頁(Client Router)時再載一次。設定集中在站台設定裡,儲存庫與 category ID 寫死,之後要改只動一處。

換成之後,山姆鍋比較在意的不是「留言系統多潮」,而是:

  • 亮暗色模式切換不要再傷眼睛。
  • 少維護一個行為不透明的第三方 iframe。
  • 留言與程式人的日常工具同一套帳號。

小結

Disqus 不是不能用,而是跟自製明暗主題疊在一起時,Auto 不夠用、重載又不穩、快取還會讓修補失效。山姆鍋試過把它救回來,最後覺得不如換成設計上就允許主動設主題的方案。

若你也在靜態站上養留言區,又堅持要有暗色模式,建議先確認第三方能不能在不重載整頁的前提下改主題;不能的話,早點評估 Giscus/類似方案,可能比繼續跟 Disqus 的 iframe 拔河划算。

Sampot (山姆鍋)
Sampot (山姆鍋)

獨立軟體開發者,專長分散式系統、Web 應用與雲端服務架構。目前一人開發NT² Vault。工作之餘關注開源軟體的發展與應用,偶爾在這裡碎念與分享。