Comment utiliser les modèles intégrés à Hugo : un guide étape par étape

Publié: 2024-11-27

Hugo est un puissant générateur de sites statiques qui permet aux développeurs et aux créateurs de contenu de créer rapidement des sites Web rapides et évolutifs. L'une des principales fonctionnalités de Hugo est son système de modèles, qui aide à structurer le contenu et à personnaliser l'apparence du site. Si vous êtes nouveau sur Hugo ou si vous souhaitez exploiter plus efficacement ses capacités de création de modèles, ce guide étape par étape vous montrera comment utiliser les modèles intégrés à Hugo.

Que sont les modèles dans Hugo ?

Les modèles dans Hugo sont des fichiers qui définissent la manière dont le contenu de votre site sera rendu. Ils sont constitués de code HTML, CSS et spécifique à Hugo, vous permettant de personnaliser la mise en page de votre site Web. Les modèles peuvent être utilisés à diverses fins, telles que la création d'en-têtes, de pieds de page, de pages uniques, de listes, etc.

Comprendre la case à cocher du problème ne s'affiche pas

Hugo dispose de modèles intégrés qui font partie de sa structure thématique et vous permet également de créer des modèles personnalisés pour une plus grande flexibilité. Ces modèles sont appliqués automatiquement en fonction du type de contenu, de la structure de l'URL et d'autres variables, ce qui facilite la gestion de sites complexes.

Étape 1 : Installez Hugo et créez un nouveau site

Avant de plonger dans les modèles, vous devez d'abord installer Hugo et configurer votre site. Voici comment procéder :

Installer Hugo :
- Si vous n'avez pas installé Hugo, suivez le guide d'installation officiel de votre système d'exploitation : Installer Hugo.
Créer un nouveau site Hugo :
- Exécutez la commande suivante dans votre terminal pour créer un nouveau site :
```
 hugo new site mysite
```
- Cela créera un nouveau répertoire appelé mysite avec la structure de fichiers de base de votre projet Hugo.

Étape 2 : ajouter un thème

Hugo travaille avec des thèmes pour gérer la façon dont le contenu est affiché. Vous pouvez soit utiliser un thème existant de Hugo Themes, soit en créer un personnalisé. Pour plus de simplicité, utilisons un thème de la bibliothèque de thèmes Hugo.

Ajouter un thème :
- Vous pouvez ajouter un thème en le clonant dans votre répertoire themes/ . Par exemple, utilisons le thème « Ananke » :
```
 git init git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
```
Configurez le thème :
- Ouvrez votre fichier config.toml et définissez le thème :
```
 theme = "ananke"
```

Étape 3 : Comprendre la structure du modèle Hugo

Le système de modèles de Hugo est basé sur le langage de modèles Go. Les modèles sont divisés en plusieurs catégories en fonction de leur objectif :

