ZSL

Blowfish 今年的超大變化

今年對 Blowfish 做了超多改變,目前我覺得已經把所有問題都解決的差不多了,只剩下 JS 是純 refactor 沒有實質收益,因此暫時不會去改他。這篇文章的目的是記錄 Blowfish 這幾個改版都改了些什麼,在 Hugo 知名主題中這個改變幅度應該算是超級巨大,順帶的讓網路上自定義教學全部過時 XD

v2.85.1 到目前最新的 v2.92.0 總共 +13,231 -22,898 行,其中我一個人改了 +9,156 -19,150,本文的介紹只包含我自己改的東西,別人改的不包含在內。每個版本都還有很多小型的功能性優化,但是全講就變成 change log 了因此本文忽略那些改變。

v2.85.1

我的前三個 PR,修 bug,不贅述。

v2.86.0

此版本最重要的就是修復 medium-zoom 的圖片設定,以往 data-zoom-src 設定錯誤,導致展開後還是低解析度的圖片。其餘改變有:

  • 新增 defaultSocialImage,讓沒有 feature image 的頁面分享到社群平台時也有封面圖片
  • 新增 disableImageOptimizationMD,讓你可以獨立控制 markdown 和其他 feature image 是否被 resize,不過這改動被用戶罵
  • ToC 移除 JS 依賴,解決閃爍問題
  • 支援 extend-head-uncached 讓你可以根據頁面插入不同內容到 head
  • 修復兩年沒解決的 repo card 佈局損壞問題
  • 修復非 ASCII 文字的 heading anchor 錯誤

其他小修復不贅述。這個版本不小心改壞了 mobile ToC,因此用戶應該跳過此版本。

v2.87.0

從這個版本開始我已經對重構 codebase 蠢蠢欲動了,最大的改變就是正確設定開發輔助工具,用戶完全沒差,但是開發者差超多。

這是一個重要改變,因為原本的 codebase 我想正常人應該都看的很痛苦,indent 純靠手打,with/if/range 的 end clause 位置不固定,明明是簡單的程式碼卻變的難以閱讀,自然讓外部參與者難以貢獻,這個改動徹底解決此問題。

不是比較 v2.86.0..v2.87.0 的原因是設定了 formatter 但是沒有同版本就馬上 format,而且中間幾個改版包含被 revert 的 dead code。

由於 prettier format 加了空白的問題所以此版本連結後面多了空白,用戶也應該跳過此版本。

v2.88.0

這個版本主要在於大量 refactor:

除此之外,有其他 contributor 把 background-image inline style 改成 hash 方式生成,但是此 PR 造成用戶 build 失敗且效能低落,因此此版本又應該被跳過。

v2.88.1

修復 v2.88.0 build 失敗和效能低落問題。

v2.89.0

這版本最大的改變是新增了 a11y (accessibility,無障礙閱讀) 功能,同為 top 10 的其他 Hugo 主題全部不支援此功能,這代表 Blowfish 的優勢以及對現代化的更進一步。

這個版本還對 main.css 進行大幅度瘦身,不再需要在高達 1100 行的 CSS 中找設定,這個版本將 main.css 瘦身到不到 300 行。

除此之外還對 base-template 進行小幅度重構,有下載 theNewDynamic/language-hugo-vscode 的開發者就能一目了然看出底下那超長一段在寫什麼。

v2.90.0

這個版本開啟了 RTL 現代化的第一步改進,將原本的 rtl/ltr 前綴改為 CSS logical properties,是更現代簡潔的實現方式。由於 Tailwind 4.0 預設啟用 CSS cascade layer 特性,此特性比 logical properties 需要更新的瀏覽器支援,因此這個改動沒有提升瀏覽器最低要求版本。

除此之外,此版本還支援下游用戶使用 Tailwind 內建顏色,在過往版本中由於顏色是直接覆蓋的因此內建顏色無法使用,即使修改 tailwind.config.js 也因為 codebase 有殘留的錯誤 classes 導致啟用 Tailwind 內建顏色會導致主題顏色異常,此版本徹底修復這個問題,進一步提升擴展性。

v2.91.0

這個版本是超多 feature 的更新,讓我一一介紹。

最重要的就是支援 imagePosition 參數。過去圖片比例不符合容器大小的會被裁切,導致焦點不在中心的圖片需要麻煩的裁切才能正確顯示,此版本終於支援讓用戶逐圖片調整,也支援對預設背景圖片直接使用 config file 的設定。

其次是 hotlinkFeatureImage,圖片可以選擇是否要 GetRemote 下載到部落格本地還是直接用外部連結,這主要是提供自建圖床的用戶自由的圖片選擇。

還有一個非常非常重要的改變,修復 render-image 設定,讓 srcset 設定符合現實世界裝置,在過去 Blowfish(以及其他使用 srcset 的 Hugo 主題應該都不例外)的 srcset 只起到安慰劑的效果,因為設定錯誤,所以永遠都載入最大的圖片,小圖片完全沒用反而還浪費 CPU 轉換。這個版本 srcset 設定以 iPhone 16 Pro Max 為基準,只要螢幕比這個還大就載入最大圖片,否則載入小圖。除此之外,這個改版也增加圖片檢測,避免把小圖片轉成大圖片。

不僅如此,這個版本還把所有的 style="background-image:..." 全部改成 <img> 標籤,不只讓圖片能被 SEO 檢測到,更提升了頁面效能,只有在圖片進入 viewport 時才會載入圖片。

其餘值得一提的改變還有:

  • mermaid 支援 dark mode
  • scroll to top 按鈕不再被 buy me a coffee 按鈕阻擋
  • 本地開發時不再載入 analytics
  • 修復沒有 related contents 時 toc 過寬
  • 重構 article-link,分離 HTML 渲染和 Go 條件判斷

v2.92.0

由於之前幾個版本有太多改動了,這個版本我就沒有改東西,只修了幾個小 bug 讓專案穩定一段時間。

未來

在穩定一段時間之後才會發佈,預計接下來還有的幾個重要改動:

  1. 移除 jQuery 依賴 #2534
  2. 讓用戶不需要自行構建 Tailwind 也可自定義 Chroma theme #2568
  3. 移除 medium-zoom,改用 PhotoSwup #2572
  4. 使用 Hugo v0.146.0 的新模板系統 #2573
  5. 重構 codebase 的「目錄結構」#2550

PhotoSwup 對於目前的專案狀態不切實際,因此不會實行;新模板系統和重構 codebase 不知道什麼時候才會動手,因為改動很大,收益很小,#2550 只重構 header,實際上整個 codebase 都有這個問題,是更全面且需要重新設計的改動,目前只存在心裡可能永遠也不會重構。至於新模板系統我個人也滿想改的,因為用法跟 Hugo 文檔不一樣不是一件好事。


Related Articles