Hugo shortcode

Attention cette article date depuis plus d'un an (611 jours).

Table des matières

Maj 15/05/2023: Ajout des icones personalisées des bandeaux.

La syntaxe Markdown a des limites, Hugo utilise des « bouts de code » pour passer ces limites.

L’inconvénient c’est de retenir les balises.

L’avantage est d’intégrer des fonctions au sein même du contenu, sans toucher au template.

Shortcode interne

Vous trouverez pleins d’exemple sur le site officiel.

https://gohugo.io/content-management/shortcodes/

shortcodes personnalisés

Des icônes

On va se servir des icônes du framework du site. https://getuikit.com/docs/icon Pour afficher une icône en HTML c est:

<span uk-icon="icon: check"></span>

On va créer un dossier layouts//shortcodes dans notre thème et un fichier uicon.html Qui va contenir simplement:

<span uk-icon="{{- .Get 0 -}}"></span>

{{- .Get 0 -}} appel le 1er argument du shortcode

{{< uicon "heart" >}} est un cœur.

Ceci est un cœur.

On va rajouter la taille des icônes comme dans la doc de Uikit:

{{ $icon := (.Get 0) }}
{{ $taille := default "1" (.Get 1)}}
<span uk-icon="icon: {{ $icon }}  ; ratio: {{ $taille }}"></span>

{{ $icon := (.Get 0) }} enregistre le parametre dans la variable $icon
{{ $taille := default “1” (.Get 1)}} enregistre le 2eme paramètre dans la variable $taille et si rien met 1

{{< uicon heart 2 >}} est un **gros** coeur.

est un gros coeur.

Des bandeaux

On va reprendre le CSS de Uikit pour faire une barre d’avertissement. L’idée c’est d’inclure du texte entre 2 balises

<div class="uk-alert-danger" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-{{- .Get 0 -}}" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>{{ .Inner | markdownify }}</p>
</div>

{{- .Get 0 -}} récupère la 1er variable.
{{ .Inner | markdownify }} récupère le texte entre les balises et on garde la syntaxe Markdown.

Les 4 classes de notre CSS:

primary Give the message a prominent styling. (bleu)
success Indicates success or a positive message. (vert)
warning Indicates a message containing a warning. (orange)
danger Indicates an important or error message. (rouge)

On va aussi commenter le code avec les balises HTML

<!-- commentaires -->

<!--
https://getuikit.com/docs/alert)
- primary 	Give the message a prominent styling. (bleu)
- success 	Indicates success or a positive message. (vert)
- warning 	Indicates a message containing a warning. (orange)
- danger 	Indicates an important or error message. (rouge)

utilisation : 
bandeau primary 

-->
{{ $style := (.Get 0) | default "primary" }}
{{ $icon := .Scratch.Get "icon" }}
{{ if  eq $style "primary" }} 
    {{ $.Scratch.Set "icon" "eye" }}
{{ else if eq $style "success"}}
    {{ $.Scratch.Set "icon" "info" }}
{{ else if eq $style "warning"}}
{{  $.Scratch.Set "icon" "warning" }}
{{ else if eq $style "danger"}}
    {{ $.Scratch.Set "icon" "ban" }}
{{ end }}
{{ $icon := .Scratch.Get "icon" }}

<div class="uk-alert-{{ $style }}" uk-alert>
    <span uk-icon="icon: {{ $icon }} ; ratio:2"></span>
    <a class="uk-alert-close" uk-close></a>
    <p class="bandeau">{{ .Inner | markdownify }}</p>
</div>

On va créer un fichier bandeau.html dans un dossier layouts//shortcodes de notre thème.

On appel notre shortcode dans notre article markdown.

{{< bandeau primary >}} Lorem **ipsum** dolor sit amet, *consectetur* adipiscing elit, sed do eiusmod tempor incididunt. {{< / bandeau >}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Le CSS Pour avoir la bande à gauche.

.uk-alert-danger {
border-left: solid;
}
.uk-alert-warning {
border-left: solid;
}

.uk-alert-primary {
border-left: solid;
}
.uk-alert-success {
border-left: solid;
}