Modèle Page Accueil

La page d’accueil est une Page et par conséquent elle dispose de toutes les variables de page et variables de site disponibles pour utilisation.

Ordre de Recherche du Modèle de Page d’Accueil

L’ordre de recherche pour le modèle de page d’accueil est le suivant :

1. /layouts/index.html
2. /layouts/_default/list.html
3. /themes/<THEME>/layouts/index.html
4. /themes/<THEME>/layouts/_default/list.html

Ajouter du Contenu et un Front Matter à la Page d’Accueil

La page d’accueil, similaire à d’autres pages de liste dans Hugo, accepte le contenu et le front matter à partir d’un fichier _index.md. Ce fichier devrait être à la racine de votre dossier content (c’est-à-dire content/_index.md). Vous pouvez ensuite ajouter des copies de body et de métadonnées à votre page d’accueil comme le feriez pour tout autre fichier de contenu.

Consultez le modèle de la page d’accueil ci-dessous ou Organisation de Contenu pour plus d’informations sur le rôle de _index.md dans l’ajout de contenu et d’un front matter pour lister les pages.

.Data.Pages sur la Page d’Accueil

En plus des variables de page standards, le modèle de page d’accueil a accès à tout le contenu du site via .Data.Pages.

Exemple de Modèle de Page d’Accueil

Voici un exemple d’un modèle de page d’accueil utilisant des modèles partiels, base et un fichier de contenu sur content/_index.md pour remplir les variables de page {{.Title}} et {{Content}}.

{{ define "main" }}
    <main aria-role="main">
      <header class="homepage-header">
        <h1>{{.Title}}</h1>
        {{ with .Params.subtitle }}
        <span class="subtitle">{{.}}</span>
        {{ end }}
      </header>
      <div class="homepage-content">
        <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
        {{.Content}}
      </div>
      <div>
        <!-- Note that .Data.Pages is the equivalent of .Site.Pages on the homepage template. -->
        {{ range first 10 .Data.Pages }}
            {{ .Render "summary"}}
        {{ end }}
      </div>
    </main>
{{ end }}