---
date: 2019-11-29T15:29:59+01:00
description: "My different Hugo shortcodes's presentation"
draft: false
tags: ["Hugo", "Shortcode"]
title: "Hugo: Shortcodes"
translationKey: "hugo-shortcodes"
---
## Description
As you see on Hugo's page shortcodes,
a shortcode is a simple snippet inside a content file that Hugo will render using a predefined template.
Some times, you need to include/add raw {{< abbr HTML "HyperText Markup Language" >}}
into the {{< abbr MD "MarkDown" >}} content. The shortcode add correctly this.
By this way, you can include too MD syntax.
Put your shortcodes into `layout/shortcodes/`.
----
Actually, I use the official third package providen by the team OpenBSD:
* OpenBSD : **6.6**
* Version d'Hugo : **0.53** : `Hugo Static Site Generator v0.53 openbsd/amd64 BuildDate: unknown`
## Documentation
* official : {{< gohugo n="shortcodes" s="content-management" >}}
## My shortcodes
### abbr
* To manage element HTML `abbr`
{{< raw abbr >}}
The shortcode:
```html
{{ .Get 0 | safeHTML }}
```
----
Call the shortcode as:
{{< code-hl shortcode >}}
{{* abbr accronym "Meaning of Acronym" */>}}
{{}}
----
Example: {{< abbr HTML "HyperText Markup Language" >}} is written as:
{{< code-hl shortcode >}}
{{* abbr HTML "HyperText Markup Language" */>}}
{{}}
### anchor
To manage the anchor into one page is a little complex:
{{< raw anchor >}}
```html
{{ $txt := .Get 0 | safeHTML }}{{ $name := .Get 1 | lower | safeHTML }}{{ $anchor := anchorize $name }}
{{ $txt }}
```
----
Call the shortcode as:
{{< code-hl shortcode >}}
{{* anchor "Texte" "Cible" */>}}
{{}}
----
Example: this {{< anchor "link" "description" >}} refers to the section
Description; his writing is:
{{< code-hl shortcode >}}
{{* anchor "link" "description" */>}}
{{}}
### blockquote
Writing a basic element HTML `blockquote`, you need only:
```html
```
----
Call the shortcode as:
{{< code-hl shortcode >}}
{{* blockquote "blockquote-filename" lang */>}}
{{}}
* `blockquote-filename`: the file to call where the blockquote is written
* `lang`: the lang, i.e `en`, `fr`, etc. - *To avoid specifying an code, use `""`*.
----
Example:
{{< blockquote "web-hugo-shortcode-example-blockquote" fr >}}
### Code
To include some example code, I created into `content/` folder a directory named `inc`. *You can named as you want; it's up to you!*
And after, create needed files, and call them as `/content/folder_name/file_name`.
By default:
{{< code-hl html >}}
{{ $file := .Get 0 | readFile }}{{ $lang := .Get 1 }}{{ $opt := "" }}
{{ highlight $file $lang $opt }}
{{}}
For my needs, my shortcode is "a little more" advanced:
{{< raw code >}}
```html
{{ $name := .Get 0 }}{{ $file := urlize (print "/content/inc/" $name) | readFile }}{{ $lang := .Get 1 }}{{ $opt := "" }}
{{ i18n "codeTitle" }} {{ $lang }}
{{ highlight $file $lang $opt }}
```
----
Call the shortcode as:
{{< code-hl shortcode >}}
{{* code "code-filename" language */>}}
{{}}
* `code-filename`: the file to call
* `language`: the language, i.e `sh`, `PHP`, `python`, etc. *To avoid specifying an code, use `""`*.
____
Example: Look, you have one just above it!
### Color
A very small shortcode to add color on text.
Into my {{< abbr CSS "Cascaded Style Sheet" >}}, I had some definitions with named colors.
{{< raw color >}}
The shortcode:
```html
{{ .Inner }}
```
----
Call the shortcode as:
{{< code-hl shortcode >}}
{{* color "css-name" >}}text{{< /color */>}}
{{}}
* `css-name`: the CSS name
* `text`: the text
----
Example: This is {{< color "dark-green" >}}green text{{< /color >}}, or {{< color "orange" >}}orange{{< /color >}}, and this other is {{< color red >}}red{{< /color >}}, etc…
### File
To include a file content example, I fork the shortcode {{< anchor code code >}}. It's quasy-same code.
But, for my need, I wrote an advanced as:
{{< raw file >}}
```html
{{ $name := .Get 0 | safeHTML }}{{ $file := urlize (print "/content/inc/" $name) | readFile }}{{ $lang := .Get 1}}{{ $filename := .Get 2 }}{{ $opt := "linenos=table" }}
{{ i18n "fileTitle" }}{{ $filename }}
{{ highlight $file $lang $opt }}
```
----
Call the shortcode as:
{{< code-hl shortcode >}}
{{* file "example-file" language "filename" */>}}
{{}}
* `/example-file`: file to call
* `language`: language, i.e. `sh`, `PHP`, `python`, etc… *To avoid specifying an code, use `""`*.
* `filename`: filename to display ;)
----
Example: Look above to see!
### Image
Yes, I known Markdown had his code to include basically image.
---
#### PNG/JPG/Tiff
This shortcode exists to specify width of image, and link to the raw image.
{{< raw img >}}
```html {linenos=inline}
{{/* runner for assets/image */}}
{{- $src := resources.Get (printf "%s%s" "/images/" (.Get "s")) -}}{{- $alt := .Get "a" | safeHTML -}}{{- $width := printf "%s" (.Get "w") -}}
{{- $img := $src -}}
{{- with $width -}}{{- $img = $src.Resize (printf "%sx" $width) -}}{{- end -}}
{{- with $img -}}
{{- end -}}
```
----
Call the shortcode as:
{{< code-hl shortcode >}}
{{* img a="alt" s="src" w="width" */>}}
{{}}
The named parameters are:
* `a`: equivalent for attribute `alt`
* `s`: equivalent for attribute `src`
* `w`: equivalent for attribute `width`
----
Example:
{{< img a="My Logo" s="Logo_full_192px.png" w="124" >}}
This image is my logo, named "My Logo", with an original width at 192
{{< abbr px "pixels" >}}, resized at 124 px, into
{{< abbr PNG "Portable Network Graphics" >}} format.
#### SVG
About the SVG picture, I manage them like as:
{{< raw figure-svg >}}
```html {linenos=inline}
{{/* runner for assets/svg */}}
{{- $class := .Get "class" -}}{{- $src := resources.Get (printf "%s%s" "/svg/" (.Get "src")) -}}{{ $title := .Get "title" }}
{{ with $src }}
{{ end }}
```
---
Call the shortcode:
{{< code-hl shortcode >}}
{{* figure-svg class="class-name" src="image.svg" title="the title" */>}}
{{}}
---
Example :
{{< figure-svg class="" src="Logo_final.svg" title="My Logo" >}}
---
### kbd
This shorcode manage HTML item `kbd`.
{{< raw kbd >}}
The shortcode is:
```html
{{ $k := .Get 0 | safeHTML }}{{ $k }}
```
----
Call shortcode as:
{{< code-hl shortcode >}}
{{* kbd key */>}}
{{}}
* `key`: the key name into the keyboard!
----
Example : this is for the {{< kbd s >}} key!
### Inside link
This shortcode, now, had two versions. I started with
{{< anchor "the first" "inside-v1" >}}, and one day, I wonder how add
anchor too; {{< anchor "the v2" "inside-v2" >}} was born!
#### Inside v1
To manage inside link between pages of this site, I wrote this shortcode:
{{< raw inside >}}
```html {linenos=inline}
{{ $link := .Get 0 }}{{ $link := replace $link ":" "/" }}{{ $url := (print ( relLangURL $link ) "/") }}
{{ if .Get 1 }}{{ $txt := .Get 1 }}
{{ $txt }}
{{ else }}
{{ with .Site.GetPage $link }}{{ $title := .Title }}{{ $title }}{{ end }}
{{ end }}
```
And, I created into my CSS, a named `inside` definition.
----
Call the shortcode as:
{{< code-hl shortcode >}}
{{* inside "section:subsection:pagename" "Title" */>}}
{{}}
* sections and pages names are separated by the symbol `:`
* the title can be avoid. In this case, it will display the title of called page.
----
Examples:
* In this exemple, I call the page {{< inside "web:hugo:hugo-deploy" >}}; this is its title that is displayed.
* With this other example, I override the title when I call the same page {{< inside "web:hugo:hugo-deploy" "Static deploy with Hugo" >}}
#### Inside v2
This version is subtle different:
{{< raw inside2 >}}
```html {linenos=inline}
{{ $link := .Get "l" }}{{ $link := replace $link ":" "/" }}{{ $url := (print ( relLangURL $link ) "/") }}{{ $anchor := .Get "a" }}
{{ if .Get "t" }}{{ $txt := .Get "t" }}{{ $txt }}
{{ else }}
{{ with .Site.GetPage $link }}{{ $title := .Title }}{{ $title }}{{ end }}
{{ end }}
```
----
Call the shortcode as:
{{< code-hl shortcode >}}
{{* inside2 l="section:subsection:pagename" t="title" a="anchor-name" */>}}
{{}}
The named parameters are:
* `a`: target an anchor into called page. *this anchor need to exists into the page*. May be omitted!
* `l`: name of internal link; sections and pages names are separated by the symbol `:`.
* `t`: the title. May be omitted. In this case, it will display tye title of the called page.
----
Example:
* Here, I call the page {{< inside2 l="web:hugo:hugo-deploy" a="rsync" >}}. Her title is displayed, but it links to the section named **rsync**, targeted anchor.
* And this example, I override the title as {{< inside2 l="web:hugo:hugo-deploy" t="Static deploy with Hugo" >}} but I not wrote anchor param.
### Note
The blocs of alert or note are HTML blocs to display a text, with an identifiant, translated segun the used lang.
The possible values of this identifiant may be:
* `danger`: to display an alert 'danger', with a red background.
* `info`: to display an informational note, with a blue background.
* `success`: to display a success message, with a green background.
* `tip`: to display a tip note, with a yellow background.
* `warning`: to display a warning message/alert, with an amber background.
And, all thoses background colors `alert-$id` are written on CSS file.
The shortcode:
{{< raw note >}}
```html
{{ $class := .Get 0 }}{{ $wrd := T (printf "alert-%s" $class) }}
{{ $wrd }}
{{ .Inner | .Page.RenderString }}
```
----
The shortcode is:
{{< code-hl shortcode >}}
{{* note id */>}}
This is your message
{{* /note */>}}
{{}}
----
Examples:
{{< note danger >}}
**ATTENTION**: this message display a risk or danger for you!
{{< /note >}}
*This example includes MD code to strong the word 'ATTENTION'.*
{{< note info >}}
A little **information**. Keep this in your mind! :D
{{< /note >}}
{{< note success >}}
You succeeded the test! Be happy.
{{< /note >}}
{{< note tip >}}
This is a tip. Yeah, man, interesting!
{{< /note >}}
{{< note warning >}}
Please, be careful at the message: it seems a malfunction exists. See more attentive!
{{< /note >}}
### Tag
This shortcode not exists to manage Hugo tags, but to manage tag into MD file.
Into CSS, I defined attribute `.tag::after` to display `(tag)`.
{{< raw tag >}}
The shortcode:
```html
{{ $txt := .Get 0 }}{{ $href := "/" | relLangURL}}{{ $href := (printf "%s%s%s" $href "/tags/" $txt) | urlize }}{{ $txt }}
```
----
Call the shortcode as:
{{< code-hl shortcode >}}
{{* tag tag-name */>}}
{{}}
----
Example:
This word {{< tag Hugo >}} is a link to the tag page with "Hugo" name.
## Others shortcodes
### GoHugo
Just to link to official documentation Hugo, I wrote this shortcode:
{{< code-hl shortcode >}}
{{* gohugo n="pagename" s="section" a="anchor-name" */>}}
{{}}
----
{{< raw gohugo >}}
The shortcode:
```html
{{ $section := .Get "s" }}{{ $name := .Get "n" }}{{ $anchor := .Get "a" }}{{ i18n "shortcodeGoHugoDocTitle" }}{{ humanize $section }} > {{ humanize $name }}
```
----
Example: Link to {{< gohugo n="shortcodes" s="content-management" >}}
Hugo page with:
{{< code-hl shortcode >}}
{{* gohugo n="shortcodes" s="content-management" */>}}
{{}}
### Manpage
As I use many times links to official manpage OpenBSD, I wrote this shortcode:
{{< code-hl shortcode >}}
{{* man title digit */>}}
{{}}
* If a `digit` is written, the shortcode build the URL as `title.digit`
and the text as `txt(digit)`.
----
{{< raw man >}}
The shortcode:
```html
{{ $txt := .Get 0 }}{{ $nb := .Get 1}}
{{ $txt }}{{ if $nb }}{{ print "(" $nb ")" }}{{ end }}
```
----
Examples:
* Link to the manpage **Packet Filter**: {{< man pf 4 >}}
* Other link: {{< man httpd 8 >}}
* And, the last but not the least: {{< man man >}}
### Wikipedia
Egual, for the Wikipedia, the shortcode is:
{{< code-hl shortcode >}}
{{* wp "url-article" */>}}
{{}}
----
{{< raw wp >}}
The shortcode:
```html
{{ $txt := .Get 0 }}{{ $title := print (i18n "wpTitleArticle") $txt }}Wikipedia :: {{ $txt }}
```
----
Examples:
* This is an article to promote OpenBSD: {{< wp OpenBSD >}}
* This other is for Debian: {{< wp Debian >}}
* And, a third more complex: {{< wp "Firewall_(computing)" >}}
## Somewhere
Finally, do not hesitate to have fun with the shortcodes; get help on [the commmunity forum](https://discourse.gohugo.io/).
* https://after-dark.habd.as/shortcode/
----