DTheme, il mio nuovo tema per Pelican
Ho migrato questo sito dal'italiano all'inglese, questo è uno dei primi articoli scritti in italiano, che ho deciso di mantenere. Se preferisci leggere la versione in inglese la trovi qui.
Questo è il mio primo tema per Pelican. Diverso tempo fa, in una precedente vita di questo sito, ho utilizzato Medius, un tema che trovo pulito ed elegante.
Alcuni mesi fa mi sono rimesso a lavoro su un vecchio template con l'idea di creare un tema che permettesse di generare un sito veloce, leggero e che offrisse una copertura per le minime necessità SEO.
Dopo diverse modifiche e vari ripensamenti, ho rilasciato la versione 0.1 del tema che potete trovare su github.
Non si tratta di una versione completa, anzi, ci sono già diverse anomalie da rivedere e cose nuove da implementare. Ho deciso però di iniziare concentrandomi sulle caratteristiche per me più importanti, per poi aggiungere il resto con il tempo.
Non mi metto a descrivere il tema fino in fondo ora, segnalo solo alcune sue caratteristiche e le principali anomalie.
Le principali caratteristiche
- lazy load nativo per le hero image, per le anteprime nei listing del blog ed in qualche altro punto;
- ho cercato di ottimizzare le immagini, e più in generale la struttura del sito, per seguire i criteri di web vitals. Nel caso di questo sito ho poi configurato il file htaccess per mettere in cache le risorse, anche questo aiuta;
- supporto per le immagini in formato webp. Nel senso che le hero image, le immagini di anteprima dei post e qualche altra immagine, vengono gestite con un tag "picture", all'interno del quale indico sia le versioni in webp che quelle in jpg;
- tecniche di preload e prefetch per le risorse importanti;
- presenza di uno pulsante per il passagio dal tema giorno a quello notte;
- uso dei font nativi, per ridurre principalmente le chiamate a fonti esterne, con i relativi tempi di connessione e download;
- presenza di una sezione di articoli collegati, che mostra articoli appartenenti alla stessa categoria di quello in corso di visualizzazione. Nello specifico mostro il precedente ed il successivo, se non ce ne sono non mostro altro.
Per questa caratteristica il merito è di un plugin, io ho solo impostato qualche div; - prevista l'integrazione di Google Tag Manager e di altri strumenti legati al tracciamento delle visite. Nel senso che prevedo una variabile nel pelicanconf.py dove si possono indicare degli script che finiscono nell'head del template;
- i principali fattori di seo on page, con un occhio di riguardo per i dati strutturati legati agli elementi "article" e "person".
Le cose da sistemare, o almeno quelle che ho notato
- slug e link interni, in alcuni casi sono codificati nel tema ed in italiano;
- ci sono errori loggati in console, questo impedisce di raggiungere il punteggio massimo nelle audit di lighthouse;
- la progressive web app non funziona offline. In realtà mi sto rendendo conto che tutto il service worker è da rivedere, anzi, prima devo capire meglio io come funziona. Probabilmente toglierò questa funzione nella prossim release;
- la documentazione è pessima, devo migliorare molto qui;
- il tema non è flessibile. Come scrivo poco sopra, è fatto su misura per me, se si cerca di modificarlo troppo, può rompersi;
- non gestisce le immagini presenti all'interno dei post. Non genera i formati in webp, non ne gestisce le dimensioni, niente. Infatti al momento non ho immagini interne agli articoli.
I plugin utilizzati
Utilizzo diversi plugin, i primi due dell'elenco non sono necessari per il funzionamento corretto del tema mentre gli altri, chi più chi meno, hanno un ruolo più marcato:
- sitemap: genera la sitemap del sito;
- minification: riduce la dimensione dei file minificandoli;
- readtime: calcola il tempo di lettura degli articoli. Ho fatto delle modifiche all'interno del plugin ufficiale per indicare il numero di parole al minuto che vengono lette nella lingua italiana. Serve quindi personalizzarlo un attimo per poterlo usare;
- neighbors: basta attivarlo per vedere i correlati alla fine di ogni articolo;
- pelican-toc: genera un'indice dei contenuti per ogni articolo. Ho fatto delle leggere modfiche all'interno del plugin, ma funziona anche senza modifiche;
- cover_resizer: questo è un mio plugin, è scritto male e serve a generare le hero image degli artioli, le anteprime e le versioni a diverse risoluzioni e formati (webp).
Affinché funzioni è necessario inserire un file chiamato "copertina_raw.jpg" nella cartella "/content/il-tuo-articolo/". Io lo carico con dimensioni 1024*576. In fase di generazione dell'output, il plugin crea tutte le varianti necessarie e le inserisce dentro "/theme/img/il-tuo-articolo".
"/content/il-tuo-articolo/" e "/theme/img/il-tuo-articolo" vengono generate dallo script "new-html.py" (ne parlo in seguito)
La creazione di nuovi contenuti
Per gestire la creazione dei nuovi contenuti uso uno script, "new-html.py"", che genera un file html contenente diversi tag, molti dei quali precompilati, insieme ad alcune cartelle contenenti risorse legate direttamente al post, come le immagini principali.
È importante che vengano compilati manualmente i tag che lo script non gestisce direttamente.
Lo script accetta due opzioni:
- lo slug dell'articolo, che deve essere inserito con il formato "titolo-di-esempio"
- la categoria dell'articolo con il formato "varie"; deve trattarsi naturalmente di una categoria già presente nel peliconf.py affinché sia utilizzabile.
Quindi il comando finale è "python new-file.py titolo-di-esempio varie".
Come meta title, lo script posiziona inizialmente lo slug indicato in fase di creazione, questo è il primo campo da andare a rivedere manualmente quindi.
Conclusioni
Non entro nel merito su come compilare il peliconf.py, ho fornito qualche indicazione nel readme su github e penso sia più sensato migliorare quella sezione, piuttosto che crearne una nuova qui, che sarebbe comunque parziale.
Si tratta di un tema per Pelican ancora allo stadio iniziale, vorrei renderelo un po' più versatile, adatto quindi a maggiori personalizzazioni, oltre a rivedere alcuni aspettici stilistici e tecnici. Penso però possa essere un buon inizio.
Spero che risulti utile a qualcuno. Si tratta del mio primo vero repository pubblico e con molti aspetti di github e git devo ancora prenderci la mano.
