你是否注意到,現在文章底下有留言板了!

留言板的必要性

就我的經驗而言,小型 blog 會有人留言的比例極低,所以本站上線半年以來,雖然考慮過幾回,但始終沒有留言功能。

這次決定加入它的主要動機有二:

  1. 某日看到〈Python Type Hints 教學:我犯過的 3 個菜鳥錯誤〉這篇文章,覺得寫得很不錯(該站內容都很值得一看),更讓我訝異的是,最底下竟然有良葛格親自留言指教!著實令人羨慕!
  2. 筆記、教學類文章有可能因為我的能力不足,出現一些內容、概念上的錯誤,如果讀者發現想要指正,卻還得自己寫 email,那肯定讓人興趣缺缺。反之有留言板的話,只要登入一下即可回覆,能顯著提高意願!

Hexo 如何新增留言板?

毫無疑問,「讀者留言」乃是部落格功能上的硬需求,所以無論 WordPress 或本站採用的 Hexo 等靜態框架,一定都整合了這類功能,通常是採用「外部服務」的形式。

以 Hexo 為例,只要去主題(Theme)設定看一下,一定能找到留言板的可選擇方案與相關設定。就我使用的主題——Even——也在設定檔_config.yml中提供了數種常見的留言系統整合方案,包括最常見的三項:

  1. Disqus
  2. Gitalk
  3. utterances

還有一些來自中國的方案就不提了,我基本上就是上述三選一囉!最後選擇了 utterances。

安裝與設定流程

如何為 Hexo 新增 utterances 留言板,可以直接參考這三篇文章(擇一已足):

雖然每個 Hexo 用戶採用的主題不盡相同,但畢竟是框架,增加留言板的方式大同小異,差別在於主題是否已經幫你整合,方便你直接設定,在此就不多贅述。

我使用的 Even 主題有整合,所以大部分的設定只需在_config.yml進行「填空」即可,內容大致如下:

1
2
3
4
5
6
utterances:
enable: true
repo: kyomind/blog-reply # Repository
issueTerm: title # Blog post ↔️ issue mapping: pathname | url | title | og:title
theme: github-light # Theme: github-light | github-dark | github-dark-orange | icy-dark | dark-blue | photon-dark
label: utterances # Issue label

我的方案選擇思路

稍稍講一下選擇上的思路:

  • Disqus:登入選擇多,這是一大優點,不過版面也相對雜亂,尤其是「留言的留言」情況下,一層又一層的縮排實在看得很辛苦。它也是外掛留言服務最常見的方案。
  • Gitalk or utterances:兩者都是基於把你的文章與 GitHub Issues 系統綁定,來新增、備份留言的機制。同屬開源,星星數也不相上下,可基於自己對於版面與功能的喜好來選擇。但正因為是以 GitHub Issues 建立留言機制,兩者的共同缺點是留言者必須有 GitHub 帳號!畢竟透過這些機制建立留言的本質,其實就是在 GitHub 上發 issue。

最終我覺得 utterances 的版面更加清爽些,所以採用。


2022/01/11補充:

Gitalk 與 utterances 比較

  • Gitalk 在「引言回覆」與「@用戶」方面相對便捷很多(這也是留言最常用的兩項功能),因為有把功能整合在界面上,只要按一下留言旁的箭頭即可,可以參考官方的 Demo 頁面:https://gitalk.github.io/
  • 相較之下,utterances 就顯得非常陽春,只適合單純的留言,如果想引言或@用戶,雖然也可以自己寫 Markdown 實現,但就是有點麻煩!
    • 此時建議透過留言區上方的「2 Comments」連結,回到 GitHub Issues 的編輯器界面(如下方留言 2 所示),操作上會容易許多。
    • 有了編輯器的加持,可以輕鬆寫出較複雜的內容——如果需要的話。
  • 受益於 GitHub Issues 系統,這些留言完全支援 Markdown,可以無限次修改,並能輕鬆加入圖片或連結。

Gitalk「要求權限過多」問題

前述〈Hexo Next 主題增加評論系統 utterances〉文章中,這部分特別值得留意:

不過我在爬文時又看到這篇建议大家弃用 Gitalk 和 Gitment 等权限过高的 Github OAuth App

簡言之就是 Gitalk 服務對 GitHub 的 OAuth 授權要求了太多權限,而且對「全部倉庫」皆適用!這可能帶來一定的資安風險。不過原作者也在相關 issue 解釋這是沒有辦法的事

utterances 應該也有類似情況,不過它最大的改進是可以讓用戶僅選擇單一倉庫開放權限,以縮小範圍方式,有效降低風險,算是一個合理的折衷。

總之,欲採用 Gitalk 方案的讀者可能需要考慮這方面的潛在問題。


小細節:如何讓分類與標籤頁沒有留言區

剛加完留言功能後,赫然發現我的分類標籤頁面下也都有了留言區(現已拿掉),雖然不是不行,但這顯然和我們平常的瀏覽經驗不符。

最初我修正此問題的方式非常土法煉鋼,就是換掉分類與標籤頁的前端繼承模板,改繼承一個沒有留言區的基底模板。啊不就還好我寫過一點 Flask 與 Django 的前端模板?這實在不太科學。

爬了一下文後才知道,留言區開關早就納入 Hexo 的語法設定了!請在兩者專屬的 Markdown 頁面加入下列comments: false標籤,以分類頁為例:

1
2
3
4
5
---
title: categories
layout: categories
comments: false
---

如此該頁的留言功能便會被關閉,不用自己辛苦造輪手刻。

小結:歡迎留言

有了留言板,感覺部落格更加完整了。

而說了一堆,不就是希望你可以來留言嗎!哈哈哈。