Les sites Hugo ressemblent souvent à leurs thèmes de départ… jusqu’à ce qu’on les personnalise. Un développeur a transformé une page d’accueil PaperMod par défaut en une mise en page éditoriale distinctive en une seule journée, sans toucher au thème lui-même. La clé ? Laisser Hugo résoudre les fichiers au niveau du site avant ceux du thème, pour que les mises à jour continuent à arriver.

Une méthode plus propre pour modifier la page d’accueil

Au lieu d’éditer le modèle du thème, créez layouts/index.html dans votre projet. Ce seul fichier remplace la page d’accueil entière tout en laissant le thème intact. Pour garder le contenu flexible, déplacez le texte dans des fichiers YAML de données (data/home/en.yaml, data/home/ko.yaml). Un site bilingue peut ainsi servir automatiquement la bonne langue :

{{- $copy := index .Site.Data.home .Site.Language.Lang -}}

{{ $copy.hero.eyebrow }}

{{ range $i, $line := $copy.hero.titleLines }}{{ if $i }}
{{ end }}{{ $line }}{{ end }}

{{ $copy.hero.intro }}

Ajoutez une nouvelle langue en déposant un autre fichier YAML : aucun changement de modèle n’est nécessaire.

Style unifié avec les variables CSS

PaperMod expose sa palette de couleurs via des variables CSS, ce qui permet de redéfinir l’apparence du site en surchargeant quelques valeurs dans assets/css/extended/custom.css :

:root { --theme: #fbfaf7; --entry: #f1f3f2; --primary: #1b1d1f; --secondary: #676b70; --border: #dddcd7; } :root [data-theme="dark"] { --theme: #151617; --primary: #f0efeb; --secondary: #a9adb2; --border: #333638; }

Pour renforcer l’aspect éditorial, utilisez une typographie avec empattements pour les titres :

.post-title, .page-header h1, .entry-header h2 { font-family: var(--j-serif); font-weight: 400; }

Attention aux bordures résiduelles lors de l’aplatissement des entrées de liste : PaperMod applique .post-entry des bordures sur tous les côtés. Surchargez les quatre côtés et ne conservez que la bordure inférieure.

Pourquoi c’est important

Garder les personnalisations au niveau du site permet d’adopter les mises à jour du thème en amont sans conflits de fusion. Cela sépare clairement le contenu de la présentation, accélère les refontes et facilite la maintenance des sites multilingues. Pour quiconque gère un blog Hugo, cette approche offre un compromis pratique entre l’apparence standard et la duplication complète du thème.

---

Source : DEV Community. Synthèse éditoriale assistée par IA — TechnoExpress.