Eddie’s Blog 2026 大整理！

Hugo 的一路上

Eddie 用過幾套主題後，覺得自己不是很懂 Hugo 的情況下，用功能太複雜的主題，常常都不知道自己在調整什麼，弄到很亂，最後選擇功能超超超陽春的 classic，來把各種複雜的東西都先拿掉。

極簡風格，極簡到幾乎沒有功能，只留下最基本的文章列表、分類、標籤、 Menu（nav）列表、Footer（最下面寫版權的地方），頂多再加上一個白天、夜晚兩種色彩切換模式（而且沒開關！）。

在整理 CSS 的時候也才發現有 TOC 目錄功能，但開啓後會直接蓋過內文，排版也很怪、很不好看：

TOC 目錄擋住內文

做了什麼？

因爲之前自己新增了很多功能，例如：歷史上的今天、好手氣（隨機文章）、搜尋，最後搞得程式碼非常亂，所以整個大整理了一波。

layouts/XXX.html

layouts 決定排版，主題本身提供了 header.html、header_custom.html、footer.html、footer_custom.html，結果我寫了一堆 CSS 在 header_custom.html 裡面，我也不知道爲什麼！（別鬧啊過去的自己！）

裡面還有一堆 .js code，最後 js 都整理成獨立的檔案到 partial 底下，再引用到 header.html 或 footer.html 去了。

static/css/XXX.css

這底下有主架構 style.css，也有 theme-override.css。

等一下！我把 CSS 檔案分散在 style.css、theme-override.css、跟 layouts/header_custom.html 裡面？

終於知道爲什麼前幾天改顏色的時候，一直失敗，最後用了一堆 !important 語法，來強制生效，這簡直就是 CSS 版本的音量戰爭¹啊！

於是花費了很多時間在整個散落在三個檔案裡的 CSS 檔案，而且之前新增功能是完全沒有考慮白背景模式的，顏色直接寫死，真的還好是有 AI 不然要整理幾個禮拜了吧！

新增功能

除了前幾天更改首頁以外，這次用 .js 新增了切換白、黑底的按鈕，也新增了「點擊圖片看完整圖」功能。

本來的圖片，如果超出頁面，是沒辦法看到整張圖片的，尤其是直式的圖片，現在只要點擊就能看到整張！

如果你正在用 Hugo

如果你正在用 Hugo，聽 Eddie 一句勸告，在更改網站佈局時，不要直接在 themes 內的主題更改！請先把你要更改的那個檔案，複製到根目錄去！

例如：想要修改 /themes/你的主題名稱/layouts/_default/list.html，直接複製一份到位於根目錄的 /layouts/_default/list.html，然後在外面修改，主題內的可以不用刪除。

這是因爲執行 hugo 時，如果根目錄層級已經有檔案了，會直接忽略掉 themes 底下相同檔名的檔案。

保留主題的原檔，你才能在出事時，查看原始的檔案長怎樣（雖然 git 也行）。

Eddie 好幾波改下來，已經快看不到主題的原貌了（除了配色以外）。

Before After

對了，原始的 menu 有 ~/ 的終端機風格，會被搜尋引擎誤認成是非人類語言而降排行，是這次開始大改的起因。

下一步

接下來，應該會開始調整配色，以及各種列表的易讀性，但這要等農曆過年後了，已經進入音響工作的尾牙季。

Before After