Hugo shortcode
Cet article fait partie de la série: Hugo
Table des matières
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 >}} 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;
}Astuce
Astuce
Pour voir un article futur et en mode brouillon, on lance Hugo avec cette commande:
$ hugo serve -D -F
Liens
https://jldblog.eu/post/hugo/hugo_shortcode_lichess_puzzle/
https://jldblog.eu/post/hugo/hugo_shortcode_font_awesome/
https://jamstatic.fr/2017/10/01/templates-hugo-designers-wordpress/
