TEMPLATES FUNDAMENTALS FONDAMENTAUX MODÈLES

Modèles de Base et Blocs

Le mot-clé block vous permet de définir l’enveloppe externe de vos pages, d’un ou plusieurs modèles maîtres et ensuite de les remplir ou d’écraser des portions si nécessaire.

Ordre de Recherche du Modèle de Base

L’ordre de recherche pour les modèles de base se fait comme suit :

  1. /layouts/section/<TYPE>-baseof.html
  2. /themes/<THEME>/layouts/section/<TYPE>-baseof.html
  3. /layouts/<TYPE>/baseof.html
  4. /themes/<THEME>/layouts/<TYPE>/baseof.html
  5. /layouts/section/baseof.html
  6. /themes/<THEME>/layouts/section/baseof.html
  7. /layouts/_default/post-baseof.html
  8. /themes/<THEME>/layouts/_default/post-baseof.html
  9. /layouts/_default/baseof.html
  10. /themes/<THEME>/layouts/_default/baseof.html

Les variables sont indiquées par un texte en majuscule défini dans <>. Notez que le comportement par défaut de Hugo est pour le type d’hériter de section sauf indication contraire.

Exemple d’Ordre de Recherche du Modèle de Base

À titre d’exemple, supposons que votre site utilise un thème appelé “mytheme” lors du rendu de la liste des sections pour une section post. Hugo choisit layout/section/post.html comme modèle pour restituer la section. Le bloc {{define}} dans ce modèle indique à Hugo que le modèle est une extension d’un modèle de base.

Voici l’ordre de recherche pour le modèle de base post :

  1. /layouts/section/post-baseof.html
  2. /themes/mytheme/layouts/section/post-baseof.html
  3. /layouts/post/baseof.html
  4. /themes/mytheme/layouts/post/baseof.html
  5. /layouts/section/baseof.html
  6. /themes/mytheme/layouts/section/baseof.html
  7. /layouts/_default/post-baseof.html
  8. /themes/mytheme/layouts/_default/post-baseof.html
  9. /layouts/_default/baseof.html
  10. /themes/mytheme/layouts/_default/baseof.html

Définir le Modèle de Base

Ce qui suit définit un modèle de base simple sur _default/baseof.html. Parce que c’est le modèle par défaut, c’est l’enveloppe à partir de laquelle vos pages seront produites à moins que vous ne spécifiez une autre *baseof.html plus proche du début de l’ordre de recherche.

baseof.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ block "title" . }}
      <!-- Blocks may include default content. -->
      {{ .Site.Title }}
    {{ end }}</title>
  </head>
  <body>
    <!-- Code that all your templates share, like a header -->
    {{ block "main" . }}
      <!-- The part of the page that begins to differ between templates -->
    {{ end }}
    {{ block "footer" . }}
    <!-- More shared code, perhaps a footer but that can be overridden if need be in  -->
    {{ end }}
  </body>
</html>

Écraser le Modèle de Base

À partir du modèle de base ci-dessus, vous pouvez définir un modèle de liste par défaut. Le modèle de liste par défaut héritera de tout le code défini ci-dessus et pourra ensuite implémenter son propre bloc "main" provenant de :

layouts/_default/list.html
{{ define "main" }}
  <h1>Posts</h1>
  {{ range .Data.Pages }}
    <article>
      <h2>{{ .Title }}</h2>
      {{ .Content }}
    </article>
  {{ end }}
{{ end }}

Ceci remplace les contenus de notre bloc (vide à la base) “main” avec quelque chose d’utile pour le modèle liste. Dans ce cas, nous n’avons pas défini un bloc "title", par conséquent les contenus de notre modèle de base demeurent inchangés dans les listes.

Voici un exemple pour vous montrer comment vous pouvez remplacer à la fois les zones de bloc "main" et "title" à partir du modèle de base avec un code unique vers votre modèle de page unique par défaut :

layouts/_default/single.html
{{ define "title" }}
  <!-- Ceci annulera l'ensemble des valeurs par defaut reglees dans baseof.html; i.e., "{{.Site.Title}}" dans l'exemple original -->
  {{ .Title }} &ndash; {{ .Site.Title }}
{{ end }}
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
{{ end }}
“Modèles de Base et Blocs” a été mise à jour le : July 19, 2017
Améliorez cette page