Shortcode sur Hugo
Les shortcodes Hugo ou raccourcis sont un moyen de nous simplifier la vie sur Hugo. Plus besoin d’écrire du code HTML complexe pour pouvoir utiliser des fonctionnalités.
“Je veux afficher une vidéo dans mon article” se transforme par {{< video url="" >}} qui est beaucoup plus facile à utiliser!
On peut soit en faire soi-même, soit utiliser directement ceux déjà existant.
Pour ce site, j’en ai créé six:
- bash : Affiche du code comme dans un terminal (et simplifie visuellement la partie qu’on tape de la partie générée).
- bulle : Affiche une info-bulle (tooltip) sur un texte et contient un lien interne vers plus d’informations.
- numberof : Me permet rapidement d’avoir un compteur de catégorie.
- urlbytag : Créer visuellement les tags du site.
- peertube : Affiche une vidéo Peertube dans les articles.
- slide : Affiche mes présentations dans les articles.
Les raccourcis ont été créé petit à petit en même temps que ce site. Certains feront sûrement doublons avec des shortcodes existant mais ce n’est pas grave, cela m’a permis d’apprendre énormément sur le code HTML et les sous modules de Git.
Tout est disponible sur mon répertoire sur Codeberg.
Configuration de hug.toml
Pour plus de détail, aller sur mon répertoire sur Codeberg.
Après avoir ajouté les sous module Git dans le répertoire de votre site internet Hugo, il ne faut pas oublier d’ajouter au fichier de configuration les raccourcis:
[module]
[[module.mounts]]
source = "shortcodes/hugo-shortcode/bash/layouts"
target = "layouts"
[[module.mounts]]
source = "shortcodes/hugo-shortcode/bulle/layouts"
target = "layouts"
[[module.mounts]]
source = "shortcodes/hugo-shortcode/numberof/layouts"
target = "layouts"
[[module.mounts]]
source = "shortcodes/hugo-shortcode/urlbytag/layouts"
target = "layouts"
[[module.mounts]]
source = "shortcodes/hugo-shortcode/peertube/layouts"
target = "layouts"
[[module.mounts]]
source = "shortcodes/hugo-shortcode/slide/layouts"
target = "layouts"
bash
Me permet d’afficher un terminal avec les commandes écrites et les réponses, s’il y en a.
{{< bash user="root" host="hugo" out="2-4,6" >}}
ls -l
total 8
-rw-r--r-- 1 user group 123 Jan 1 12:00 file1.txt
-rw-r--r-- 1 user group 456 Jan 1 12:00 file2.txt
echo "salut!"
salut!
{{< /bash >}}
Donnera à l’affichage:
ls -l
total 8
-rw-r--r-- 1 user group 123 Jan 1 12:00 file1.txt
-rw-r--r-- 1 user group 456 Jan 1 12:00 file2.txt
echo "salut!"
salut!
bulle
Affichera un texte lorsque l’on laisse le curseur de sa souris sur le mot ou la phrase bullé. Si un lien est présent, cliquer sur la bulle redirigera vers ce lien.
(le # permet de remonter en début d’article.)
Cette {{< bulle "bulle" "#" "Salut je suis le contenu de la bulle. Si tu cliques sur moi, je te redirige vers le début de la page!" >}}
est la même que
{{< bulle "cette bulle plus longue qui n'a pas de lien." "" "Salut je suis le contenu de la bulle. Tu ne peux pas cliquer sur moi!" >}}
Donnera à l’affichage:
Cette bulle
est la même que
cette bulle plus longue qui n'a pas de lien.numberof
Calcule le nombre d’article d’une catégorie spécifique.
Nombre d'articlue tuto: {{< numberof category="tuto" >}}
Donnera à l’affichage:
Nombre d’articlue tuto: 28
urlbytag
Affiche tout les tag d’une catégorie spécifique
{{< urlbytag category="tuto" >}}
Donnera à l’affichage:
peertube
Me permet d’intégrer des vidéos Peertube.
Je veux afficher la vidéo https://framatube.org/w/kkGMgK9ZtnKfYAgnEtQxbv, je tape:
{{< PeerTube framatube.org kkGMgK9ZtnKfYAgnEtQxbv >}}
Donnera à l’affichage:
slide
Affiche une présentation (présente sur le site) directement dans l’article.
{{< slide name="exemple_slide_beam_theme" title="Ma présentation" >}}
Donnera à l’affichage: