TEMPLATES MODÈLES

Listes de Contenu dans Hugo

Qu’est-ce qu’un Modèle de Page de Liste ?

Un modèle de page de liste est un modèle utilisé pour rendre plusieurs éléments de contenu dans une seule page HTML. L’exception à cette règle est la page d’accueil, qui est toujours une liste, mais dispose de son propre modèle dédié.

Hugo utilise le terme list dans son vrai sens ; c’est-à-dire une disposition séquentielle du contenu, en particulier dans l’ordre alphabétique ou numérique. Hugo utilise des modèles de liste sur n’importe quelle page HTML de sortie où le contenu est traditionnellement répertorié :

L’idée d’une page de liste provient du modèle mental hiérarchique du web et il est mieux démontré visuellement :

Image démontrant une carte de site hiérarchique d'un site web.

List : les Paramètres par Défaut

Modèles par Défaut

Puisque les listes de sections et les listes de taxonomie (N.B. pas les listes de termes de taxonomie) sont à la fois des listes en ce qui concerne leurs modèles, les deux ont la même terminaison par défaut _default/list.html ou themes/<THEME>/layouts/_default/list.html dans leur ordre de recherche. En outre, les listes de sections et les listes de taxonomie disposent de leurs propres modèles de liste par défaut dans _default :

Modèles de Section par Défaut

  1. layouts/_default/section.html
  2. layouts/_default/list.html

Modèles de Liste de Taxonomie par Défaut

  1. layouts/_default/taxonomy.html
  2. themes/<THEME>/layouts/_default/taxonomy.html

Ajouter du Contenu et un Front Matter aux Pages de Liste

Depuis la v0.18, tout dans Hugo est une Page. Ce qui veut dire que les pages de liste et la page d’accueil peuvent contenir des fichiers de contenu associés (c’est-à-dire _index.md) qui contiennent des métadonnées de page (c’est-à-dire le front matter) et le contenu.

Ce nouveau modèle vous permet d’inclure des informations de front matter spécifiques aux listes via .Params et signifie également que les modèles de liste (par exemple,layouts/_default/list.html) ont accès à toutes variables de page.

Exemple de Dossier Projet

Ce qui suit est un exemple d’un contenu de dossier typique de projet Hugo :

.
...
├── content
|   ├── post
|   |   ├── _index.md
|   |   ├── post-01.md
|   |   └── post-02.md
|   └── quote
|   |   ├── quote-01.md
|   |   └── quote-02.md
...

Dans l’exemple au-dessus, supposons que nous ayons ce qui suit dans content/post/_index.md:

content/post/_index.md
---
title: Mon Voyage Golang
date: 2017-03-23
publishdate: 2017-03-24
---

J'ai décidé de commencer à apprendre Golang en Juillet 2017.

Suivez mon voyage sur ce nouveau blog.

Vous pouvez désormais accéder à ce contenu des _index.md dans votre modèle de liste :

