Short Codes

Short Codes are the equivalent of partials in layouts templates but it is for your content. The idea is that you build these short codes up to speed things up with same elements via the use of partials. The documentation is available at:

• https://gohugo.io/templates/shortcode-templates/
• https://gohugo.io/content-management/shortcodes/

How it Works

Using it In Content

In post, you use a special syntax compared to partials. The example would be:

{{< myShortCode value1 name2=value2 ... >}}

The short code can take many name or nameless values.

Corresponding Structure

Each short codes corresponds to its layouts in the layouts/shortcodes directory. The filename serves as the shortcode command so be careful with the naming. Based on the example above, it is:

layouts/shortcodes/myShortCode.html

Define Your Rendering

Then, you define the rendering for your short code. Inside the shortcode.html file, you can design it yourself.

Designing Your Short Code Rendering

A good practice is to have the shortcode.html calls the partials and that's it. This opens up your design available for both layouts and content. Doing so allows your design reusable in other Go applications. After all, short codes are merely a Hugo thing.

Getting Arguments

For Short Code, there is a special function for it: .Get. This function can get the arguments from either positional or associated name. For example:

# For this short code

{{< myShortCode value1 name2=value2 name3=value3 >}}

# Your .Get

{{ .Get 0 }}       # -> value1

{{ .Get 1 }}       # -> value2

{{ .Get "name2" }} # -> value2

{{ .Get "name3" }} # -> value3 

Then, you can use the value(s) as you wish. Example, this is the short code for absLangLink that calls a partial in links/absLangLink:

{{ partial "links/absLangLink" (dict "context" . "url" (.Get 0)) }}

That's all about short codes in Hugo.