Share code between Shortcodes and Custom Layouts.

Snippets are template abstractions enabling you to reuse the same markup and logic used to create Shortcodes in your Custom Layouts.

Take for example the included Button Group shortcode used for creating a set of styled buttons, which we’ll look at in detail here.

First the partial:

<div class="btn-group{{ if eq .formactions "true" }} form-actions{{ end }}{{ with .class }} {{ . }}{{ end }}">
  {{ .body }}

Now the shortcode:

{{ $formactions := .Get "formactions" }}
{{ $class := .Get "class" }}
{{ $body := .Inner }}
{{ partial "components/buttongroup.html" (dict "formactions" $formactions "class" $class "body" $body) }}

Notice how the shortcode serves only to collect input and call the partial, which contains all markup and display logic. This delegation of responsibility is the abstraction that enables reuse between content and template.

Now let’s see how to actually use it.

Use the Button Group shortcode to group buttons in content:

{{< hackcss-buttongroup >}}
  {{< hackcss-button text="Left" />}}
  {{< hackcss-button text="Middle" type="info" />}}
  {{< hackcss-button text="Right" isghost="true" />}}
{{< /hackcss-buttongroup >}}

Which creates a styled button group with three buttons as shown here:

To reuse in layout mirror the partial call used inside the shortcode.

All Shortcodes implementing hackcss components are built using the snippets template abstraction enabling each of them to be reused in Custom Layouts.