🎨 Le CSS
Copié le code .css
dans un fichier, exemple hintbox.css
et que vous mettrez dans static/css/
.
/* Hint */
.hint-warn {
font-style: normal;
font-weight: 400;
text-rendering: optimizelegibility;
letter-spacing: normal;
font-family: "Roboto", sans-serif;
font-size: .9rem;
line-height: 1.44;
border-radius: 2px;
padding: 13px;
background: #FFF6DD none repeat scroll 0% 0%;
border: 1px solid rgb(255, 239, 170);
color: rgb(150, 105, 0);
margin-bottom: 12px;
margin-top: 12px;
}
.hint-warn a {
color: rgb(150, 105, 0);
font-weight: bold;
}
.hint-valid {
font-style: normal;
font-weight: 400;
text-rendering: optimizelegibility;
letter-spacing: normal;
font-family: "Roboto", sans-serif;
font-size: .9rem;
line-height: 1.44;
border-radius: 2px;
padding: 13px;
background: #CEF6D8 none repeat scroll 0% 0%;
border: 1px solid rgb(187, 235, 200);
color: rgb(29, 125, 63);
margin-bottom: 12px;
margin-top: 12px;
}
.hint-valid a {
color: rgb(29, 125, 63);
font-weight: bold;
}
.hint-danger {
font-style: normal;
font-weight: 400;
text-rendering: optimizelegibility;
letter-spacing: normal;
font-family: "Roboto", sans-serif;
font-size: .9rem;
line-height: 1.44;
border-radius: 2px;
padding: 13px;
background: #FAACA8 none repeat scroll 0% 0%;
border: 1px solid rgb(255, 221, 221);
color: rgb(206, 55, 55);
margin-bottom: 12px;
margin-top: 12px;
}
.hint-danger a {
color: rgb(206, 55, 55);
font-weight: bold;
}
.hint-info {
font-style: normal;
font-weight: 400;
text-rendering: optimizelegibility;
letter-spacing: normal;
font-family: "Roboto", sans-serif;
font-size: .9rem;
line-height: 1.44;
border-radius: 2px;
padding: 13px;
background: #aed6f1 none repeat scroll 0% 0%;
border: 1px solid rgb(93, 173, 226);
color: rgb(59, 107, 151);
margin-bottom: 12px;
margin-top: 12px;
}
.hint-info a {
color: rgb(59, 107, 151);
font-weight: bold;
}
Ensuite on va appeler ce fichier dans le <head>
:
<link rel="stylesheet" href="/css/hintbox.css">
🧾 Les shortcodes
Puis dans le dossier de votre site, créez le dossier shortcodes
dans layouts
(si celui-ci n'existe pas).
Copiez le code dans un fichier .html
, qu'on l'on nommera par exemple hint.html
.
<div class="hint-{{ .Get 0 }}">
{{ .Inner | markdownify }}
</div>
🏷 Appeler le shortcodes
Il ne vous restera plus qu'a faire appel au shortcode en nommant ce dernier et mettre votre texte entre les balises.
Vous pourrez utiliser le markdown dans votre texte.
{{< hint info/danger/warn/valid >}}
Votre texte.
{{< /hint >}}