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.

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

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: >).

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

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

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é):

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