Hugo provides the ability to easily create custom shortcodes to meet your website’s needs. All you need to do is add an html file in the shortcodes folder with the html you want to render.

To make a custom audio shortcode create an html file in the following location: layouts/shortcodes/audio.html

<figure {{ with .Get "class" }}class="{{ . }}"{{ end }}> <audio controls preload="{{ .Get "preload" | default "metadata" }}"> {{ with .Get "src" }}<source src="{{ . | relURL }}" type="audio/mpeg">{{ end }} </audio> {{ with .Get "caption" }}<figcaption>{{ . }}</figcaption>{{ end }} </figure>

And shortcode:

{{ <audio src="/audio/file.mp3" caption="Caption"> }}

Originally published at on April 20, 2022.



Photo by Maik Jonietz on Unsplash

The CSS :empty pseudo-class selects any element that has no children or text.

/* Background color of every empty div element */
div:empty {
background-color: #000;
<p>Some text</p>
<!-- No text, background #000 -->

MDN’s definition:

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.



Photo by Anne Nygård on Unsplash

If you want to display the total number of content pages that Hugo generated from a particular section use where to filter section pages:

<p>Total number of pages in the /articles/ section:
{{ len (where .Site.RegularPages "Section" "==" "articles") }}.



Photo by Luke Chesser on Unsplash
  • Windows: Press Ctrl + Shift + I then Ctrl + Shift P.
  • Mac: Press Command + Option + I then Command + Shift P.
  • Then type “screenshot” to see the four screenshot options.

Screenshot types

  • Capture area screenshot
  • Capture full size screenshot
  • Capture node screenshot
  • Capture screenshot

In Chrome version 89, the modified right-click element inspector allows us to capture a screenshot from the inspector.



Sometimes we need to add raw HTML content in markdown files. We can do it before or after, the content. And in the middle of content using shortcodes. Here is how to create your own one-line custom shortcode to make that possible.

Create html file located in /layouts/shortcodes/rawhtml.html.


And then you can use the shortcode in your markdown file e.g:

{{ < rawhtml > }}
<p>Hello World!</p>
{{ < /rawhtml >}}

Originally published at on February 15, 2022.



Hugo has a built-in related content feature. To list up to 3 related pages include this partial in your single page template. It will match up pages based on common tags and will show the three most likely.

Add sample code in layouts/partials/related.html.

{{ $related := .Site.RegularPages.Related . | first 3 }} 
{{ with $related }} <h3>See also</h3>
{{ range . }}
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
{{ end }}
{{ end }}

And then include this partial template in one of your default template that you want to show. For example you can show related content in your _default/single.html, so it appears on every blog post.

Hugo’s related content default configuration ( config.yaml):

includeNewer: false
- name: keywords
weight: 100
- name: date
weight: 10
threshold: 80
toLower: false

Originally published at on February 13, 2022.



Ronalds Vilcins

I drink a lot of tea and build beautiful websites. If you are looking to work together or just start a conversation 👉