Fonctionnement de Hugo
Hugo va vérifier la présence de fichier dans les dossiers locaux du projet avant de chercher dans le dossier themes.
Il suffit donc de créer les dossiers et fichiers voulus pour surcharger les fichiers du thème.
Il possible de modifier n'importe quel élément d'un thème en sachant que les langages utilisés dans Hugo sont :
- html avec jinja pour les pages
- Css aves Sass pour la mise en forme
- YAML pour les fichiers de langue
- markdown (avec front matter)
Exemple
Prenons l'exmple d'un logo Gitlab dans le thèmes Paper. Par défaut, seul Github apparaît dans la liste.
En cherchant le mot Github dans les fichiers du thème, on voit que la liste des logos est indiquée dans le fichier baseof.html du dossier layouts/_default
...
<!-- social_list -->
{{- $social_params := slice "twitter" "github" "instagram" "linkedin" "mastodon"
"threads" "bluesky" "rss" -}}<!---->
{{- range $social_params -}}<!---->
{{- if isset site.Params . -}}<!---->
{{- $.Scratch.Add "social_list" (slice .) -}}<!---->
{{- end -}}<!---->
{{- end -}}<!---->
...
Il va donc suffire de créer les dossier, copier le fichier et le modifier :
mkdir layouts/_default
...
<!-- social_list -->
{{- $social_params := slice "twitter" "github" "gitlab" "instagram" "linkedin" "mastodon"
"threads" "bluesky" "rss" -}}<!---->
{{- range $social_params -}}<!---->
{{- if isset site.Params . -}}<!---->
{{- $.Scratch.Add "social_list" (slice .) -}}<!---->
{{- end -}}<!---->
{{- end -}}<!---->
...
Ensuite il reste à ajouter une image pour Gitlab. On peut trouver le logo en svg sur leur site.
Il faut créer un dossier nommé static (comme dans le thème d'origine) et déposer l'image dedans.
Comme c'est un fichier svg (vectoriel), on peut facilement l'éditer en modifiant le code svg du fichier ou avec InkScape pour l'adapter. Je l'ai modifié pour diminuer les marges.
Et voilà !
Pour aller plus loin
Il est possible de créer sois même son thème et définir l'ensemble de la mise en page mais aussi de créer des templates et la liste des fonctionnalités est assez vaste.
Ce sera le sujet d'autres posts sur Hugo.