Création d’une Page d’Accueil Personnalisée avec Hugo
La page d’accueil est souvent la première impression que les visiteurs ont de votre site web. Dans ce tutoriel, nous allons vous guider à travers les étapes nécessaires pour créer votre propre page d’accueil personnalisée avec Hugo, la définir comme page par défaut et l’intégrer à la barre de navigation.
Étape 1 : Configuration de la Page d’Accueil
- Pour commencer, éditez le fichier
config.toml
, qui se trouve dans le répertoirewww\template\config.toml
. Dans ce fichier, décommentez le code suivant :
|
|
-
pageref
: C’est la référence à la page qui sera liée à cette entrée de menu. -
name
: C’est le nom qui sera affiché dans la barre de navigation pour cette entrée de menu. -
weight
: C’est un nombre qui détermine l’ordre des éléments dans le menu. -
pre
: C’est le type de lien. “internal” signifie que le lien est interne au site. -
post
: C’est utilisé pour ajouter une icône. Pour une personnalisation plus poussée des icônes, je vous recommande de consulter cet article qui explique comment ajouter et modifier les réseaux sociaux dans Hugo.
Pour trouver le code SVG des icônes, vous pouvez consulter les liens suivants :
- Pour les icônes de marques : Brands Icons | Font Awesome
- Pour les icônes régulières : Regular Style Icons | Font Awesome
- Pour les icônes solides : Solid Style Icons | Font Awesome
Ces ressources vous permettront de trouver l’icône qui correspond le mieux à vos besoins et de l’intégrer dans votre site Hugo.
- Toujours dans ce même fichier
config.toml
, remplacezposts
parindex
dans le code suivant :
|
|
Cela permettra à Hugo de savoir quelle page utiliser comme page d’accueil par défaut.
Étape 2 : Création du Modèle de la Page d’Accueil
Hugo utilise des modèles pour générer les différentes pages de votre site. Pour créer un modèle pour votre page d’accueil, suivez ces étapes :
- Éditez le fichier
www\template\themes\meme\layouts\index.html
. - Ajoutez le code suivant avant le dernier
{{ end }}
dans ce fichier :
|
|
Ce code vérifie si le modèle de la page d’accueil est défini comme “index” dans le fichier config.toml. Si c’est le cas, il inclura le contenu de la page d’accueil à cet endroit.
Étape 3 : Création de la Page d’Accueil
Il est maintenant temps de créer la page d’accueil elle-même. Créez un fichier www\template\themes\meme\layouts\partials\pages\index.html
avec le contenu que vous souhaitez afficher sur votre page d’accueil. Par exemple :
|
|
Vous pouvez personnaliser le contenu de cette page en ajoutant du HTML, du CSS et même du JavaScript selon vos besoins. Cette page d’accueil personnalisée remplacera la page d’accueil par défaut générée par Hugo.
Notez que l’en-tête trouvé dans www\template\themes\meme\layouts\partials\pages\post.html
est une référence à un modèle générique pour les pages de contenu. Vous pouvez personnaliser davantage ce modèle si nécessaire, mais pour la page d’accueil, nous utilisons un modèle spécifique.
Conclusion
En suivant ces étapes, vous pouvez créer une page d’accueil personnalisée pour votre site Hugo, la définir comme page d’accueil par défaut et l’intégrer à la barre de navigation. Cela vous permettra de donner à votre site une touche unique et de captiver vos visiteurs dès leur arrivée. N’oubliez pas de compiler votre site Hugo avec la commande hugo
depuis votre terminal, après avoir effectué ces modifications pour voir le résultat en ligne.