Des badges de couleur en passant par les shortcodes sous Hugo ⋅ Plume

Update 01/01/2019

Si vous voulez aller à l'essentiel sans tout mon blabla explicatif, le tout est disponible sur gitlab 😅

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-removed {
 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 :

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 %}}

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

{{% tag changed %}}
{{% tag add %}}
{{% tag deprecated %}}
{{% tag fixed %}}
{{% tag removed %}}

Des badges de couleur en passant par les shortcodes sous Hugo

Le CSS

Se faciliter la vie avec le shortcode

KazukyAkayashi

Comments