前言
LoveIt 主題原先的分類頁實在有些枯燥乏味，每一個分類都是以資料夾作為圖示。本文章記錄如何修改 LoveIt 主題的分類頁，讓我們可以放上不同的圖片。
修改前的目錄頁，每一個分類頁的圖示都是資料夾。
修改後的目錄頁，每一個分類頁的圖示都可以自定義。
修改 terms.html
進入網站根目錄的 /layouts/taxonomy/terms.html 檔案，我們可以發現這檔案中包含了網站的分類頁與標籤頁。目前我並無修改標籤頁的想法，如果需要修改也可從 terms.html 下手。
為了修改目錄頁，我們從 terms.html 中找到
1
2
3
4
5
| <h3 class="card-item-title">
<a href="{{ .RelPermalink }}">
<i class="far fa-folder fa-fw" aria-hidden="true"></i> {{ .Page.Title }}
</a>
</h3>
|
並修改成
1
2
3
4
5
6
7
8
9
10
| <h3 class="card-item-title">
<a href="{{ .RelPermalink }}">
{{- with .Params.featured_image -}}
<img src="{{ . | relURL }}" alt="{{ $.Title }}" class="category-icon">
{{- else -}}
<i class="far fa-folder fa-fw" aria-hidden="true"></i>
{{- end -}}
{{ .Page.Title }}
</a>
</h3>
|
到這裡，我們便完成最重要的修改部份了。
修改 list.html
接下來到網站根目錄的 /layouts/taxonomy/list.html 檔案，找到
1
| <i class="far fa-folder-open fa-fw" aria-hidden="true"></i> {{ .Title }}
|
並修改成
1
2
3
4
5
| {{- with .Params.featured_image -}} <!-- new -->
<img src="{{ . | relURL }}" alt="{{ $.Title }}" class="category-icon"> {{ $.Title }}
{{- else -}}
<i class="far fa-folder-open fa-fw" aria-hidden="true"></i> {{ .Title }}
{{- end -}}
|
對齊圖片與文字
接下來，為了對齊剛修改的圖片與文字，並將圖片進行適當的縮小，我們將修改於〈修改 Hugo 中導覽列的字型〉文章中新增的 custom.css 。
到網站根目錄的 /assets/css/custom.css 檔案，新增如下內容。
1
2
3
4
5
6
| /* 修改分類頁圖示高度 */
.category-icon {
height: 1.5em; /* 讓圖片高度與文字大小一致 */
vertical-align: text-top; /* 讓圖片與文字對齊 */
margin-right: 5px; /* 調整圖片與文字的間距 */
}
|
至此，我們便完成了所有修改。
使用方式
移動到網站根目錄的 /content/categories/ 目錄，並新增資料夾取名為要修改的分類名稱，在其中新增語言檔案。檔案目錄如下。
1
2
3
4
5
6
7
8
9
10
| /content/categories/
│── 分類名稱/ # 存放分類翻譯的資料夾
│ ├── _index.zh-tw.md # 繁體中文版分類頁翻譯
│ ├── _index.en.md # 英文版分類頁翻譯
│ └── ... # 其他語言
│
│── book recommendations/ # 範例
│ ├── _index.zh-tw.md # 繁體中文版分類頁翻譯
│ └── _index.en.md # 英文版分類頁翻譯
│
|
在語言檔案中填入如下資訊：
1
2
3
4
| ---
title: "分類名稱"
featured_image: ""
---
|
在 title 後填入該分類對應的翻譯名稱，並在 featured_image 後填入想要更換的圖片即可。若 featured_image 後保持 "" ，則與原先一樣顯示資料夾圖示。
以下為範例。
1
2
3
4
| ---
title: "書籍推薦"
featured_image: "https://media.tenor.com/HZ5ZqVk4boMAAAAj/reading-read.gif"
---
|
結語
修改 Hugo 中 LoveIt 主題的分類頁不是難事，但這小小的修改便可讓原先枯燥的分類頁煥然一新，那何嘗不試著替換呢？
運行環境
- Hugo 0.144.2
- LoveIt 主題（2025 年 2 月 21 日 Github 上的版本）
