Semantic Gioorgi Reloaded e Showcase

Ok lo ammetto non ho mai avuto molto tempo per studiare decentemento né hugo (il generatore statico che uso per Gioorgi) né le mirabolanti specifiche dei CSS, poi ho beccato una influenza che mi ha messo ko 3-4 giorni.

E ho scoperto solo ora che è possibile definire eleganti alias alle pagine di hugo, è anche possile personalizzare le pagine delle tassonomie, ecc. Ma procediamo con ordine.

Alias

In hugo è possibile usare la meta-propietà “aliases” per aggiungere alias alla pagina. Si è rivelata particolarmente utile insieme ad un piccolo script che ho fatto per rilevare tutti i dead link del sito, e sistemarli ove possibile. La documentazione è qui

Tassonomie

Ho scoperto che è possibile definire pagine cusotm per le tassonomie, ma c’è qualche piccolo bug, che ha combattuto contro di me. In particolare ho definito un template base per elencare Categorie, Tag e Serie, e poi ho creato una versione specializzata per le Serie, che per me sono il centro dell’esperienza in questo sito.

Semantic tagging

Collegato al discorso delle tassonomie, ho deciso di rimuovere i link diretti ai tag, ma lasciarli accessibili nell’archivio e di trasformarli in qualcosa di diverso.

Ho modificato hugo per includere i tag nel contenuto del post css come “css class”, una prassi che ho visto fare da WordPress.

Ho scoperto che è possibile creare CSS gerarchici, e quindi ho iniziato a creare strutture come quella sotto per personalizzare i contenuti attraverso i tag, e per esempio rendere i racconti più semplici da scrivere.

 1
 2.post_body.tag.racconti { 
 3    p {            
 4        margin-bottom: 0; margin-top:0; 
 5        padding: 0.26rem 0;
 6        /*color: red;*/
 7    }
 8    ul,li {
 9        padding: 0px;
10    }
11    /** Added to support /2018/don-pablo/ */
12    ul > li {
13        list-style-type: "- ";
14       
15    }
16}

Esempio di tag semantici, che vanno quindi inseriti nella sezione tags:

• retro_manual Numera le intestazioni come un manuale retrò pieno di paragrafi e sotto paragrafi. Contiene anche il css custom “appendix” da usare per vestire in modo particolare le appendici
• smart_toc Agisce sulla table of contents

Questi tag hanno un impatto diretto sul rendering dell’intera pagina e sono additivi.

CSS in libertà

Nel markdown di hugo (goldmark) è possibile rendere i titoli personalizzabili usando attribiti css con la sintassi

1### Titolo Retro    {.classe}

che funziona anche per i paragrafi inserendoli subito dopo

Shortcodes

Infine ho iniziato a personalizzare hugo creando delle macro chiamate “shortcode” più che altro per tenere assieme in modo compatto citazioni con le relative fonti.

In generali gli short code sono l’ultima spiaggia perché l’uso dei css semantici dovebbe evitarne l’uso, ma ho avuto una notevole difficoltà a controllare cose semplici come blocchi di citazioni allineati a destra o sinistra a seconda del casi.

Citazione di entrata che usa un semplice css semantico - ma di cui non si può controllare dove si va a capo

Citazione di entrata
Che rispetta gli a capo usando lo shortcode cite lo stile jjcite

Citazione con fonte in italiano
Fonte

Citazione con fonte in inglese
Source

Esempio d’uso di blockquote