Hugo Shortcodes
Hugo shortcodes include relatively complicated HTML in your Markdown document. Some examples:
- YouTube
- Notes and Warnings
- GitHub gists.
Add a note or a warning
{ {% alert note %} }
Here’s a tip or note…
{ {% /alert %} }
Here’s a tip or note…
{ {% alert warning %} }
Don’t try this at home!
{ {% /alert %} }
Don’t try this at home!
Add a GitHub gist:
Suppose that we want to include the gist at the following URL:
We can use:
{ {% gist spf13 7896402 %} }
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- image --> | |
<figure {{ if isset .Params "class" }}class="{{ index .Params "class" }}"{{ end }}> | |
{{ if isset .Params "link"}}<a href="{{ index .Params "link"}}">{{ end }} | |
<img src="{{ index .Params "src" }}" {{ if or (isset .Params "alt") (isset .Params "caption") }}alt="{{ if isset .Params "alt"}}{{ index .Params "alt"}}{{else}}{{ index .Params "caption" }}{{ end }}"{{ end }} /> | |
{{ if isset .Params "link"}}</a>{{ end }} | |
{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}} | |
<figcaption>{{ if isset .Params "title" }} | |
<h4>{{ index .Params "title" }}</h4>{{ end }} | |
{{ if or (isset .Params "caption") (isset .Params "attr")}}<p> | |
{{ index .Params "caption" }} | |
{{ if isset .Params "attrlink"}}<a href="{{ index .Params "attrlink"}}"> {{ end }} | |
{{ index .Params "attr" }} | |
{{ if isset .Params "attrlink"}}</a> {{ end }} | |
</p> {{ end }} | |
</figcaption> | |
{{ end }} | |
</figure> | |
<!-- image --> |