Hugo LoveIt theme categories page modification

Introduction

The default categories page in the LoveIt theme can be quite dull, with every category represented by a folder icon. This article documents how to modify the categories page in the LoveIt theme to allow custom images for each category.

Modifying terms.html

Navigate to the /layouts/taxonomy/terms.html file in the website’s root directory. This file contains the templates for category and tag pages. Currently, I have no intention of modifying the tag page, but if needed, terms.html is the place to start.

To modify the category page, locate the following code in 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>&nbsp;{{ .Page.Title }}
  </a>
</h3>

Replace it with:

 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 -}}
      &nbsp;{{ .Page.Title }}
  </a>
</h3> 

With this, we have completed the most important modification.

Modifying list.html

Next, open the /layouts/taxonomy/list.html file in the website’s root directory and locate the following code:

1

<i class="far fa-folder-open fa-fw" aria-hidden="true"></i>&nbsp;{{ .Title }}

Replace it with:

1
2
3
4
5

{{- with .Params.featured_image -}} <!-- new -->
    <img src="{{ . | relURL }}" alt="{{ $.Title }}" class="category-icon">&nbsp;{{ $.Title }}
{{- else -}}
    <i class="far fa-folder-open fa-fw" aria-hidden="true"></i>&nbsp;{{ .Title }}
{{- end -}}

Aligning Images and Text

To align the newly added images with the text and adjust their size, we need to modify the custom.css file, which was introduced in the article Modify the font of the navigation bar in Hugo.

Open the /assets/css/custom.css file in the website’s root directory and add the following:

1
2
3
4
5
6

/* Adjust category page icon height */
.category-icon {
    height: 1.5em;  /* Match the image height with text size */
    vertical-align: text-top; /* Align the image with text */
    margin-right: 5px; /* Adjust spacing between the image and text */
}

With this, all necessary modifications are complete.

Usage

Navigate to the /content/categories/ directory in the website’s root directory and create a folder named after the category you want to modify. Inside the folder, add language-specific files as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/content/categories/
│── category-name/           # Folder for storing category translations
│   ├── _index.zh-tw.md      # Traditional Chinese category translation
│   ├── _index.en.md         # English category translation
│   └── ...                  # Other languages
│
│── book recommendations/    # Example
│   ├── _index.zh-tw.md      # Traditional Chinese category translation
│   └── _index.en.md         # English category translation
│

Inside the language file, add the following content:

1
2
3
4

---
title: "Category Name"
featured_image: ""
---

Replace "Category Name" with the appropriate category name and set featured_image to the desired image URL. If featured_image is left as "", the default folder icon will be displayed.

Example:

1
2
3
4

---
title: "book recommendations"
featured_image: "https://media.tenor.com/HZ5ZqVk4boMAAAAj/reading-read.gif"
---

Conclusion

Modifying the categories page in the LoveIt theme for Hugo is not difficult. With just a few small changes, the once dull category page can become visually appealing. Why not try customizing it yourself?

Environment

• Hugo 0.144.2
• LoveIt theme (version from GitHub on February 21, 2025)