Modèles de Vues de Contenu

Ces alternatives de vues de contenu sont particulièrement utiles dans les modèles de liste.

Voici les cas d’utilisation courants pour les vues de contenu :

• Vous souhaitez que le contenu de chaque type soit affiché sur la page d’accueil, mais uniquement avec des vues de résumés.
• Vous voulez seulement une liste à puces de votre contenu sur une page de liste de taxonomie. Les vues font que cela est très simple en déléguant le rendu de chaque type de contenu différent au contenu lui-même.

Créer une Vue de Contenu

Pour créer une nouvelle vue, créez un modèle dans chacun de vos différents répertoires de type de contenu avec le nom de la vue. L’exemple suivant contient une vue “li” et une vue “résumé” pour les types de contenu post et projet. Comme vous pouvez le voir, ceux-ci sont assis aux côtés du modèle de vue de contenu unique, single.html. Vous pouvez même fournir une vue spécifique pour un type donné et continuer à utiliser _default/single.html pour la vue principale.

  ▾ layouts/
    ▾ post/
        li.html
        single.html
        summary.html
    ▾ project/
        li.html
        single.html
        summary.html

Hugo prend également en charge un modèle de contenu par défaut à utiliser dans le cas où un modèle de vue de contenu spécifique n’a pas été fourni pour ce type. Les vues de contenu peuvent également être définies dans le répertoire _default et fonctionneront de la même manière que les modèles de listes et les modèles individuels qui finissent par se répercuter dans le dossier _default pour la question de l’ordre de recherche.

▾ layouts/
  ▾ _default/
      li.html
      single.html
      summary.html

Quel Modèle sera Rendu ?

Voici l’ordre de recherche pour les vues de contenu :

1. /layouts/<TYPE>/<VIEW>.html
2. /layouts/_default/<VIEW>.html
3. /themes/<THEME>/layouts/<TYPE>/<VIEW>.html
4. /themes/<THEME>/layouts/_default/<VIEW>.html

Exemple : Vue de Contenu Dans une Liste

L’exemple suivant démontre comment utiliser les vues de contenu dans vos modèles de liste.

list.html

Dans cet exemple, .Render est transmis au modèle pour appeler la fonction de rendu. .Render est une fonction spéciale qui indique au contenu de se transmettre avec le modèle de vue fourni comme premier argument. Dans ce cas, le modèle va rendre la vue summary.html suivante :

<main id="main">
  <div>
  <h1 id="title">{{ .Title }}</h1>
  {{ range .Data.Pages }}
    {{ .Render "summary"}}
  {{ end }}
  </div>
</main>

summary.html

Hugo passera l’objet entier de la page au modèle de vue summary.html suivant. (Voir Variables de page pour une liste complète.)

<article class="post">
  <header>
    <h2><a href='{{ .Permalink }}'> {{ .Title }}</a> </h2>
    <div class="post-meta">{{ .Date.Format "Mon, Jan 2, 2006" }} - {{ .FuzzyWordCount }} Words </div>
  </header>
  {{ .Summary }}
  <footer>
  <a href='{{ .Permalink }}'><nobr>Read more →</nobr></a>
  </footer>
</article>

li.html

Suite à l’exemple précédent, nous pouvons modifier notre fonction de rendu pour utiliser une vue li.html plus petite en modifiant l’argument dans l’appel à la fonction .Render (c’est-à-dire, {{ .Render "li" }}).

<li>
  <a href="{{ .Permalink }}">{{ .Title }}</a>
  <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
</li>