Temps de lecture estimé: 3 minutes

Nous avons vu comment Hugo organise le contenu et comment les articles sont écrits. Maintenant, Faisons un pas en avant et parlons du thèmes. Imaginez le thème comme le “robe” de votre site: è ciò che decide come appariranno le tue pagine, les couleurs, L'arrangement des nouvelles et de tout le reste. Sans thème, Hugo ne saurait pas comment transformer vos textes de démarque en quelque chose de beau à voir.

Quels sont les thèmes et pourquoi ils sont importants?

En mots simples, une Thème di Hugo C'est un ensemble de fichiers HTML (qui définissent la structure des pages), Feuilles de style CSS (qui donnent de la couleur et de la forme) et, parfois, fichier javascript (Pour ajouter l'interactivité). Ces fichiers fonctionnent ensemble pour prendre les données de vos articles (sécurité, textes, Images que vous mettez dans la marque) et les présenter d'une manière spécifique.

Parce qu'ils sont importants?

1. Apparence visuelle: Un bon thème rend votre site professionnel et captivant.
2. Organisation automatique: Le thème sait comment organiser les nouvelles en preuve, Les autres nouvelles, le menu latéral et le pied de page, Tout comme nous avons discuté.
3. Facilité d'utilisation: Vous n'avez pas à écrire tout le code HTML et CSS à partir de zéro. Choisissez un thème, Et une grande partie du travail est déjà fait.
4. Flexibilité: Si vous n'aimez plus l'apparence de votre site, Vous pouvez simplement changer de thème sans même toucher votre article.

Où vous trouvez les thèmes et comment vous les utilisez?

Il y a des milliers de thèmes Hugo gratuits et payés, Prêt à utiliser. Le meilleur endroit pour les chercher est le Hugo Thèmes vitrine.

Comment installer un thème?

Généralement, L'installation d'un thème a lieu en quelques étapes simples:

1. Choisissez le thème: Trouvez un thème que vous aimez et qui s'adapte aux besoins de votre site de journaliste (par exemple, un avec une bonne élimination pour les postes et une barre latérale).
2. Télécharger le thème: La plupart des thèmes sont disponibles sur github. Téléchargez-les en clonage le leur “dépôt” (dépôt) dans le dossier themes/ de votre projet Hugo.
   • Ouvrez le vôtre Terminal.
   • Naviguer dans le dossier de votre site Web Hugo (celui qu'il contient config.toml).
   • Tapez une commande similaire à celle-ci (remplacement [nome-tema] Et l'URL avec celles du thème que vous avez choisi):
     
     git submodule add https://github.com/GoHugoIO/Ananke.git themes/ananke
     
     Cette commande télécharge le thème “Ananke” (Un thème Hugo très populaire pour commencer) dans le dossier themes/ananke.
3. Activer le thème: Vous devez dire Hugo quel thème utiliser. Ouvrez le fichier de configuration de votre site, config.toml, et ajouter ou modifier la ligne theme:
   
   

   baseURL = 'http://example.org/'
   languageCode = 'it-it'
   title = 'Il Blog del Giornalista Indipendente'
   theme = 'ananke' # <-- Aggiungi o modifica questa rigaEnregistrer le fichier.        

4. Percer Hugo: Maintenant, Lorsque vous lancez la commande hugo server -D (Pour voir votre site localement), Hugo utilisera le thème que vous avez choisi pour voir votre contenu.

Personnalisez votre thème

Même si un thème vous offre une base solide, Souvent, vous voulez le personnaliser un peu’ Pour le rendre unique. Voici les fondements de la façon dont vous pouvez le faire sans avoir à apprendre à programmer à partir de zéro:

• Fichiers de configuration (config.toml): De nombreux thèmes offrent une myriade d'options que vous pouvez définir directement config.toml. Vous pouvez changer les couleurs, Ajouter le logo, Définir les menus de navigation, et beaucoup plus, Simplement en modifiant les lignes dans ce fichier. Le fichier README du thème que vous choisissez vous donnera toutes les instructions.
• Écraser les dispositions: Si vous voulez apporter des changements plus avancés (par exemple, Changez l'arrangement des nouvelles sur le grand sur la page d'accueil), Vous pouvez créer des fichiers avec le même nom et le même chemin dans votre dossier layouts/ principal. Ces fichiers Ils submergeront Ceux du thème. Par exemple, Si vous voulez changer la page d'accueil, crée layouts/index.html Et Hugo utilisera votre fichier au lieu de celui du sujet.
• Ajouter CSS personnalisé: Si vous voulez juste changer de couleur ou de taille du texte, La chose la plus simple est de créer votre propre fichier CSS (par exemple,, static/css/custom.css) et le connecter au thème (Souvent, il y a déjà une option dans config.toml ou une partie dans baseof.html du thème qui le permet).

La magie du partiel

Dans notre exemple précédent, nous avons parlé de barre latérale et footer. Ce sont d'excellents candidats pour je “partiel”. A partiel C'est un petit morceau de code HTML que vous pouvez réutiliser dans différentes pages de votre site.

Par exemple, la logique pour montrer le “Les nouvelles en preuve” Dans le menu latéralement, il peut être enfermé dans un fichier appelé layouts/partials/sidebar.html. Puis, Dans chaque mise en page (venir index.html le single.html), Vous avez juste besoin de le rappeler avec une commande simple comme {{ partial "sidebar.html" . }}. Cela vous aide à garder le code propre et bien rangé.

Comprendre les thèmes et comment les personnaliser vous donnera un contrôle incroyable sur l'apparence de votre site, Vous permettant de créer une expérience unique pour vos lecteurs sans avoir à devenir un développeur Web.