客製化佈景主題

得益於 Hugo 本身的覆寫機制，客製化相當簡單且乾淨；Neso 佈景主題也留有多處入口方便你修改，本文由簡單到進階，說明如何進行佈景主題客製化。

2025 年 10 月 9 日多語版本：

直接覆寫 CSS

在你 Hugo 專案目錄下列位置建立一個空的 custom.css (必須是這個檔名)：

assets/css/custom.css

未見該目錄的話請自行建立。

接著在裡面直接寫你要的 CSS 即可 (雖然不是最佳做法，但簡單有效)，Neso 的 CSS 都盡可能採取低權重寫法以便你覆蓋。

你當然也可以依照 Tailwind 官方的建議，將 CSS 寫在適當的 layer、定義你的 utility class——如果你想這樣做的話，我已建立好小抄供你使用。

補充
由於我製作這個佈景主題時，主要是使用 Tailwind 的 utility class，因此 HTML 內現成可供你 “target” 的 class name 可能不多，我會在後續更新適當添加。

請閱讀此處的說明。

到 Neso 的 GitHub Repo 下載 palette.css。

你將會在該 CSS 檔案裡看到佈景主題所使用的變數。接著依照 Tailwind 建議的方式修改、自訂樣式變數即可。

編寫完你要的內容後，放到你 Hugo 專案目錄下的：assets/css/palette.css。

未見該目錄的話請自行建立。

到 Neso 的 GitHub Repo 下載這四個檔案 (不必全部，看下面說明挑選你需要的即可)：

head_start.html: 寫在這裡面的 HTML、CSS、JavaScript、Go html/template 語法將會被插入到所有網頁的 <head> 標籤內部最一開始的地方。; 適合：Google Tag Manager 容器代碼、JavaScript (避免 FOUC)
head_end.html: 寫在這裡面的語法將會被插入到所有網頁的 <head> 標籤內部最末端的地方。; 適合：自訂 CSS
body_start.html: 寫在這裡面的語法將會被插入到所有網頁的 <body> 標籤內部最一開始的地方。; 適合：Google Tag Manager 容器代碼
body_end.html: 寫在這裡面的語法將會被插入到所有網頁的 <body> 標籤內部最末端的地方。; 適合：JavaScript

在檔案裡編寫你要的內容後，放到你 Hugo 專案目錄下的：layouts/_partials/include/<這裡>。

未見該目錄的話請自行建立。

提示
Neso 佈景主題已佈下 Tailwind CSS 的處理管線，你可以在 HTML template 裡自由使用 utility class。

觀察 Neso 佈景主題的目錄結構 (GitHub Repo)：

hugo-neso/
├── assets
├── i18n
└── layouts

你在你的 Hugo 專案下應該也會看到類似的目錄結構、一些同名的資料夾，你可以到 Hugo 官方文件查閱這些目錄的具體用途。

簡單來說，你可以複製某個佈景主題的原始碼檔案 (可到 Neso 佈景主題的 GitHub Repo 下載)、進行你想要的修改，然後放置在你 Hugo 專案下對應的資料夾，Hugo 在建置時便會優先採用你的版本。

提示
Neso 佈景主題已佈下 Tailwind CSS 的處理管線，你可以在 HTML template 裡自由使用 utility class。

注意
如果你安裝佈景主題的方式有安放一份 hugo-neso/ 佈景主題原始檔在你的 themes/ 目錄下，請勿直接修改裡面的原始檔，而是該採取上述的覆寫方式，否則將來佈景主題有更新可用時，你將需要自行追蹤變更了哪些部分。