Skip to content

Blog 新樣式:Fluid,以及歷史回顧

2024 新主題

發佈

最近這個 Blog 換了新的主題樣式,所以想來介紹一下新的 Theme,順便回顧一下這個 Blog 的歷史。

歷史回顧

本 Blog 的第一篇文章是 2016 年 3 月的事,距今已經 8 年多了,那時我還在高中。一開始我還是使用 Google 的 Blogger 服務來架站。當時用 Blogger 其實用得不是很順,版面格式常常跑掉,就算我已經手寫 HTML 了,一儲存還是會亂掉…但我當時也不知道有什麼其它的服務。

上了大學後,某次和學長聊天時,透露了我對於 Blogger 的抱怨,他就推薦我 Hexo。這是我第一次知道什麼是靜態網頁生成器。不過當時的我還很菜,當時的我連 Git 和 GitHub 都還沒什麼在用,不過我覺得它看起來真的很不錯,所以我開始使用 Hexo 來嘗試靜態網頁,並部署在 GitHub Pages,第一次部署應該是 2020 年 4 月。

那時應該是用了一下預設 Theme 後,就換成 NexT 了,因為它有我喜歡的會自動收折的文章目錄。

就這樣用了 1 年多吧,不知道為什麼有些文章會出現問題,頁面會整個大爆炸,嘗試修復無果後,我決定直接換個新 Theme 來用。後來也乾脆地換成 Hugo 和 Landscape。雖然 Landscape 是預設 Theme,但是我決定它看起來也滿不錯的,畢竟我也不喜歡那些太豐富的功能,只想保持簡單。

這個方案就一路用到 2024/06/22,接下來就是本文的開端… …

起因

為什麼要換 Theme 呢?主要有以下幾個原因:

  1. 程式碼區塊複製問題,複製後各行之間會多出空行。之前查可能是 CRLF \r\n 之類的問題,但是稍微調整了一下還是沒能解決。每次要複製程式碼,結果還有刪除一堆空行的體驗真的不是很好。

  2. 文章目錄(ToC)不會收折。我一直都很喜歡 HackMD 的文章目錄會自動收折,我覺得這樣的版面乾淨很多。雖然我的再前一個 Theme 其實有這個功能,但後來換的 Theme 又沒這個功能了,而我也不想自己處理。

  3. 畫面不夠乾淨。我除了喜歡 HackMD 的 ToC 外,我也很欣賞它那乾淨清晰的面板,雖然我之前在調整 Theme 時已經有盡可能保持簡單了,但我現在想要更進一步。

  4. 原本的 Blog 不支援 Mathjax 或 KaTeX 等數學式渲染,我原本有試著自己手動加入,雖然大部分的語法都可以被正確解析,但是有些特殊情況會解析錯誤。例如這個情況下,兩個底線 _ 會優先被 Markdown 解析成斜體:

    $$
    A_1 = B_2
    $$

再加上我原本用的 Hugo 版本有點舊,GitHub 一直寄安全警告,所以我本來就要更新一輪。後來就想說那乾脆來大改一下好了,畢竟舊 Theme 也用一段時間了,是時候換換口味了。

尋找新 Theme

一開始我打算繼續使用 Hugo,所以在它們官網的 Theme 清單裡翻了很久,但都沒有看到喜歡的,所以最後我打算回到 NexT。但是,NexT 原本是 Hexo 的,那我還不如回去用 Hexo,反正當初我也是從 Hexo 換到 Hugo,它們的 Front-matter 基本上可以通用不用特別調整(就算要,也只要寫個小腳本來處理就可以了),現在只是再換回去而已。

所以我就裝了最新的 Hexo v7.2.0。而 NexT 是 next-theme/hexo-theme-next,GitHub 上的 NexT repo 不只一個,我看這個 repo 到現在都還有持續更新,而另外 2 個最後一個 commit 已經是幾年前了,所以我選擇這個。

由於我的 Theme 一定都會修改調整過,所以我先開了一個測試用的專案,先把 Theme 的 CSS 和 JS 等調整成我喜歡的樣子。雖然說調調這些東西感覺應該很快,但我還是花了週末一整天的時間,可能很多時候在糾結要 1.25 還是 1.125 這種事情吧。

調整完後,就只要把原本的 Markdown 文章放進來再最後確認就可以了。

確認好 Theme 都沒問題後,就可以部署了。我是直接用官方的 GitHub Action 範例。一切都很順利,新的 Blog 已經上線了。

半路殺出的 Fluid

原本新的 Blog 就已經完成了,我準備要撰寫本文。結果,我意外發現 Jerry Yang’s Blog 也是用 Hexo,而且這個 Theme 看起來更符合我的喜好,所以在思考片刻後,我決定放棄花了一整天調整好的 NexT(上線壽命僅一天),轉而使用 Fluid

Fluid 本來就很簡潔了,所以我要調整的東西不會很多。

首先是 CDN 伺服器,它原本使用的 CDN 都是中國的鏡像站,我把有用到的 CDN 都改成 cdnjs。還有原本的 Icon 是來自阿里巴巴的 iconfont,我也替換成 Font Awesome。字體也改成來自 Google Font。

再來就是調整 CSS 和 EJS 了,雖然 Fluid 原本就是相當乾淨,但是我想讓它看起來再更清晰點。

我還記得以前看過《留白:不一樣的平面設計第一課,”白”是一切》(費工信, 黃于倫, 陳羿安著)這本平面設計的書(當時的我比起程式碼,更熱衷於平面設計和視覺傳達設計),裡面對於「留白」的說明讓我印象深刻,也深深地影響了我。所以我花了不少時間再調整各個元素的間距。

改著改著一天又快結束了。不過目前主要是調整好了,剩下一些手機端的樣式還沒調整到最好,但這部分就等之後再處理吧。

我自己對於新的 Theme 還滿滿意的,而且也有確實解決上面列的問題,看來它可以再陪我好一段時間。也希望各位讀者們會喜歡新的 Theme。

比較

稍微比較一下各個 Theme。依序是最舊的 Landscape、只活一天的新-NexT、目前的最終 Fluid。

主畫面

Landscape
Landscape
NexT
NexT
Fluid
Fluid

文章標題

Landscape
Landscape
NexT
NexT
Fluid
Fluid
Landscape
Landscape
NexT
NexT
Fluid
Fluid

完整備份 GitHub 上的所有 repo
一種巧妙及噁心並具的 C 語言寫法:達夫裝置 (Duff's device)

留言可能不會立即顯示。若過了幾天仍未出現,請 Email 聯繫:)