Inline shortcodes

Hugo’s inline shortcodes let you write a shortcode’s template inside the content file that uses it, instead of in layouts/shortcodes/. They’re handy for one-off formatting that doesn’t deserve a layout file, and Emet supports them without any configuration, because everything it needs is in the page. (Hugo needs enableInlineShortcodes = true in its config before it will render them.)

How Hugo writes them#

An inline shortcode has a name ending in .inline. The first time it appears it carries its template between opening and closing tags; after that you can reuse it by name:

{{< dateformat.inline "Jan 2, 2006" >}}{{ now | time.Format (.Get 0) }}{{< /dateformat.inline >}}

Later on the same page:
{{< dateformat.inline "2006-01-02" >}}

Or with no parameters:
{{< dateformat.inline />}}

Emet calls the first one the definition and the rest usages. A definition is also the first usage; it renders with the parameters it carries.

In the editor#

Inline shortcodes get purple cards, so you can tell them from block shortcodes at a glance. Each card has a drag handle, a collapse chevron, the name with its .inline suffix and a Definition or Usage badge.

A definition card, expanded, has a Name field (the .inline is added for you, and the name has to start with a letter and contain only letters, digits, hyphens and underscores), a Template Code textarea for the Go template, a field for each parameter Emet detected in that template and a box showing how to write a usage of it. Collapsed, it shows the first 60 characters of the template.

A usage card has the same parameter fields, taken from the definition elsewhere in the document. If the template takes nothing, the card says so. Collapsed, it just says which definition it references.

A usage whose definition isn’t in the document gets an amber border and a “Definition not found in this document” message, which is what you’ll see if you delete a definition that’s still in use. Hugo would fail the build for the same reason.

New cards open expanded; cards loaded from the file start collapsed. Click the header or double-click the card to toggle.

Inserting#

The .inline menu in the toolbar is always there, whatever the section’s settings, because inline shortcodes don’t depend on site.yaml. Define New Inline Shortcode inserts an empty definition card; below that, every definition in the current document is listed under Insert Usage.

Working out the parameters#

Emet reads the Go template to decide which fields to show:

In the template Field
.Get "caption" A named parameter called caption. The type is guessed from the name: anything that looks like an image gets an image picker, names like show_title or is_wide get a checkbox, description and friends get a textarea, everything else a text input
eq (.Get "wide") "true" Makes wide a checkbox regardless of its name
.Get 0, .Get 1 Positional parameters, labelled Argument 0, Argument 1 and so on
.Inner Ignored for inline shortcodes, since a usage has no inner content

The field for Argument 0 reads and writes the first quoted value, so positional parameters are as editable here as named ones.

What gets written#

A definition is always written paired, with its template between the tags. A usage is always written self-closed, {{< name.inline "value" />}}, so Hugo never goes looking for a closing tag it won’t find.

In the preview pane, Emet does a best-effort render of the template with the parameter values filled in. See Template interpolation for how far that goes.

Block or inline?#

Use an inline shortcode for something one page needs and nothing else does. The moment a second page wants it, move the template to layouts/shortcodes/ and describe it as a block shortcode, which gets you a proper label, a preview template and nesting. Put the definition before its first usage in the page; Emet doesn’t mind either way, but whoever reads the Markdown will.