Modifichiamo Hugo

Dopo aver visto nell’articolo precedente come installare hugo vediamo ora di fare qualche modifica. Semplicemente basterà copiare le parti del tema che ci interessano nella cartella layouts. Ad esempio avevo voglia di inserire un banner Amazon in basso prima della sezione dei commenti. Ho copiato nella root del blog, all’interno della directory layouts la cartella post (che al suo interno contiene il file single.html, ovvero la struttura del singolo post ) Al suo interno si potrà vedere tutto il codice

{{ partial "head.html" . }}
<div class="content container">
  <div class="post">
    <h1>{{ .Title }}</h1>
    <span class="post-date">{{ .Date.Format "Jan 2, 2006" }} &middot; {{ .ReadingTime }} minute read{{ if .Site.DisqusShortname }} &middot; <a href="{{ .Permalink }}#disqus_thread">Comments</a>{{ end }}
    {{ if isset .Params "categories" }}
    <br/>
    {{ range .Params.categories }}<a class="label" href="{{ "/categories/" | absURL }}{{ . | urlize }}">{{ . }}</a>{{ end }}
    {{ end }}</span>
    {{ .Content }}

sotto content ho inserito il codice datomi da Amazon per inserire il banner..

Ok, vogliamo modificare qualcosa dell’aspetto grafico del tema (dunque andando a lavorare sul css)?

Ottimo, si andrà sempre a copiare la directory del tema la cartella static/css in cui sono presenti tutti i css del tema nella nostra rootdelblog/static e modificheremo il file al fine di raggiungere la grafica desiderata. L’importante è non andare a modificare il tema in se (elemento positivo in quanto avremo la sua directory sempre aggiornabile all’ultima versione tramite git ). Ci pensera hugo con il comando

    hugo --theme temascelto

(p.s. al posto di “–theme temascelto” è possibile inserire le file di config.toml l’opzione

theme = "hyde-x"

in modo da digitare soltanto

hugo

)

a sostituire i file originali del tema con i nostri appena modificati.


Questo è un post nella serie Impariamo a usare ugo.
Altri Post di questa serie:

comments powered by Disqus