Hugo Dark Theme Website Generator https://after-dark.habd.as
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

snippets.md 2.0KB

+++ title = “Snippets” description = “Share code between Shortcodes and Custom Templates.” categories = [“extending”] tags = [“shortcodes”, “templating”, “layout”] features = [“related content”, “code highlighter”, “snippets”] +++

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 hackcss-styled buttons, which we’ll look at in detail here.

First the partial:

{{< highlight go-html-template >}} {{< include “themes/after-dark/layouts/partials/components/buttongroup.html” >}} {{< /highlight >}}

Now the shortcode:

{{< highlight go-html-template >}} {{< include “themes/after-dark/layouts/shortcodes/hackcss-buttongroup.html” >}} {{< /highlight >}}

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:

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

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.