Les shortcodes sont des mots-clés basés sur des templates qui étendent les possibilités du Markdown. Nous allons créer un shortcode très simple pour pouvoir afficher une vignette dans les articles.
En cliquant sur la vignette une fenêtre s’ouvrira avec l’image en taille normale.

Préparation

Les shortcodes doivent être créés dans le répertoire ..\layouts\shortcodes

c:
cd \hugo\bin\sites\blog\layouts
mkdir shortcodes

Création du template HTML

Créer le fichier mythumbnail.html

Dans le répertoire précédent

C:\hugo\sites\blog\layouts\shortcodes>dir
14/03/2018  15:21    <DIR>          .
14/03/2018  15:21    <DIR>          ..
14/03/2018  15:21               0 mythumbnail.html

Modifier son contenu

La fonction Get permet de récupérer la propriété passée en paramètre du futur shortcode.

<a target="_blank" href="{{.Get "src"}}">
    <img class="mythumbnail" src="{{.Get "src"}}" alt="{{.Get "alt"}}">
</a>

On va maintenant créer la classe css mythumbnail utilisée dans le tag <img>.

Créer le fichier css

C:\hugo\sites\blog\static\css>dir
15/03/2018  16:46    <DIR>          .
15/03/2018  16:46    <DIR>          ..
15/03/2018  17:02               0 mycss.css

Modifier son contenu

.mythumbnail {
    border: 2px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 100%;
}

.mythumbnail:hover {
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5);
}

Référencer le fichier css

Avec le thème beautifulhugo, il faut créer le fichier suivant

C:\hugo\sites\blog\layouts\partials>type head_custom.html

<link rel="stylesheet" href="{{ "css/mycss.css" | absURL }}" />

Utiliser le shortcode dans notre article