Intro

• We’ll be using yaml format for all examples down below, as it is easier to read.

Override theme template

By Hugo’s Lookup Order, you can override any part of a theme that you want. The following is a quick example.

Let’s say you wish the list was different. All you have to do is copy the list template:

your-site/themes/Trigo/layouts/_defaults/list.html

And paste it under your own layouts folder:

your-site/layouts/_defaults/list.html

Then you’re free to make any changes you want to the list. When Hugo builds your site, your copy of list.html will be used instead of the theme’s list.html.

Enable SEO

These include OpenGraph and Schema.

params:
  env: production

or set HUGO_ENV as “production” in system env-vars

Failed to find a valid digest in the “integrity” attribute for resource … ?

Read about How Subresource Integrity helps: Subresource_Integrity

Why was the asset not loading ? : How_browsers_handle_Subresource_Integrity

Solution:

Set the following in config.yml

params:
  assets:
    disableFingerprinting: true

Linked Issues:

• https://stackoverflow.com/questions/65056585/hugo-theme-not-loading
• https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource
• https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/

Add menu to site

You can add menu entries which will appear in the header of every page.

To do so, add a menu section to your site’s config.yml:

menu:
  main:
    - identifier: categories
      name: categories
      url: /categories/
      weight: 10
    - identifier: tags
      name: tags
      url: /tags/
      weight: 20
    - identifier: example
      name: example.org
      url: https://example.org
      weight: 30

name controls what will be displayed for the menu entry. url sets the URL that the entry points to. weight is used to control the positioning of entries.

For more information on menus, see the Hugo wiki page.

Pin a Post

Post can be pinned/ displayed top on the list by adding a weight=<num> var to page-variables

example:

---
title: "My Important post"
date: 2020-09-15T11:30:03+00:00
weight: 1
---

---
title: "My 2nd Important post"
date: 2020-09-15T11:30:03+00:00
weight: 2
---

Adding Custom Favicon(s)

We support the following paths under /static directory and can be added accordingly.

• favicon.ico
• favicon-16x16.webp
• favicon-32x32.webp
• apple-touch-icon.webp
• safari-pinned-tab.svg

Centering image in markdown

Add #center after image to center align an image

![name](path/to/image.webp#center)

Using Hugo’s Syntax highlighter “chroma”

Set hugo’s markdown styling in site config.yml

markup:
  highlight:
    noClasses: false

noClasses has to be false to make highlight color follows the theme.

References

• Override a Hugo theme