Page personalisée dans Hugo

Table des matières

Parfois, vous voulez juste utiliser un modèle unique pour un message ou une liste.

Dans hugo, il y a un ordre pour la création d’un modèle dans lequel les fichiers sont chargés.

Pour créer la page d’accueil, Hugo va chercher les fichiers dans les dossiers en suivant un ordre chronologique:

layouts/index.html.html
layouts/home.html.html
layouts/list.html.html
layouts/index.html
Layouts/home.html

Mais vous pouvez également spécifier le modèle exact que vous voulez utiliser.

Hugo permet de personnaliser l’apparence d’une page grâce aux layouts. Ces derniers sont définis dans le dossier layouts et associés aux fichiers Markdown via le front matter.

Créer une nouvelle page

Comme pour une page standard, utilisez la commande suivante pour créer un fichier Markdown :

$ hugo new pages/article/index.md

Ou bien le créer à la main.

Pour une question d’organisation, je place mes pages spéciales dans le dossier content/pages.

Ajouter un layout personnalisé dans le front matter

Dans le fichier content/pages/article/index.md, ajoutez ou modifiez le champ layout dans l’en-tête front matter :

---
title: "Mon Article Personnalisé"
date: 2025-01-01
layout: "pageenplus"
draft: false
---

Le champ layout indique à Hugo d’utiliser le fichier de layout nommé pageenplus.html que l’ont va créer.

Créer le layout personnalisé

Les layouts sont situés dans le dossier layouts. Créez un fichier correspondant au layout défini, par exemple :

/theme/votretheme/layouts/pages/pageenplus.html

Ajoutez-y le code HTML ou les templates Hugo que vous souhaitez. Par exemple :

<!DOCTYPE html>
<html>
  <head>
    <title>{{ .Title }}</title>
  </head>
  <body>
    <header>
      <h1>Bienvenue dans une page personnalisé</h1>
    </header>
    <main>
      {{ .Content }}
    </main>
    <footer>
      <p>Publié le {{ .Date.Format "02 Janvier 2006" }}</p>
    </footer>
  </body>
</html>

Prévisualiser la page

Lancez le serveur local pour vérifier l’apparence de la page :

$ hugo server

Naviguez vers l’URL locale http://localhost:1313/page/monarticle pour voir la page avec le layout appliqué.

Sinon sur le site, vous tombez sur https://schrek.fr/pages/article/

Grâce aux pages personnalisés, Hugo permet une flexibilité exceptionnelle. Vous pouvez adapter l’apparence de chaque page ou section en fonction de vos besoins, tout en conservant une structure de contenu simple.