Kazuky Akayashi / Hint box sous Hugo
Created 2020-02-14 Modifyed 2020-02-14

350 Words

Des Hint box sous Hugo le tout via les shortcodes.

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