Ghost themes, come costruire un nuovo template.
La costruzione o la modifica di un tema grafico è un passaggio fondamentale che si deve affrontare dopo l'installazione di Ghost CMS.
Cercherò in pochi passaggi di dare alcune indicazioni per costruire un template nuovo per Ghost CMS.
La gestione di un tema Ghost è stato creato per offrire ad un developer o web designer la libertà di generare siti web personalizzati in base alle proprie esigenze di comunicazioni.
I themes Ghost CMS utilizzano dei modelli Handlebars, che compila i modelli in funzioni JavaScript per rende l'esecuzione del modello stesso più veloce rispetto ad altri sistemi simili. Questo crea una separazione tra i modelli (l'HTML) e qualsiasi logica JavaScript, in modo da consentire ai temi di essere veloci creando un'applicazione lato client dinamica con contenuti inviati al browser come HTML statico.
In Ghost CMS vengono utilizzate alcune librerie fra i quali express-hbs che aggiunge alcune funzionalità aggiuntive a Handlebars.
Nella pratica si andranno a creare delle pagine con codice HTML e file CSS che utilizzano espressioni Handlebars quando necessario per eseguire eseguire il rendering di informazioni dinamici.
Un altro aspetto importante è la convalida del tema in Ghost, questo viene gestito da GScan, che controllerà il template Ghost CMS per gestire gli errori, deprecazioni e problemi di compatibilità.
GScan diventa un punto di riferimento per testare i temi che si stanno creando o per ottenere un rapporto di convalida completo.
Quando un tema viene caricato nell'amministratore di Ghost, verrà automaticamente controllato con GScan fornendo un feedback di eventuali problemi. In oltre GScan può essere utilizzato tramite riga di comando mediante console.
# Installlazione del package tramite npm
npm install -g gscan
# Utilizzare gscan <file path> ovunque per eseguire dove necessario
gscan /path/to/ghost/content/themes/casper
# Possibile avviare gscan anche su file compresso zip
gscan -z /path/to/download/theme.zipTemplate Ghost CMS
Come detto sopra il template di Ghost CMS contiene modelli HTML statici che fanno uso di helper per l'output dei dati che devono essere visualizzati nel sito web, e contiene file CSS per generare uno stile grafico personalizzato.
Un buon template deve contenere una struttura di file come descritta sotto, per iniziare il consiglio è quello di guardare uno dei template forniti durante l'installazione esempio Casper.
# La struttura di un Thema Ghost CMS
.
├── /assets
├── /css
├── screen.css
├── /fonts
├── /images
├── /js
├── /partials
├── list-post.hbs
├── default.hbs
├── index.hbs [richiesto]
└── post.hbs [richiesto]
└── package.json [richiesto]I file index.hbs , post.hbs e package.json nono fondamentali, ma si consiglia di usare un file default.hbs per definire le zone basi. Come modello che contiene i i tag fondamentali della struttura HTML quali: <html>, <head> o <body> così come i {{ghost_head}} e {{ghost_foot}} obbligatori e qualsiasi altro HTML per l'intestazione e il footer.
Ogni pagina del tema Ghost deve essere agganciato ad un contesto, che determina quale modello viene utilizzato, quali dati saranno disponibili e quale contenuto viene prodotto dall'helper {{body_class}}. Ad esempio, l'helper {{meta_title}} restituisce cose diverse in base al contesto corrente. Se il contesto è post, l'helper sa che può utilizzare post.meta_title e in un contesto di tag utilizza tag.meta_title.
Sul sito di Ghost dedigato ai developer è possibile guardare la lista dei contexts definiti index, page, post, author, tag, error .
In altri articoli nei prossimi giorni parlerò di come utilizzare Helpers e le funzioni aggiuntive di Handlebars, o come gestire il {{content}}.
Ul atro argomento importante da conoscere è anche routes.yaml che serve a gestire tutta la parte che riguarda alla navigazione e agli URL.