Personalizzazione di Hugo: tracciamento dei test e delle risorse

Filippo Strozzi

15 agosto 2024

1. Prova di creazione di file via Vim e scp

Nella sostanza sto utilizzando Vim sul mio MacBookPro per collegarmi alla VM in cui ho il container Docker su cui gira Hugo.

Grazie al comando che segue

vim scp://username@server.example.org/path/to/personal/file.txt

posso modificare i file su un differente computer vis ssh.

Da quel che vedo Vim non pare prendere la corretta configurazione almeno per quanto riguarda la colorazione del testo.

Test link markdown

Credo possa essere a causa della intestazione YAML o TOML

Esempio di cosa intendo — questo è il titolo dell'immagine

Ho anche finalmente trovato un utilizzo valido per la versione macOS di Secure ShellFish. Utilizzando infatti questa app per Mac posso avere le cartelle di Hugo direttamente sul filesystem del MBP. Certo esisterebbero altri mezzi ma questo è semplice e comodo, come si vede dall’immagine sottostante.

Esempio di scrittura, articolo in Vim, anteprima in tempo reale in Hugo e visualizzazione dei file di riferimento in Secure ShellFish angolo in basso a destra

Altro problemino, rispetto al mio flusso ordinario di lavoro, non funziona il sistema di auto-completamento del percorso dei file in Vim sul server remoto … o meglio funziona ma auto-completa con il filesystem del MBP 😅.

2. Vim ed intestazione YAML

Convertita l’intestazione da TOML a YAML ed i colori di formattazione in Vim funzionano.

Queste modifiche le ho apportate direttamente dal MBP via Secure ShellFish e Byword.

Questa è una modifica fatta co iAWriter e Secure shellfish (per il quale ho avuto un po’ di problemi a collegarlo, ma non ho capito bene perché) su iPad.

3. Riferimenti incrociati (cross references) in Hugo

Link all’articolo su AeroSpace

Questo il codice che ho inserito nel file in Markdown.

[Link all’articolo su AeroSpace]({\{< ref "/posts/articoli/2024-08-16-nuovo-tiling-manager-per-macos" >}\})

Ho inserito 2 \ tra le parentesi graffe per fare escape altrimenti anche nel codice mi convertiva il link.
Qui c’è la spiegazione da manuale di Hugo.

3.1 Avvertenza!

Ho dovuto modificare il docker-compose file in questa maniera

name: lefilippiche

services:
  server:
    image: hugomods/hugo:latest
    command: hugo server --bind 0.0.0.0 --baseURL=https://lefilippiche.studiolegalestrozzi.it --appendPort=false
    volumes:
      - $PWD:/src
      - $HOME/hugo_cache:/tmp/hugo_cache
    ports:
      - 1313:1313

In particolare alla voce command ho dovuto aggiungere --baseURL=https://lefilippiche.studiolegalestrozzi.it --appendPort=false dove il baseURLè l’indirizzo del sito, altrimenti il rinvio al link punta a htttp:\\localhost:1313 che ovviamente non riesce a risolvere.
Il riferimento alla soluzione l’ho trovato qui.

4. Modifiche al tema …

Utilizzo per questa incarnazione di test è Ananke.

4.1 Personalizzazione del “read more”

Ho quindi modificato il file hugo.yaml come segue.

baseURL: "https://lefilippiche.studiolegalestrozzi.it"
languageCode: 'it-IT'
title: "Le Filippiche"
theme: "ananke"
# Globally for all pages:
params:
  read_more_copy: Leggi tutto …

4.2 Problemi ad impostare la visualizzazione della data dell’articolo non nel formato inglese / americano

Sono riuscito a mettere la data degli articoli in lingua italiana usando nel config di Hugo (formato in YAML):

defaultContentLanguage: it

Ma allo stato il formato Giorno, Mese e Anno non va.

5. Tema Ananke informazioni e gestione da conoscere

5.1 Visualizzazione dei tags

Articolo interessante da cui ho preso spunto.

Esempio di tags nella intestazione YAML di questo articolo.

tags: ["test", "hugo"]

Esempio di visualizzazione dei tags in Ananke

5.2 Inserire la tabella dei contenuti

C.d. toc o table of contents.

Utilizzando nella front matter del singolo articolo il parametro:

toc: true

Permette di avere la tabella dei contenuti del documento (basato sui livelli del documento markdown) sul lato sinistro dell’articolo.
La renderizzazione non è delle migliori …

6. Personalizzazioni

6.1 Descrizione dell’immagine

Ho fatto modifica al layout del tema seguendo queste indicazioni, il problema è che volevo anche la descrizione / didascalia sotto l’immagine.

6.2 Aggiungere immagine alle anteprima dell’articolo e nella parte alta del articolo

Usato questa personalizzazione trovata nel forum di Hugo.

Oltre a ciò occorre inserire nel frontespizio dell’articolo la seguente impostazione:

featured_image: 01-test_immagine_vim.jpeg

Nell’immagine sottostante si vede come viene fuori la pagina con l’immagine (non pensata proprio per il frontespizio dell’articolo ma comunque ridimensionata correttamente e con un interessante effetto).

Qui sotto invece si vede l’immagine vista nella pagina principale la “lista”.

7. Cose da approfondire

Hugo