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 letag.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;
etpadding-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
.
.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 >}}