Customizing the LoveIt Theme

A guide to personalizing your Hugo blog with the LoveIt theme

Neil Godfrey included in Web Development Tutorials

2025-06-14 435 words 3 minutes

/resources/hugo/customizing-loveit-theme/featured-image.png

Contents

Introduction

The LoveIt theme for Hugo offers extensive customization options to help you create a unique and personalized blog. In this guide, we’ll explore various ways to customize the theme to match your preferences and requirements.

Basic Configuration

Modifying config.toml

The primary configuration file for your Hugo site is config.toml. Here are some essential settings you can customize:

[params]
  # site default theme ("light", "dark", "auto")
  defaultTheme = "auto"
  # website title
  title = "My Blog"
  # website description
  description = "My Personal Blog"
  # website images for Open Graph and Twitter Cards
  images = ["/logo.png"]

Customizing the Header

You can modify the site header by adjusting these parameters:

[params.header]
  # desktop header mode ("fixed", "normal", "auto")
  desktopMode = "fixed"
  # mobile header mode ("fixed", "normal", "auto")
  mobileMode = "auto"

Theme Features

Add your social media links in the configuration:

[params.social]
  GitHub = "xxxx"
  Twitter = "xxxx"
  Instagram = "xxxx"
  Email = "xxxx@xxxx.com"
  LinkedIn = "xxxx"

Search Functionality

Enable and configure the search feature:

[params.search]
  enable = true
  type = "lunr"
  contentLength = 4000
  placeholder = "Search"
  maxResultLength = 10
  snippetLength = 30
  highlightTag = "em"
  absoluteURL = false

Custom Styling

CSS Customization

Create a custom CSS file at assets/css/_custom.scss to override default styles:

// Custom style
.custom-class {
  color: #1a1a1a;
  font-size: 1.1em;
}

// Override theme defaults
.home[posts] .summary .content {
  color: #333333;
}

Typography

Modify font settings in your configuration:

[params.typography]
  # Font family options: ["system", "serif", "sans-serif", "monospace"]
  titleFontFamily = "serif"
  contentFontFamily = "sans-serif"
  codeFontFamily = "monospace"

Advanced Features

Mathematical Formulas

Enable KaTeX for mathematical formulas:

[params.math]
  enable = true
  # default block delimiter is $$ ... $$
  blockLeftDelimiter = ""
  blockRightDelimiter = ""
  # default inline delimiter is $ ... $
  inlineLeftDelimiter = ""
  inlineRightDelimiter = ""
  # KaTeX extension copy_tex
  copyTex = true
  # KaTeX extension mhchem
  mhchem = true

Code Highlighting

Configure syntax highlighting:

[markup]
  [markup.highlight]
    codeFences = true
    guessSyntax = true
    lineNos = true
    lineNumbersInTable = true
    noClasses = false

Performance Optimization

Image Processing

Optimize images using Hugo’s built-in image processing:

[params.image]
  # image lazy loading
  lazyload = true
  # image gallery support
  gallery = true

CDN Configuration

Use CDN for better performance:

[params.cdn]
  # CDN data file name, disabled by default
  # ["jsdelivr.yml"]
  data = ""

Conclusion

The LoveIt theme provides extensive customization options to create a unique and functional blog. By following this guide, you can tailor the theme to your specific needs while maintaining its elegant design and advanced features.

Remember to check the official documentation for more detailed information and updates.