layouts/_default/list.html
{{ define "main" }}
<main>
    <article>
        <header>
            <h1>{{.Title}}</h1>
        </header>
        <!-- "{{.Content}}" extrait le contenu markdown du _index.md correspondant -->
        {{.Content}}
    </article>
    <ul>
    <!-- Ranges through content/post/*.md -->
    {{ range .Data.Pages }}
        <li>
            <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a
        </li>
    {{ end }}
    </ul>
</main>
{{ end }}

Ceci au-dessus sortira le HTML qui suit :

yoursite.com/post/index.html
<!--top of your baseof code-->
<main>
    <article>
        <header>
            <h1>Mon Voyage Golang</h1>
        </header>
        <p>J'ai décidé de commencer à apprendre Golang en Juillet 2017.</p>
        <p>Suivez mon voyage sur ce nouveau blog.</p>
    </article>
    <ul>
        <li><a href="/post/post-01/">Post 1</a></li>
        <li><a href="/post/post-02/">Post 2</a></li>
    </ul>
</main>
<!--bottom of your baseof-->

Liste de Pages Sans _index.md

Vous ne devez pas créer un fichier _index.md pour chaque liste de pages (c-a-d. section, taxonomie, termes de taxonomie, etc) ou la page d’accueil. Si Hugo ne trouve pas un _index.md dans la section de contenu respective au moment de produire un modèle de liste, la page sera créée sans le {{.Content}} et seulement avec les valeurs par défaut pour le .Title etc.

L’utilisation de ce même modèle layouts/_default/list.html et l’application à la section quotes ci-dessus rendra la sortie suivante. Notez que quotes n’a pas de fichier_index.md à extraire de :

yoursite.com/quote/index.html
<!--baseof-->
<main>
    <article>
        <header>
        <!-- Hugo assumes that .Title is the name of the section since there is no _index.md content file from which to pull a "title:" field -->
            <h1>Quotes</h1>
        </header>
    </article>
    <ul>
        <li><a href="https://yoursite.com/quote/quotes-01/">Quote 1</a></li>
        <li><a href="https://yoursite.com/quote/quotes-02/">Quote 2</a></li>
    </ul>
</main>
<!--baseof-->

Exemple de Modèles de Liste

Modèle de Section

Ce modèle de liste a été légèrement modifié à partir d’un modèle utilisé à l’origine dans spf13.com. Il utilise les modèles partiels pour le chrome de la page rendue plutôt que d’utiliser un modèle de base. Les exemples qui suivent utilisent également les modèles de vue de contenu li.html ou summary.html.

layouts/section/post.html
{{ partial "header.html" . }}
{{ partial "subheader.html" . }}
<main>
  <div>
   <h1>{{ .Title }}</h1>
        <ul>
        <!-- Renders the li.html content view for each content/post/*.md -->
            {{ range .Data.Pages }}
                {{ .Render "li"}}
            {{ end }}
        </ul>
  </div>
</main>
{{ partial "footer.html" . }}

Modèle de Taxonomie

layouts/_default/taxonomies.html
{{ define "main" }}
<main>
  <div>
   <h1>{{ .Title }}</h1>
   <!-- ranges through each of the content files associated with a particular taxonomy term and renders the summary.html content view -->
    {{ range .Data.Pages }}
        {{ .Render "summary"}}
    {{ end }}
  </div>
</main>
{{ end }}

Ordre du Contenu

Les listes Hugo rendent le contenu en fonction des métadonnées que vous fournissez dans le front matter. En plus des valeurs par défaut correctes, Hugo est également livré avec de multiples méthodes pour faire un travail rapide de tri du contenu dans les modèles de liste :

Liste Ordonnée par Défaut : Weight > Date

layouts/partials/default-order.html
<ul>
    {{ range .Data.Pages }}
        <li>
            <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
            <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
        </li>
    {{ end }}
</ul>

Par Weight

layouts/partials/by-weight.html
<ul>
    {{ range .Data.Pages.ByWeight }}
        <li>
            <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
            <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
        </li>
    {{ end }}
</ul>

Par Date

layouts/partials/by-date.html
<ul>
    <!-- ordonne le contenu selon le champ "date" dans le front matter -->
    {{ range .Data.Pages.ByDate }}
        <li>
            <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
            <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
        </li>
    {{ end }}
</ul>

Par Date de Publication

layouts/partials/by-publish-date.html
<ul>
    <!-- orders content according to the "publishdate" field in front matter -->
    {{ range .Data.Pages.ByPublishDate }}
        <li>
            <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
            <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
        </li>
    {{ end }}
</ul>

Par Date d’Expiration

layouts/partials/by-expiry-date.html
<ul>
    {{ range .Data.Pages.ByExpiryDate }}
        <li>
            <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
            <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
        </li>
    {{ end }}
</ul>

Par Date de Dernière Modification

layouts/partials/by-last-mod.html
<ul>
    <!-- orders content according to the "lastmod" field in front matter -->
    {{ range .Data.Pages.ByLastmod }}
        <li>
            <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
            <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
        </li>
    {{ end }}
</ul>

Par Longueur

layouts/partials/by-length.html
<ul>
    <!-- orders content according to content length in ascending order (i.e., the shortest content will be listed first) -->
    {{ range .Data.Pages.ByLength }}
        <li>
            <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
            <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
        </li>
    {{ end }}
</ul>

Par Titre

layouts/partials/by-title.html
<ul>
    <!-- ranges through content in ascending order according to the "title" field set in front matter -->
    {{ range .Data.Pages.ByTitle }}
        <li>
            <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
            <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
        </li>
    {{ end }}
</ul>

Par Titre du Lien

Par Paramètre

Ordre basé sur le paramètre front matter spécifié. Le contenu qui n’a pas le champ de front matter spécifié utilisera les paramètres .Site.Params du site par défaut. Si le paramètre n’est pas trouvé dans certaines entrées, ces entrées apparaîtront ensemble à la fin du tri.

layouts/partials/by-rating.html
<!-- Ranges through content according to the "rating" field set in front matter -->
{{ range (.Data.Pages.ByParam "rating") }}
  <!-- ... -->
{{ end }}

Si le champ ciblé du front matter est embarqué dans un autre champ, vous pouvez accéder au chang en utilisant la notation point.

layouts/partials/by-nested-param.html
{{ range (.Data.Pages.ByParam "author.last_name") }}
  <!-- ... -->
{{ end }}

Ordre Inversé

L’ordre inversé peut s’appliquer à n’importe laquelle des méthodes au-dessus. Voici des exemples d’utilisation de ByDate :

layouts/partials/by-date-reverse.html
<ul>
    {{ range .Data.Pages.ByDate.Reverse }}
        <li>
            <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
            <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
        </li>
    {{ end }}
</ul>

Groupement de Contenu

Hugo fournit quelques fonctions pour grouper les pages par Section, Type, Date, etc.

Par Champ Page

layouts/partials/by-page-field.html
<!-- Groups content according to content section. The ".Key" in this instance will be the section's title. -->
{{ range .Data.Pages.GroupBy "Section" }}
<h3>{{ .Key }}</h3>
<ul>
    {{ range .Pages }}
    <li>
    <a href="{{ .Permalink }}">{{ .Title }}</a>
    <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
    </li>
    {{ end }}
</ul>
{{ end }}

Dans l’exemple ci-dessus, vous pouvez vouloir {{.Title}} pour indiquer le champ title que vous avez ajouté à votre fichier _index.md à la place. Vous pouvez accéder à cette valeur à l’aide de la fonction .GetPage :

layouts/partials/by-page-field.html
<!-- Groups content according to content section.-->
{{ range .Data.Pages.GroupBy "Section" }}
<!-- Checks for existence of _index.md for a section; if available, pulls from "title" in front matter -->
{{ with $.Site.GetPage "section" .Key }}
<h3>{{.Title}}</h3>
{{ else }}
<!-- If no _index.md is available, ".Key" defaults to the section title and filters to title casing -->
<h3>{{ .Key | title }}</h3>
{{ end }}
<ul>
    {{ range .Pages }}
    <li>
    <a href="{{ .Permalink }}">{{ .Title }}</a>
    <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
    </li>
    {{ end }}
</ul>
{{ end }}

Par Date

layouts/partials/by-page-date.html
<!-- Groups content by month according to the "date" field in front matter -->
{{ range .Data.Pages.GroupByDate "2006-01" }}
<h3>{{ .Key }}</h3>
<ul>
    {{ range .Pages }}
    <li>
    <a href="{{ .Permalink }}">{{ .Title }}</a>
    <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
    </li>
    {{ end }}
</ul>
{{ end }}

Par Date de Publication

layouts/partials/by-page-publish-date.html
<!-- Groups content by month according to the "publishdate" field in front matter -->
{{ range .Data.Pages.GroupByPublishDate "2006-01" }}
<h3>{{ .Key }}</h3>
<ul>
    {{ range .Pages }}
    <li>
    <a href="{{ .Permalink }}">{{ .Title }}</a>
    <div class="meta">{{ .PublishDate.Format "Mon, Jan 2, 2006" }}</div>
    </li>
    {{ end }}
</ul>
{{ end }}

Par Paramètre de Page

layouts/partials/by-page-param.html
<!-- Groups content according to the "param_key" field in front matter -->
{{ range .Data.Pages.GroupByParam "param_key" }}
<h3>{{ .Key }}</h3>
<ul>
    {{ range .Pages }}
    <li>
    <a href="{{ .Permalink }}">{{ .Title }}</a>
    <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
    </li>
    {{ end }}
</ul>
{{ end }}

Par Paramètre Page dans le Format de Date

Le modèle suivant pousse un peu plus loin le groupement par date et utilise la chaîne de mise en page de Golang. Voir la fonction Format pour plus d’exemples d’utilisation de la chaîne de mise en page de Golang pour formater les dates dans Hugo.

layouts/partials/by-page-param-as-date.html
<!-- Groups content by month according to the "param_key" field in front matter -->
{{ range .Data.Pages.GroupByParamDate "param_key" "2006-01" }}
<h3>{{ .Key }}</h3>
<ul>
    {{ range .Pages }}
    <li>
    <a href="{{ .Permalink }}">{{ .Title }}</a>
    <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
    </li>
    {{ end }}
</ul>
{{ end }}

Ordre Clé Inversé

L’ordre des groupes est effectué par des clés dans un ordre alphanumérique (A-Z, 1-100) et dans un ordre chronologique inverse pour les dates (c’est-à-dire avec la plus récente en premier).

Bien qu’il s’agisse de valeurs par défaut logiques, elles ne sont pas toujours l’ordre souhaité. Il existe deux syntaxes différentes pour modifier les commandes par défaut de tri pour les groupes, qui fonctionnent toutes les deux de la même manière.

1. Ajouter la Méthode Reverse

{{ range (.Data.Pages.GroupBy "Section").Reverse }}

{{ range (.Data.Pages.GroupByDate "2006-01").Reverse }}

2. Fournir la Direction Alternative

{{ range .Data.Pages.GroupByDate "2006-01" "asc" }}

{{ range .Data.Pages.GroupBy "Section" "desc" }}

Ordonner Dans les Groupes

Étant donné que le groupage renvoie une {{.Key}} et une tranche de pages, toutes les méthodes de tri listées ci-dessus sont disponibles.

Voici la commande pour l’exemple qui suit :

  1. Le contenu est regroupé par mois selon le champ date dans le front matter.
  2. Les groupes sont classés par ordre croissant (c’est-à-dire les groupes les plus anciens d’abord)
  3. Les pages dans chaque groupe respectif sont classées par ordre alphabétique selon le title.
layouts/partials/by-group-by-page.html
{{ range .Data.Pages.GroupByDate "2006-01" "asc" }}
<h3>{{ .Key }}</h3>
<ul>
    {{ range .Pages.ByTitle }}
    <li>
    <a href="{{ .Permalink }}">{{ .Title }}</a>
    <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
    </li>
    {{ end }}
</ul>
{{ end }}

Filtre et Limite des Listes

Parfois, vous souhaitez seulement lister un sous-ensemble du contenu disponible. Un commun est d’afficher seulement “Posts” sur la page d’accueil du blog. Vous pouvez l’accomplir avec la fonction where.

where

where fonctionne de la même manière que le mot-clé where dans SQL. Il sélectionne tous les éléments de la liste ou de la tranche qui correspondent au champ et à la valeur fournis. where prend trois arguments :

  1. array ou slice of maps or structs
  2. key ou field name
  3. match value
layouts/_default/.html
{{ range where .Data.Pages "Section" "post" }}
   {{ .Content }}
{{ end }}

Vous pouvez voir plus d’exemples dans la documentation des fonctions pour where.

first

first fonctionne de la même manière que le mot clé [limit dans SQL][limitedkeyword]. Il réduit le tableau uniquement aux éléments first N. Il prend le tableau et le nombre d’éléments comme entrée. first prend deux arguments :

  1. array ou slice of maps or structs
  2. nombre d'éléments
layout/_default/section.html
{{ range first 10 .Data.Pages }}
  {{ .Render "summary" }}
{{ end }}

first et where Ensemble

Utilsier first et where ensemble peut être très puissant :

first-and-where-together.html
<!-- Classe le contenu dans la section "posts" par le champ  "title" et puis ne l'étend que pour les 5 premiers posts -->
{{ range first 5 (where .Data.Pages "Section" "post").ByTitle }}
   {{ .Content }}
{{ end }}
La page “Listes de Contenu dans Hugo” a été mise à jour le
Améliorez cette page