Hugo Tip & Tricks

Some tips & tricks that I found useful with Hugo.

Special Characters in Tags

A tag list page will be inaccessible if there are special characters in the tag name. For example, the following frontmatter uses "C#" as a tag name:

title: "My C# Notes"
slug: "my-csharp-notes"
tag: ["C#"]

The link for the "C#" tag will be /tags/c#, which is inaccessible and the browser will return HTTP 404.

To solve this issue, use "csharp" as the tag name:

title: "My C# Notes"
slug: "my-csharp-notes"
tag: [csharp]

Then create a under /content/en/tags/csharp folder. Below is the content of the file:

title: "C#"

Note: The file name must be with a leading _ character. Using will not solve this issue.

With the above setups, the Tag Cloud will display "C#" and the link will work as expected, shown as the screenshot below:

Click the C# tag and the browser will open /tags/csharp page:

Escaping Shortcodes

Sometimes I need to demonstrate how to use a shortcode in my article. Simply put the shortcode example in a markdown code block won't work because the shortcode will be interpreted and executed anyway.

The solution is to add a pair of /* and */ in both the beginning and end lines of the shortcode block. Here is an example:

It is rendered like this:

{{% admonition type=note title="This is a note" %}}
It's not who you are underneath, it's what you do that defines you.
{{% /admonition %}}

Show Recent Posts

The following code can be used to show recent 5 posts:

<h4>Recently added/updated posts</h4>
    {{ $byLastMod :=  .Site.RegularPages.ByLastmod  }}
    {{ $recent := ($byLastMod | last 5).Reverse }}

    {{ range $recent }}
        <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
        &nbsp; ({{ .Lastmod.Format "2006-01-02" }})
    {{ end }}

You can put them into a partial file, for example, if you're using Docsy theme, the partials/section-index.html might be a good choice.

See also:

Last modified: 2024-07-09