Nicolas Friedli

Plan de site récursif avec Hugo

Comme pour les fils d’Ariane, il est très simple de faire appel à la récursivité. Ainsi, il est possible d’afficher un plan complet du site, quelles que soient son nombre de pages et la profondeur de sa hiérarchie.

Extrait récursif

À un endroit quelconque du site:

Le bout de code qui s’appelle lui-même – c’est le principe d’un algorithme récursif – est donc:

{{ define "souspages" }}
{{ if .Pages }}
<ul>
    {{ range .Pages}}
    <li><a href="{{ .Permalink }}">{{ .Title }}</a>
        {{ template "souspages" . }}
    </li>
    {{ end }}
</ul>
{{ end }}
{{ end }}

Plan complet

Maintenant que le code récursif est prêt, il reste à «amorcer» le plan en partant des pages de la racine du site. Chez Hugo, une section est un répertoire à la racine. Ma préférence: commencer par lister les sections du site.

<ul>
{{ range .Site.Sections }}
    <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>

Sans oublier d’ajouter l’appel récursif préparé précédemment:

<ul>
{{ range .Site.Sections }}
    <li><a href="{{ .Permalink }}">{{ .Title }}</a>
        {{ template "souspages" . }}</li>
{{ end }}
</ul>

Par choix, je ne liste pas les pages situées à la racine dans le plan du site.

Mise en pratique

Un plan récursif dans un fichier du répertoire layouts serait donc:

{{ define "souspages" }}
{{ if .Pages }}
<ul>
    {{ range .Pages}}
    <li><a href="{{ .Permalink }}">{{ .Title }}</a>
        {{ template "souspages" . }}
    </li>
    {{ end }}
</ul>
{{ end }}
{{ end }}

<ul>
{{ range .Site.Sections }}
    <li><a href="{{ .Permalink }}">{{ .Title }}</a>
        {{ template "souspages" . }}</li>
{{ end }}
</ul>

Comme pour les fils d’Ariane, il est possible de procéder par un appel à des fichiers partiels (partials) plutôt qu’en passant par la fonction define. Pour un usage unique, je préfère tout mettre dans le même fichier et ne pas m’embarasser d’un fichier partiel.

/ Nicolas Friedli