Badges de couleurs sous Hugo

Si vous voulez aller à l’essentiel sans tout mon blabla explicatif, le tout est disponible sur : Gitlab, Github et Gitea.

Mise à jour du shortcode et du tag.css (exemple avec des emojis) et possibilité de choisir le texte à mettre:

🩹 Fixed problème de fonctionnement (lié au code du shortcode).
🎊 Update le code du shortcode tag.html et le tag.css change (voir plus bas).
🧻 Remove text-transform: capitalize; pour le texte .text-light.
🎉 Add padding-top: 0.3rem; à la class .label.label-rounded.
🎉 Add font-family: "Monospace", Courier New, sans-serif; pour le texte.
🔩 Changed padding-left:.4rem; et padding-right:.4rem; passe tout les deux à .6rem.
💣 Warning
👻 Deprecated

Le shortcode est désormais appelé de cette manière la :

{{< tag add >}}🎉 Add{{< /tag >}}

🎨 Le CSS

Commençons par écrire notre bout de CSS que nous nommerons tag.css et que nous mettrons dans le dossier /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:.6rem;
 padding-right:.6rem;
 padding-top: 0.3rem;
}

.text-light {
 color: #fff;
 font-size: .8rem;
 font-family: "Monospace", Courier New, sans-serif;
}

.tag-changed {
 background:#315abf;
}

.tag-add {
background: #3cb679;
}

.tag-fixed {
 background:#986daa;
}

.tag-deprecated {
 background:#e49866;
}

.tag-removed {
 background:#df1f31;
}

.tag-update {
 background:#298f9b;
}

.tag-warning {
 background:#f3890a;
}

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.

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 /layouts/shortcodes/ (si le dossier /shortcodes n’existe pas créez le) et y coller ce qui suit :

<span class="label label-rounded text-light tag-{{ .Get 0 }}">{{ .Inner | markdownify }}</span>

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 du shortcode :

{{< tag add/fixed/update/... >}} votre_texte {{< /tag >}}

Kazuky Akayashi/Badges de couleurs sous Hugo

🎨 Le CSS

🏷 Se faciliter la vie avec le shortcode