Make your site more informative and improve usability

Since I started with Hugo, I have made a number of improvements that make the site easier to maintain and I hope more informative by showing article reading time and last modified to your content.

In this article, I’ll show you to

1. Add Reading Time to your Theme
2. Set a default image for all your content in Front Matter
3. Show Last Modified on your content
4. Points to consider when testing
5. How to resolve issues

Add Reading Time to your list Page

Showing Reading Time is a great addition, by helping your visitors to decide if the article is interesting enough to read. .ReadingTime is a function of Hugo - which is calculated from the number of words in your markdown content.

As this is a built in function, you can add it with ease to you site. You’ll see it on my blog page already.

Update your Theme

1. Open your <theme>/layouts/_defaults/list.html and add this in:

1

<span class="reading">{{ .ReadingTime }} {{ cond (eq .ReadingTime 1) "minute" "minutes" }} read</span>

This code gets the value of .ReadingTime for the content then there is a bit of logic to show minute or minutes

You can extend this - by adding it your single post layout - like I did at the top of this page. Open your <theme>/layouts/_defaults/single.html and add this in:

1

<span class="inline-item reading">{{ .ReadingTime }} {{ cond (eq .ReadingTime 1) "minute" "minutes" }} read</span>

Set default image for all content

This is a good one for ensuring every article has an image at the top of the page or on a list layout.

Open the relevant `_index.md’ and add this to the front matter.

[cascade]
  Image = "images/typewriter.jpg"

Use it with caution - its great to have an image if one is missing, but repeating the same image gets boring. Any values in cascade will be merged into all the content.

Show last modified on each article

Maybe you frequently edit your posts, or you’re like me, and after 10 years, you review and refine your articles. It would be great if you can show the last modified or edited date on your content.

Update your Config

This relies on Git - and to enable this, you need to add one line to your config

enableGitInfo = true

Update your Theme

Now open your <theme>/layouts/_defaults/single.html and add this in:

1

<span class="lastmod">Last updated {{ .Lastmod.Format "Jan 2, 2006" }}</span>

Test Driven Development

If you are thinking of Automated Testing with Selenium or other tools … you’ll see I wrap my custom code with class elements that make them easy to identify for testing.

Test and Go …

So now …

1. Save the file
2. Commit your changes to Git
3. Run Hugo server -D and browse to http://Localhost to check every thing is work fine

If you find a problem

• check the error - if it didn’t find the enableGitInfo then add it
• check have you applied the right class for the elements and style (view-source)
• check your image path?

Linkage

• Hugo Release Notes
• Hugo Git Variables

Meet the author

Damien Saunders
An experienced management consultant and business leader interested in digital transformation, product centred design and scaled agile. If I'm not writing about living with UCTD (an autoimmune disease), I'm probably listening to music, reading a book or learning more about wine.
Find our more about me.