With frequently changing information it can be useful to record both when a post was created and when it was last updated - showing that it’s been reviewed recently. We do this on this site by showing the created date and showing the last modified date if it’s different from the created date (see above the title).
There’s two ways of doing this in Hugo:
recording when you last changed it
using the last changed date in Git (if you use it)
(or a blend of the two)
The Manual Way:
The simplest way is to record a lastmod date and time within your post’s header - like the example below:
1
2
3
4
5
6
---
title: My Example Post
date: 1990-01-01T00:00:00+00:00
lastmod: 1995-04-04T00:00:00+00:00
url: /example-post/
---
We can then use this information in our theme and layouts to display the information. In our code, we don’t show the last updated date if it’s the same as the created date (there’s no point?)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- Created Date -->{{- $pubdate := .PublishDate.Format "02.01.2006" }}
Created:
<timedatetime="{{ .PublishDate }}"title="{{ .PublishDate }}"> {{ $pubdate }}
</time><!-- Last Updated Date -->{{- if .Lastmod }}
{{- $lastmod := .Lastmod.Format "02.01.2006" }}
{{- if ne $lastmod $pubdate }}
<divclass="post-info-last-mod"> (Updated:
<timedatetime="{{ .Lastmod }}"title="{{ .Lastmod }}"> {{ $lastmod }}
</time>)
</div> {{- end }}
{{- end }}
Output:
1
2
Created: 01.01.1990
(Updated: 04.04.1995)
You can of course change the formatting to be however you would like. We do have a post on showing it with ordinals like ’th’ and ‘st’ if it’s useful.
The Git way
Hugo can actually hook into your git (the version control system) information and pull the last edited times from there. To enable it, just change this setting in your config.
config.toml
1
enableGitInfo=true
This will now automatically pull in the last updated times and fill in lastmod for you - Neat!
It will, however, overwrite any of your manually created lastmod dates. You can choose to change this behaviour to favour your lastmod times but if they don’t exist then use git. To do this, we need to add one final part to our config changing the front matter dates:
Edd is a PHP and Go developer who enjoys blogging about his experiences, mostly about creating and coding new things he's working on and is a big beliver in open-source and Linux.
Using Parameters in Your Theme
–
In Hugo, you can access the parameters specified in the front matter of your content files (e.g., Markdown files) through your Hugo templates. These are called ‘Page-level Params’. This post explores how you can use these within your theme.
We’ll be using an example of featured_image added our post below.
1 2 3 4 5 --- title: "My Post" date: 2023-06-01 featured_image: "/img/2022/goldie1.jpg" --- You can then use this parameter when editing your theme using the template tag shown below:
Changing the Syntax Highlighting Style in Hugo
–
When building a website using Hugo, you might want to customize the syntax highlighting to match your site’s overall aesthetic. Hugo uses Chroma, a powerful syntax highlighting engine, to provide code highlighting out of the box.
In this blog post, we’ll guide you through the process of changing the syntax highlighting style in Hugo using Chroma, with the help of the hugo gen chromastyles command.
Add Adsense Ads to Your Posts
–
This post sets out how you can add your Google Adsense code to your blog posts. As this is MakeWithHugo, we’ll be adding them to our Hugo site.
You’ll need a few things before starting, an Adsense account, the snippet of code from Adsense and knowing where you want to put them (or auto ads for the easy option).
There’s a few different ways to achieve this, based on where you want them.