Calling a Hugo Partial from a Hugo Shortcode
Updated  2023-April-11

Page contents

 

News

2023-March-17  Published this evolving⁠[1] article.

 

Why

If you want to use a chunk of Go Template code⁠[2] in both a layout file and a content file, and if you want to keep your Hugo project DRY, then you can do the following.

  1. Put the chunk of Go Template code in a Hugo partial.

  2. Create a Hugo shortcode that calls the partial.

Below is an example.

 

Example: Reusable “Share on Mastodon” link that can be used anywhere

When I was creating the Infinite Ink article titled Create a “Share on Mastodon” link with Hugo and Tootpick⁠🐘, I wanted to display the results of that article’s tootpick-⁠partial within the main matter⁠[3] of that article. But, at that point, I could not because I did not yet have a tootpick-⁠partial-⁠wrapper shortcode. Below I describe how I’ve set things up so it’s now possible to do that.

 

1. Create a partial

Near the bottom of some Infinite Ink articles, there is a share-⁠on-⁠mastodon link. Here is a Hugo partial that is similar⁠[4] to the partial that generates Infinite Ink’s share-⁠on-⁠mastodon links:

{{- /*
Path: layouts/partials/tootpick-partial.html
Created: 2023-February
*/ -}}

{{ $text :=  (printf "Check out "%s" at https://www.ii.com%s   #InfiniteInk" .Title .RelPermalink) }}

<a href="https://tootpick.org/#plustospace=yes&text={{- $text | plainify | htmlUnescape | urlquery -}}"
 rel="nofollow">
 <nobr><img src="/img/mastodon/logo-purple.svg" width="16" style="max-width: 100%;"> Share on Mastodon</nobr>
</a>

 

For details about this partial, see Infinite Ink’s Create a “Share on Mastodon” link with Hugo and Tootpick⁠🐘.

 

2. Create a shortcode that calls the partial

In Hugo, it’s not possible to directly call a partial from the source of a content file. Instead, you can use a Hugo shortcode and within that shortcode, call the partial. For example, here is the shortcode that Infinite Ink uses to call the above tootpick-⁠partial.html:

layouts/shortcodes/tootpick-partial-wrapper.html
{{- /*
Path: layouts/shortcodes/tootpick-partial-wrapper.html
Created: 2023-March
Usage: {{< tootpick-partial-wrapper >}}
*/ -}}

{{ partial "tootpick-partial" page }}
                               👆
                             context

 

‼

In Hugo v0.111.0 and earlier, the tootpick-⁠partial argument must be .Page rather than page, i.e.:

{{ partial "tootpick-partial" .Page }}
                                👆

This is because the global⁠[5] page function is available only in Hugo v0.111.1 and later. Details are at gohugo.io/variables/page/#the-global-page-function.

 

3. Test the shortcode in this article

The source of this section of this article includes this:

If this article was helpful to you, you
can help others and Infinite Ink by clicking
this {{< tootpick-partial-wrapper >}} link.

This is rendered as:

If this article was helpful to you, you can help others and Infinite Ink by clicking this Share on Mastodon link.

 

References

 

See also

For more about Hugo, see Infinite Ink’s…

 

Endnotes

1. Many Infinite Ink articles, including this one, are evergreen and regularly updated.
2. Go Template code is also known as Go HTML. For details, see gohugo.io/categories/templates/, golang.org/pkg/html/template/, and golang.org/pkg/text/template/.
3. The main matter of an article is also known as its Content.
4. Infinite Ink’s actual share-⁠on-⁠mastodon partial is a little different from the share-⁠on-⁠mastodon partial that I discuss in this article.
5. Hugo global functions are contextless and do not need a leading dot (.). Examples include the global hugo function, global page function, and global site function.

Discuss or share this page 📝 🤔 🐘