Badges de couleurs en passant par les shortcodes sous Hugo

Petite astuce pour avoir des petits badges via du css et surtout directement via un shortcode depuis Hugo.

Le CSS

Commençons par écrire notre bout de CSS que nous nommerons tag.css et que nous mettrons dans le
dossier chemin_de_votre_site/static/css.
Je préfère séparer mon ajout de code plutôt que de l’écrire directement dans le css du thème, c’est plus simple je trouve (mais pas forcément plus léger certes).

.label {
 border-radius:.1rem;
 line-height:1.2;
 padding:.1rem .2rem;
 background:#f0f1f4;
 color:#5b657a;
 display:inline-block;
}

.label.label-rounded {
 border-radius:5rem;
 padding-left:.4rem;
 padding-right:.4rem;
}

.text-light {
 color:#fff;
}

.text-capitalize {
 text-transform:capitalize;
}

.tag-changed {
 background:#ffb700;
}

.tag-add {
 background:#32b643;
}

.tag-fixed {
 background:#aa80ff;
}

.tag-deprecated {
 background:#cc6699;
}

.tag-suppression {
 background:#bf0040;
}

Comme vous le voyez il est assez simple et pratique, vous pouvez ajouter n’importe quel tag et en changer la couleur simplement en modifiant le background. Pour le nom, ce sera celui qui suit le tag-, .text-capitalize se chargeant de mettre une majuscule à ce dernier.

Ensuite on va appeler ce fichier dans le <head> :

<link rel="stylesheet" href="/css/tag.css">

Se faciliter la vie avec le shortcode

Maintenant la partie concernant Hugo et donc le shortcode, pour cela on va créer un fichier tag.html que l’on va mettre dans chemin_de_votre_site/layouts/shortcodes/ et y coller ce qui suit :

note Si le dossier /shortcodes n’existe pas créez le.

{{ with .Get 0 }}
    <span class="label label-rounded text-light text-capitalize tag-{{ . }}">{{ . }}</span>
{{ end }}

Celui-ci nous permettra de nous simplifier grandement la vie car nous n’aurons plus à écrire la balise <span> à chaque fois, mais juste utiliser l’appel de shortcode de hugo : { {% tag nom_du_tag %} }, le nom du tag correspond au nom que vous lui avez donné dans le tag.css, exemple : { {% tag add %} }

note j’ai mis des espaces à la première { et à la dernière } autrement le code ne s’affiche et hugo charge directement le shortcode, il faudra donc retirer ces espaces.

Du coup avec ce que je vous ai donné dans le tag.css on obtient ceci :

  • changed modificatione.
  • add ajout d’un truc.
  • deprecated useless.
  • fixed correction.
  • suppression bye bye.