Nicolas Friedli

consultant web indépendant

Outils pour utilisateurs

Outils du site


sites-statiques:hugo:fil-ariane

Fil d'Ariane

Le fil d’Ariane (ou breadcrumb) est une question récurrente sur les forums et blogs consacrés à Hugo. Je propose ici une solution fonctionnelle pour tous les sites construits de manière hiérarchique.

Solution avec partial

Dans le répertoire /layout/partials/, un fichier breadcrumb.html:

{{ with .Parent }}
  {{ partial "breadcrumb.html" . }}
  <a href="{{ .RelPermalink }}">{{ .Title }}</a> >
{{ end }}

C’est à la ligne 2 que se passe ma magie: le code s’appelle lui-même. À vous d’ajouter le séparateur qui vous convient (ici: >).

Le fil d’Ariane est appelé dans les pages de templates par:

{{ partial "breadcrumb" . }} {{ .Title }}

Solution interne

Il est aussi possible d’intégrer le fil d’Ariane directement dans le template. Ce peut être utile s’il n’est pas utilisé plusieurs fois:

{{ define "breadcrumb" }}
  {{ with .Parent }}
    {{ template "breadcrumb" . }}
    <a href="{{ .RelPermalink }}">{{ .Title }}</a> >
  {{ end }}
{{ end }}

{{ template "breadcrumb" . }} {{.Title}}

Comme dans l’exemple précédent, il faut changer si nécessaire le séparateur (aussi: >).

Améliorations

Ce sont des exemples complets fonctionnels, mais certainement insuffisants. Voici 2 possibilités d’amélioration.

Affichage de la page d’accueil

De manière récursive, ces fils d’Ariane remontent jusqu’à la page d’accueil du site. On pourrait ajouter une condition à la place du titre, par exemple:

{{ if .IsHome }}Accueil{{ else }}{{.Title}}{{ end }}

ou

{{ if .IsHome }}🏠{{ else }}{{.Title}}{{ end }}

Gestion du cache à la compilation

L’appel des «bouts» de code par partial peuvent être mis en cache dans certaines situations. Par exemple ainsi (voir le paramètre .Section de partialCached):

{{ with .Parent }}
  {{ partialCached "breadcrumb.html" . .Section }}
  <a href="{{ .RelPermalink }}">{{ .Title }}</a> >
{{ end }}

Pour vérifier l’utilité du cache, il faut lancer Hugo ainsi et comparer le nombre de compilations effectuées:

hugo --templateMetrics --templateMetricsHints

Résultat (simplifié):

cache potential count template
0 42 _default/single.html
74 57 partials/ld-breadcrumb.html
0 5 _default/list.html

Il y a bien une possibilité d’économiser du temps de calcul avec les fils d’Ariane partiels.

sites-statiques/hugo/fil-ariane.txt · Dernière modification: 30.04.2022 par Nicolas Friedli