Creating Custom Hugo Shortcodes

Today I learned how to create custom shortcodes in Hugo to make content creation more efficient.

What are Shortcodes?

Shortcodes are simple snippets inside your content files that Hugo will render using predefined templates. They’re a great way to add custom HTML or reusable components without writing raw HTML in your Markdown files.

Creating a Basic Shortcode

To create a shortcode, add an HTML file to the layouts/shortcodes/ directory. For example, to create a “notice” shortcode:

<div class="notice {{ .Get 0 }}">
  {{ .Inner }}
</div>

Using the Shortcode

You can then use it in your Markdown content like this:

{{% notice warning %}}
This is a warning notice with a yellow background.
{{% /notice %}}

Parameters

Shortcodes can accept positional and named parameters:

• Positional: {{ .Get 0 }}, {{ .Get 1 }}
• Named: {{ .Get "type" }}, {{ .Get "color" }}

This makes shortcodes extremely flexible for creating reusable content components.