Shortcode Examples

Page for shortcode examples used in this documentation

4 minute read

Please also read the following links:

Card panes

See docsy documentation on card-panes shortcode for the basics.

The above has been adapted a bit so one can override/set the footer inside a card enabling us to use other shortcodes in the footer.

{{< card-footer >}}
  <!-- Other shortcodes, e.g. ref -->
  Try [ref]({{< ref "ref-page.md" >}})
{{< /card-footer >}}

Below this additional functionality is shown

Code

{{< cardpane >}}

  <!-- Orignal (shortcodes won't work in parameters) -->
  {{< card header="Card1 header with **markdown**" footer=`Try [ref]({{< ref "ref-page.md" >}})` >}}
  Card1 body
  {{< /card >}}

  <!-- Additional -->
  {{< card header="Card2 header with **markdown**" >}}
  Card2 body
  {{< card-footer >}}
  Try [ref]({{< ref "ref-page.md" >}})
  {{< /card-footer >}}
  {{< /card >}}

  <!-- Additional (overrides footer parameter) -->
  {{< card header="Card3 header with **markdown**" footer="This will be overridden" >}}
  Card3 body
  {{< card-footer >}}
  Overriden by me
  {{< /card-footer >}}
  {{< /card >}}

{{< /cardpane >}}

Result

Card1 header with markdown

Card1 body

Try [ref]({{< ref “ref-page.md” >}})

Card2 header with markdown

Card2 body

Try ref

Card3 header with markdown

Card3 body

Overriden by me

External Links

Adds a link with target="_blank" so it opens in new tab/window.

Code

<!-- External link with name -->
Link with a name called {{< extlink "Google" "https://www.google.com" >}}

<!-- External link -->
Link without a name {{< extlink "https://www.google.com" >}}

Result

Link with a name called Google

Link without a name https://www.google.com

Figure

This is a copy (with an addition of resolving relative paths to absolute) of the Hugo figure built-in shortcode.

See hugo documentation on figure shortcode for the basics.

Will resolve src relative path (w.r.t. current page) to a full path (does not check if it exists).

Also if no alt parameters is added it will default to alt="image not found" so this is visible in rendered html.

This allows figures to be added into pages which get included in other pages (see Include and tabs) without breaking relative links.

Code

<!-- Add image resolved to full path with 'relative to page' part -->
**Smiley:**
{{< fig src="_media/smiley.png" width="200" >}}

<!-- Non existing image -->
**Not found:**
{{< fig src="cannot/find/me.png" >}}

Result

Smiley:

Not found:

Icon

Shortcode to get an icon.

Code

<!-- Get icon -->
{{< icon "fas fa-kiwi-bird" >}} Kiwi

<!-- Get icon and set margin-right via style -->
{{< icon name="fas fa-kiwi-bird" style="margin-right:0.2em" >}} Kiwi

<!-- Get icon and set font-size via style -->
{{< icon name="fas fa-kiwi-bird" style="font-size:30px" >}} Larger Kiwi

Result

Kiwi

Larger Kiwi

Include

Include another md file into current page.

Code

<!-- include a page -->
Line **before** inclusion
{{< include "ref-page.md" >}}
Line **after** inclusion

Result

Line before inclusion

This is ref-page.md, I also have a smiley:

Line after inclusion

Message

Create an alert message with some predefined types, which are:

warning (color warning)
fatal (color danger)
<anything else> (color info)

Note

This shortcode needs to be closed thus use one of the following:

{{< msg ... />}}
{{< msg ... >}}...{{< /msg ... >}}

Code

<!-- warning -->
{{< msg "warning" "This is a warning" />}}

<!-- fatal -->
{{< msg "fatal" "This is a fatal" >}}
Which can also be used with more stuff inside, like other shortcodes:
{{< fig src="_media/smiley.png" width="200" >}}
{{< /msg >}}

<!-- anything else -->
{{< msg "note" "This is a note" />}}
{{< msg "info" >}}
This is an info
{{</ msg >}}
{{< msg "whatever" "This is a whatever" />}}

Result

Warning

This is a warning

Fatal

This is a fatal

Which can also be used with more stuff inside, like other shortcodes:

Note

This is a note

Info

This is an info

Whatever

This is a whatever

Tabs

This is a copy (with an addition of adding an icon) of the Kubernetes tabs, tab shortcode combination.

See kubernetes hugo documentation on tabs shortcode for the basics.

The above has been adapted a bit so one can set an icon in the tab. It has also been renamed to k8s-tabs, k8s-tab so as not to conflict with the docsy tabpanes, tab combination.

Below this additional functionality is shown

Code

{{< k8s-tabs >}}

  {{< k8s-tab name="Kiwi" icon="fas fa-kiwi-bird" include="ref-page.md" />}}

  {{< k8s-tab name="Horsey" icon="fa fa-horse" >}}
  Contents of horsey tab
  {{< /k8s-tab >}}

{{< /k8s-tabs >}}

This is ref-page.md, I also have a smiley:

Contents of horsey tab