Tempo di lettura stimato: 3 minuti

Abbiamo visto come Hugo organizza i contenuti e come si scrivono gli articoli. Ora, facciamo un passo avanti e parliamo dei temi. Immagina il tema come il “vestito” del tuo sito: è ciò che decide come appariranno le tue pagine, i colori, la disposizione delle notizie e tutto il resto. Senza un tema, Hugo non saprebbe come trasformare i tuoi testi Markdown in qualcosa di bello da vedere.

Cosa sono i temi e perché sono importanti?

In parole semplici, un tema di Hugo è un insieme di file HTML (che definiscono la struttura delle pagine), fogli di stile CSS (che danno colore e forma) e, a volte, file JavaScript (per aggiungere interattività). Questi file lavorano insieme per prendere i dati dei tuoi articoli (titoli, testi, immagini che hai messo nel Markdown) e presentarli in un modo specifico.

Perché sono importanti?

1. Aspetto Visivo: Un buon tema rende il tuo sito professionale e accattivante.
2. Organizzazione Automatica: Il tema sa come disporre la notizia in evidenza, le altre notizie, il menu laterale e il footer, proprio come abbiamo discusso.
3. Facilità d’Uso: Non devi scrivere tu tutto il codice HTML e CSS da zero. Scegli un tema, e gran parte del lavoro è già fatto.
4. Flessibilità: Se non ti piace più l’aspetto del tuo sito, puoi semplicemente cambiare tema senza toccare neanche un tuo articolo.

Dove trovi i temi e come li usi?

Esistono migliaia di temi Hugo gratuiti e a pagamento, pronti all’uso. Il posto migliore per cercarli è la Hugo Themes showcase.

Come si installa un tema?

Di solito, l’installazione di un tema avviene in pochi semplici passi:

1. Scegli il tema: Trova un tema che ti piace e che si adatti alle esigenze del tuo sito di giornalista (per esempio, uno con una buona disposizione per i post e una sidebar).
2. Scarica il tema: La maggior parte dei temi sono disponibili su GitHub. Li scarichi clonando il loro “deposito” (repository) nella cartella themes/ del tuo progetto Hugo.
   • Apri il tuo Terminale.
   • Naviga nella cartella del tuo sito Hugo (quella che contiene config.toml).
   • Digita un comando simile a questo (sostituendo [nome-tema] e l’URL con quelli del tema che hai scelto):
     
     git submodule add https://github.com/GoHugoIO/Ananke.git themes/ananke
     
     Questo comando scarica il tema “Ananke” (un tema Hugo molto popolare per iniziare) nella cartella themes/ananke.
3. Attiva il tema: Devi dire a Hugo quale tema usare. Apri il file di configurazione del tuo sito, config.toml, e aggiungi o modifica la riga theme:
   
   

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

4. Esegui Hugo: Ora, quando lanci il comando hugo server -D (per vedere il tuo sito in locale), Hugo userà il tema che hai scelto per visualizzare i tuoi contenuti.

Personalizzare il tuo tema

Anche se un tema ti offre una base solida, spesso vuoi personalizzarlo un po’ per renderlo unico. Ecco le basi di come puoi farlo senza dover imparare a programmare da zero:

• File di configurazione (config.toml): Molti temi offrono una miriade di opzioni che puoi impostare direttamente in config.toml. Puoi cambiare colori, aggiungere il logo, impostare i menu di navigazione, e molto altro, semplicemente modificando delle righe in questo file. Il file README del tema che scegli ti darà tutte le istruzioni.
• Sovrascrivere i layout: Se vuoi fare modifiche più avanzate (per esempio, cambiare la disposizione della notizia in grande sulla homepage), puoi creare dei file con lo stesso nome e percorso nella tua cartella layouts/ principale. Questi file sovrascriveranno quelli del tema. Ad esempio, se vuoi modificare l’homepage, crea layouts/index.html e Hugo userà il tuo file anziché quello del tema.
• Aggiungere CSS personalizzato: Se vuoi solo cambiare qualche colore o dimensione del testo, la cosa più semplice è creare un tuo file CSS (ad esempio, static/css/custom.css) e collegarlo nel tema (spesso c’è già un’opzione nel config.toml o una parte nel baseof.html del tema che lo permette).

La magia dei partial

Nel nostro esempio precedente, abbiamo parlato di sidebar e footer. Questi sono ottimi candidati per i “partial”. Un partial è un piccolo pezzo di codice HTML che puoi riutilizzare in diverse pagine del tuo sito.

Ad esempio, la logica per mostrare le “notizie in evidenza” nel menu laterale potrebbe essere racchiusa in un file chiamato layouts/partials/sidebar.html. Poi, in ogni layout di pagina (come index.html o single.html), ti basta richiamarlo con un semplice comando come {{ partial "sidebar.html" . }}. Questo ti aiuta a mantenere il codice pulito e ordinato.

Capire i temi e come personalizzarli ti darà un controllo incredibile sull’aspetto del tuo sito, permettendoti di creare un’esperienza unica per i tuoi lettori senza dover diventare uno sviluppatore web.