Modèles de base : ce sont les modèles généraux qui enveloppent le contenu. Ils incluent souvent des sections communes telles que les en-têtes, les pieds de page et la navigation.
Modèles de contenu : ceux-ci définissent la manière dont les types de contenu individuels (par exemple, articles de blog, pages, sections) sont affichés.
Modèles de liste : ces modèles contrôlent la manière dont les groupes de contenu sont présentés (par exemple, une liste d'articles de blog).
Modèles partiels : il s'agit d'extraits réutilisables plus petits (par exemple, barre de navigation ou pied de page) qui sont inclus dans les modèles principaux.

Répertoires de modèles courants

layouts/ : Contient tous les fichiers de mise en page comme index.html , single.html , etc.
themes/ : contient des modèles fournis avec le thème que vous avez choisi.
content/ : stocke vos fichiers de contenu (généralement écrits en Markdown).

Étape 4 : Créer un modèle

Voyons comment créer et modifier un modèle pour une page.

Créer un nouveau fichier de contenu :
- Pour créer une nouvelle page (par exemple, un article de blog), utilisez la commande suivante :
```
 hugo new posts/my-first-post.md
```
- Cela crée un nouveau fichier Markdown dans content/posts/ avec des éléments préliminaires (YAML ou TOML) et un espace réservé pour votre contenu.
Créer un modèle pour des pages uniques :
- Dans le répertoire layouts , créez un fichier nommé single.html dans layouts/_default/ . Cela contrôlera la manière dont les pages de contenu individuelles sont affichées.
```
  <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <article> {{ .Content }} </article> </main> </body> </html>
```
- Ce modèle affichera le titre et le contenu de toute page que vous créez.

Créer un modèle de liste :

De même, vous pouvez créer un modèle de liste pour afficher plusieurs éléments de contenu (par exemple, une liste de publications). Créez un list.html dans le répertoire layouts/_default/ .

 <!-- layouts/_default/list.html --> <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <ul> {{ range .Pages }} <li><a href="{{ .Permalink }}">{{ .Title }}</a></li> {{ end }} </ul> </main> </body> </html>

Étape 5 : personnalisation des modèles

Vous pouvez améliorer vos modèles grâce au riche ensemble de fonctions de création de modèles de Hugo. Par exemple, vous pouvez inclure du CSS personnalisé, une boucle sur des variables ou un format de dates :

Ajout de CSS : Vous pouvez lier un fichier CSS à votre modèle :
```
 <link rel="stylesheet" href="{{ "styles.css" | relURL }}">
```
Formater les dates : Utilisez la fonction date pour afficher les dates dans un format spécifique :
```
 <p>Published on: {{ .Date.Format "January 2, 2006" }}</p>
```

Étape 6 : Servez et prévisualisez votre site

Une fois vos modèles en place et vous avez ajouté du contenu, vous pouvez prévisualiser votre site localement :

 hugo server

Accédez à http://localhost:1313 pour afficher votre site.

FAQ sur les modèles Hugo

1. A quoi sert le répertoire « layouts » dans Hugo ?

Le répertoire layouts est l'endroit où vous stockez tous vos fichiers de modèles dans Hugo. Il est utilisé pour définir la manière dont différents types de contenu (par exemple, articles, pages, listes) seront affichés sur le front-end de votre site. Les modèles sont organisés par type et par emplacement, par exemple single.html pour les pages de contenu individuelles et list.html pour les listes de contenu.

2. Puis-je créer mes propres modèles personnalisés dans Hugo ?

Oui, vous pouvez créer des modèles personnalisés dans Hugo. En plaçant vos modèles dans le répertoire layouts , vous pouvez créer des modèles spécialisés pour des types de contenu, des sections ou même des affichages de contenu uniques. Hugo vous permet également de remplacer les modèles par défaut du thème choisi.

3. Comment Hugo gère-t-il les fichiers de contenu et les modèles ?

Hugo utilise un système dans lequel les fichiers de contenu (écrits en Markdown ou dans d'autres formats) sont associés à des modèles pour définir leur affichage. Lorsque vous créez du contenu (par exemple, un article de blog), Hugo recherche automatiquement un modèle approprié (par exemple, single.html ) et restitue le contenu à l'aide de ce modèle. Hugo prend également en charge l'organisation du contenu en sections, qui peuvent utiliser différents modèles.

4. Que sont les modèles partiels dans Hugo ?

Les modèles partiels sont des composants réutilisables ou des extraits de code HTML qui peuvent être inclus dans d'autres modèles. Par exemple, un en-tête, un pied de page ou un menu de navigation peuvent être créés sous forme de partiels et inclus dans divers modèles à l'aide du {{ partial "header.html" . }} syntaxe. Cela aide à maintenir les principes DRY (Don't Repeat Yourself) et rend le site plus facile à gérer.

5. Puis-je utiliser les modèles Hugo avec un thème personnalisé ?

Oui, vous pouvez utiliser des thèmes personnalisés dans Hugo. Vous pouvez soit créer votre propre thème, soit en utiliser un existant dans le référentiel de thèmes Hugo. Si vous utilisez un thème existant, vous pouvez remplacer ses modèles en ajoutant vos modèles personnalisés dans le répertoire layouts , ce qui vous permet de modifier des parties spécifiques du thème sans modifier la structure entière.

En suivant ces étapes et en comprenant le système de modèles de Hugo, vous pouvez créer des sites Web puissants et personnalisables. Que vous utilisiez des modèles intégrés ou que vous créiez les vôtres, Hugo offre la flexibilité et la rapidité nécessaires pour développer facilement des sites statiques.