Probabilmente hai sentito parlare Fantasma , la piattaforma di blogging new-ish che ha preso d'assalto il mondo dei blog; è semplice, è elegante, è sexy; ha quell'aspetto live-preview. Cosa non va?
Mi sto trasferendo Fantasma , come molti web designer, da uno sfondo WordPress. Ma prima che riuscissi davvero a riprendermi WordPress 'funzioni modello, avevo provato dozzine, forse centinaia, di opzioni CMS. Alcuni dei più memorabili includono ExpressionEngine , Textpattern , lo sfortunato FrogCMS , un vecchio e vecchio script chiamato CuteNews , e molti altri.
Per lungo tempo WordPress mi ha dato tutto ciò di cui avevo bisogno: potenti funzioni di template; una scorta infinita di plugin; solo vedendo cosa potrei fare
Ma WordPress è stato molto più di un motore di blogging da un po 'di tempo. Si sta muovendo costantemente verso il regno della struttura in qualche modo. Un quadro editoriale, se vuoi.
Ho raggiunto il punto in cui voglio software che blog, e basta. Voglio scrivere i miei post in riduione di prezzo , digita alcune parole chiave, aggiungi un'immagine o due e premi Pubblica, poi dimentica l'intera faccenda.
Si scopre che non sono solo nel mio desiderio di una piattaforma di blogging semplice da usare. I creatori di Ghost hanno fatto di tutto per eliminare tutti i cruft che abbiamo aggiunto al processo di blogging e creare una piattaforma di pubblicazione semplice e veloce che possa portare a termine il lavoro. È una bestia completamente diversa.
Funziona sulla filosofia che un CMS per il blogging dovrebbe fare una cosa, e farlo bene. Non vedrai nessuna rivista lanciata su questa piattaforma senza molta personalizzazione. È un blog, e trasformarlo in qualcos'altro sarebbe una sorta di sconfiggere il suo scopo.
Quindi, c'è il fatto che è basato su nuove tecnologie. Ghost è costruito su Node.js , che esegue codice JavaScript sul server piuttosto che nel browser. È amato dalle stesse persone che amano l'hosting PaaS e tutti questi nuovi sistemi che le persone come me stanno lottando per capire. In un certo senso, è stato a prova di futuro fin dall'inizio. Fa parte della prima generazione di una nuova razza di CMS.
Intendiamoci, dal punto di vista del blogger, è solo una semplice interfaccia per i blog. Dal punto di vista dell'utente finale, nulla è veramente cambiato tranne forse il tema del blog predefinito appare un po '"piatto". Ma sotto il cofano stiamo vedendo qualcosa di completamente nuovo, e questa è una buona cosa.
Installare Ghost in modo semplice.
In genere, è necessario installare un componente o due separatamente per ottenere Ghost installato e in esecuzione su un computer locale. Dovresti installare Node.js e poi dovresti entrare e iniziare a installare alcuni pacchetti di nodi aggiuntivi manualmente dalla riga di comando.
Esatto, la configurazione tipica di Ghost richiede l'utilizzo della riga di comando. Per le persone più abituate al processo di "cinque minuti di configurazione" di WordPress con i database MySQL e un programma di installazione grafico, ciò potrebbe risultare scomodo.
Potrebbe essere una seccatura se non sei abituato a usare la riga di comando su un computer Mac o Linux.
Fortunatamente, le persone gentili su Bitnami ha creato programmi di installazione grafica per Windows, Mac e Linux.
Ecco tutti i passaggi che devi seguire:
Poiché il programma di installazione ti fornisce tutti i componenti necessari, come Node.js e un mini-server, la directory dei file non è esattamente semplice.
Dovrai aprire qualsiasi cartella in cui hai installato Ghost, quindi accedere a apps / ghost / htdocs / . Questa è l'effettiva installazione di Ghost.
I temi si trovano in apps / ghost / htdocs / content / themes / .
I temi Ghost sono abbastanza facili da realizzare, purché tu sappia HTML e CSS. La conoscenza della programmazione è utile, ma non strettamente necessaria. Il sistema di template di Ghost è semplice, e anche piuttosto intuitivo, se hai già creato temi per WordP ... ahem, altri CMS.
Lo so, lo so. Il confronto con WordPress è vecchio. Ma quel pezzo di software ha dominato il mercato da anni - come Photoshop ha per immagini - i confronti sono inevitabili. In questo caso, sono persino utili.
Le persone che hanno creato temi WordPress troveranno parte della struttura dei file e del linguaggio dei template per essere familiari, anche se molto più semplici. Le funzioni PHP di WordPress ti offrono molta flessibilità; ma complicano anche il processo di codifica dei temi.
Il sistema di modelli di Ghost (costruito con Manubrio ), è semantico, potente e molto più leggibile rispetto alle funzioni raw di PHP con cui siamo abituati a lavorare. Personalmente, lo trovo molto più facile da usare.
D'altra parte, è pensato esclusivamente per la costruzione di blog. Non costruirai un sito di notizie ibride / social network / forum con questa cosa. Più semplice, ma limitato. Questo è il trade-off inerente all'intera piattaforma.
Creare un tema di base per Ghost.
Ora, se hai guardato il video (dovresti davvero), conoscerai le basi. Avrai la tua installazione di Ghost in modalità sviluppo e avrai un tema molto, molto limitato con cui lavorare.
Per ricapitolare, tecnicamente hai solo bisogno di tre file per creare un tema Ghost:
index.hbs (This template will list your posts)post.hbs (This will display a single post)package.json (This contains theme information)
Tuttavia, ci sono altri modelli di base che probabilmente vorrai includere. Puoi, ovviamente, creare modelli personalizzati per pagine, post, autori, tag e altro. Ci arriveremo tutto questo nel tempo.
Per ora, voglio concentrarmi solo sulle basi: struttura del tema, estensione dei file template e dove inserire tutto il codice HTML. Questo significa aggiungere file e cartelle extra al nostro tema Ghost. Diamo un'occhiata alla struttura rivista:
default.hbsindex.hbspage.hbspost.hbspackage.jsonassets/css/images/javascript/partials/ (Just examples, here. Not required.)navigation.hbsloop.hbs
default.hbs fungerà da base del tema. Il tuo ,
, e i tag andranno qui. Ogni altro modello sarà reso "interno" a questo. Ora, non devi farlo in questo modo; ma è una pratica standard e viene altamente raccomandata dagli stessi sviluppatori Ghost.page.hbs è esattamente ciò che pensi che sia, il modello per le pagine statiche. La cartella delle risorse è abbastanza auto-esplicativa.
La cartella partials / contiene i bit e le parti di codice che usi più volte, su vari modelli. Ad esempio, navigation.hbs potrebbe includere il nome / logo del sito e la navigazione principale. loop.hbs potrebbe generare un elenco di post con un HTML e uno stile generici. Questo potrebbe essere usato in un numero di posti sul sito.
Quindi ti mostriamo esattamente quanto può essere semplice il template. Per prima cosa, imposteremo il nostro file default.hbs :
{{! Here we see the functions for page titles and descriptions. }}{{meta_title}} {{! Anything in the assets/ folder can be easily linked to, like so: }}{{! This function here outputs meta keywords, some styling information, stuff like that. }}{{ghost_head}}{{! Any .hbs file in the partials folder can be called in like this. }}{{> header}}{{! This is where the content of all the sub-templates will be output. }}{{{body}}}{{! Like ghost_head, this outputs scripts, data, that sort of thing. Currently adds a link to jQuery by default. }}{{ghost_foot}}
Ora creiamo il template navigation.hbs , perché sarà su ogni pagina:
{{! This should be fairly self-explanatory. }} {{@blog.title}}
{{! Each post excerpt will be displayed with this same markup. }}{{#foreach posts}}» {{/per ciascuno}}{{! Collegamenti alla pagina successiva e precedente di collegamenti. Puoi definire quanti link ci sono in ogni pagina nel pannello di amministrazione. }} {{Pagination}}
Ora legheremo tutto insieme al modello index.hbs , che fungerà anche da home page, a meno che non venga specificato diversamente. Il codice per questo, visto come abbiamo diviso e organizzato la maggior parte dell'HTML altrove, è molto semplice:
{{!< default}}{{! That isn't a comment up there. It tells Ghost that everything on this page must be rendered inside the default.hbs template.}}{{! This next function can be used to call in anything in the partials/ folder. In this case, we're calling up everything we just put into "loop.hbs". }}{{> loop}}
E questo è tutto. Ti ho detto che era semplice!
In caso di problemi, controlla il tema predefinito di Ghost e il documentazione . Gioca con l'HTML, gioca con il sistema dei modelli e inizia lo styling del tuo tema.
La prossima volta approfondiremo un po '. Nel frattempo, buon divertimento!
Usi dell'immagine in vetrina Immagine fantasma via Shutterstock.