Shortcodes

Builtin

Hugo builtin shortcodes

• Youtube shortcode

{{< youtube 0RKpf3rK57I >}}

Where 0RKpf3rK57I is the video id part in the full link https://www.youtube.com/watch?v=0RKpf3rK57I

• Other shortcodes
  relref - returns the permalink of a page on your site:

  [Post 1]({{% relref "/posts/post-1#foo" %}})

  ->rendered

  <a href="/posts/post-1/#foo">Post 1</a>

  ref - the same but absolute
  figure - for images (figure)

Custom

Shortcodes = Shortcode templates

Two types of shortcodes we can create:

1. a single tag shortcode and a
2. start/end tag shortcode.
   Shortcode name is the filename.

Shortcode, example 1.

• Create shortcode: layouts/shortcodes/myshortcode.html (creating shortcodes folder in layouts)

This is the shortcode text.

Make sure you have {{.Content}} in layouts/_default/single.html

• Use shortcode in content/a.md

+++
title = 'A'
date = 2024-10-10T20:37:08+07:00
draft = true
+++

This is a.md
{{< myshortcode >}}

• Go to http://localhost:1313/a/, it should display:

This is a.md This is the shortcode text.

Passing in variables to a shortcode

{{< myshortcode color="blue" >}}

<p style="color:{{ .Get `color` }}">This is the shortcode text.</p>

Passing in positional parameters.

{{< myshortcode orange >}}

<p style="color:{{ .Get 0 }}">This is the shortcode text.</p>

Shortcode to surround an image with a border.

The .md file would pass in the img-src and caption. The layouts/shortcodes/myshortcode.html would look like:

<div style="border: 1px solid black">
  <img src="{{ .Get `image-src`}}" />
</div>
<p>{{ .Get “caption” }}</p>

Shortcodes with closing tags.

This is a.md
{{< myshortcode >}}
Text inside the opening and closing tags.
{{< / myshortcode >}}

<p style="background-color:yellow">{{.Inner}}</p>

Practical example: lorem

Problem: your website is still in development, but you want to populate your web pages with text to test it out.
Solution: create a shortcode that will generate some Lorem Ipsum text.

In layouts create directory shortcodes, create a file with the name of your shortcode.

{{- $count := .Get "count" | default (.Get 0) | default 1 -}}
{{- $loremipsum :=
  slice "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua." "Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat." "Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur." "Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-}}
{{- range seq $count }}
  <p class="loremipsum">
    {{- range $index := seq 1 (index (shuffle (seq 0 3) ) 0 ) -}}
      {{ index
        $loremipsum $index
      }}&nbsp;
    {{- end -}}
  </p>
  {{- $loremipsum = shuffle $loremipsum -}}
{{- end -}}

Attribution: the code for the shortcode was suggested on Hugo discourse forum, link to the post.

Use the shortcode in a markdown file (this will generate 20 paragraphs of Lorem Ipsum text):

{{< lorem count="20" >}}