Des « shortcodes » pour Hugo

Hugo est un générateur de pages statiques. Il faut donc écrire du code pour publier.
Pour simplifier ce codage, on utilise des raccourcis : les « shortcodes ».

Certains sont déjà intégrés dans le système.
Par exemple pour insérer une vidéo Youtube, il suffit de taper {{% youtube ID_video %}}
On trouve l’ID de la vidéo en cliquant sur Partager.

Mais on peut créer ses propres shortcodes.
J’ai déjà donné un exemple dans l’article Une lightbox simple en CSS.
Sur le site officiel de Hugo, tout est bien expliqué, mais en anglais.

Mes « shortcodes »

Les codes sont à placer dans le répertoire /layouts/shortcodes de votre thème.

1. Un raccourci pour <div class=“clearfix”></div> :

Ce code empêche les débordement des block sur la page. Je crée un fichier clear.html et j’y insère :

<div class="clearfix"></div>

Syntaxe : {{% clear %}}

2. Une lightbox

Je crée un fichier lightbox.html en y mettant :

<a href="#{{ .Get "href" }}">
  	<img src="{{ .Get "src" }}" class="thumbnail" alt="{{ .Get "alt" }}" title="{{ .Get "title" }}">
</a>
<a href="#_" class="lightbox" id="{{ .Get "href" }}">
  	<img src="{{ .Get "src" }}" class="maximage" alt="{{ .Get "alt" }}">  {{ .Get "title" }}
</a>

Il suffit de coder : {{% lightbox href=“#img1” src=“url_image” alt=“” %}} pour faire surgir votre lightbox.
Il faudra également spécifier la taille de la vignette et sa position en indiquant le Css :

<style>.thumbnail{width:40%;float:left;padding-right:1em;}</style>

Ici, la vignette sera affichée à 40% de sa taille, placée à gauche avec une marge à droite de 1em.
PS : N’oubliez-pas d’utiliser {{% clear %}} si nécessaire.

3. Les informations

Je crée un fichier alert.html en y mettant :

<div class="alert alert-{{ .Get 0 }}">
  {{ .Inner }}
</div>

Pour afficher une note, il suffit d’écrire {{% alert note %}}information{{% /alert %}}

Information

Pour une alerte : {{% alert warning %}}Attention !{{% /alert %}}

Attention !

comments powered by Disqus