Share
Il processo di creazione di temi per Ghost è incredibilmente semplice, semplice e molto facile da imparare. Ma prima di iniziare a creare un vero tema Ghost è importante e utile capire il ruolo dei temi nell'ecologia globale di Ghost in modo che tu possa progettare in modo ottimale.
Il modo migliore per farlo non è saltare a capofitto nel design o nel codice, ma acquisire una conoscenza approfondita di Ghost stesso come base.
In questa prima parte della nostra serie di tutorial otterrai le basi e, una volta fatto, sarai in una posizione ideale per iniziare a creare il tuo primo tema.
Ghost è un'applicazione Open Source dedicata alla pubblicazione di contenuti.
Negli ultimi anni gli strumenti di pubblicazione dei contenuti si sono evoluti per consentire alle persone di autogestire praticamente qualsiasi tipo di sito di cui avrebbero potuto avere bisogno. Che si tratti di un complesso negozio online, di una presentazione aziendale o di un CMS completo, gli utenti possono gestire tutto da soli con relativamente poca esperienza.
Ma Ghost non parla di nessuna di quelle cose complesse. Ghost sta riportando l'attenzione su una cosa semplice: scrittura.
È una piattaforma costruita sul principio della semplicità. Il suo obiettivo principale è quello di aiutare gli autori a fare più blog e focalizzarsi meno sulla parte dello strumento di content publishing dell'equazione dei blog.
Per gli sviluppatori di temi questo introduce un cambio di passo. Mentre la tematizzazione per altre piattaforme è spesso guidata dalla domanda degli utenti di temi per aggiungere tutti i tipi di complessità funzionale al loro sito Web, la piattaforma Ghost è guidata da una sola cosa. La tagline per Ghost ci dice di cosa si tratta:
Solo una piattaforma di blogging
Dato che Ghost è concentrato al 100% sul blogging, Ghost è: Solo per i blogger.
E in linea con questo, il tema del design Ghost è guidato anche da una sola cosa: Solo temi per blog.
Potrebbero sembrare dichiarazioni ovvie, ma sono importanti da sottolineare, perché su una piattaforma incentrata sulla scrittura, utilizzata da persone focalizzate sulla scrittura, anche i temi Ghost devono essere progettati con particolare attenzione alla scrittura.
Come parte della sua campagna Kickstarter, il fondatore di Ghost, John O'Nolan, ha dichiarato quanto segue:
... non si tratta solo di fare qualcosa che sembra bello, si tratta di dare agli scrittori strumenti per spingere il blogging e spingere il giornalismo al livello successivo.
Qui sta la filosofia che i designer di temi Ghost devono adottare per servire al meglio gli utenti di Ghost: innanzitutto assicurarsi che i contenuti di un utente siano sempre in primo piano.
È un approccio comune nel web design per concentrarsi sulla grafica e sull'aspetto generale del design, con lo styling di tipografia e contenuti che si ripetono per ultimi. Ma in un tema Ghost il contenuto non dovrebbe mai passare in secondo piano rispetto ad altri aspetti del design.
Come designer di temi Ghost la tua prima considerazione dovrebbe essere come apparirà il contenuto, con una forte enfasi sulla tipografia, e il resto del design del tema dovrebbe svolgersi a suo supporto.
Acquisirai più informazioni su come funziona più avanti nella serie di tutorial una volta che iniziamo a creare un tema reale, ma prima di poterlo fare dobbiamo imparare di più sulla piattaforma Ghost stessa.
Ci sono alcuni aspetti fondamentali su cui Ghost deve essere consapevole che lo rendono diverso dalle altre piattaforme a cui potresti essere abituato.
A differenza della maggior parte delle applicazioni di creazione di siti Web attualmente popolari basate su PHP, Ghost è basato su Node.js.
Node.js è una piattaforma software che interpreta ed esegue JavaScript nel back-end. Puoi saperne di più su Nodejs.org ma davvero non devi. Non è richiesta una conoscenza approfondita di Node.js per creare un tema Ghost: tutto ciò che devi sapere sarà trattato in questa serie di tutorial.
Molte persone considerano Node.js la via del futuro per una serie di motivi; la velocità è uno di loro. Node.js ha dimostrato di esibirsi in modo significativamente più veloce di PHP attraverso numerosi test di benchmarking, ed è un componente chiave dietro al perché Ghost funzioni così rapidamente.
Per lavorare su un tema Ghost in un ambiente locale è necessario installare Node.js localmente. Fortunatamente, farlo è un processo molto semplice e veloce. Ti indicheremo le istruzioni su come farlo prima di iniziare il processo di costruzione di un tema nella seconda parte di questa serie di tutorial.
Nota: Dovresti essere consapevole del fatto che a breve termine potresti incontrare dei dolori crescenti nel dispiegare i tuoi siti Ghost. Quasi tutti gli host del mondo in questo momento sono configurati per ospitare applicazioni PHP, ma poiché Node.js è ancora relativamente nuovo, l'installazione del "pulsante" su domini live con cui potresti essere abituato con altre applicazioni non è ancora pronta. Un certo numero di host sta già costruendo nuove infrastrutture appositamente per facilitare Ghost, quindi sarà solo una breve attesa fino a quando l'implementazione di Ghost sarà altrettanto semplice come qualsiasi altra applicazione se non più semplice. Inoltre, a partire da novembre sarai in grado di utilizzare il servizio di hosting interno di Ghost.
Un altro aspetto di Ghost che potrebbe essere diverso dalle altre piattaforme a cui hai fatto riferimento in passato riguarda le impostazioni che gli utenti possono controllare nel back-end.
Le impostazioni guidate da Ghost determinano una grande percentuale di ciò che può essere prodotto sul front end che, a sua volta, influenza il tipo di contenuto disponibile per il tema.
Ci sono ancora molte cose nuove pianificate per Ghost, tuttavia l'approccio che seguiremo in questa serie di tutorial è di lavorare con le impostazioni che sono utilizzabili ora.
Alcune impostazioni per la funzionalità futura di Ghost esistono al momento. Ad esempio, c'è un'interfaccia utente di amministrazione per la creazione di menu di navigazione lungo la strada, oltre a una funzionalità preliminare per l'output nel core di Ghost. Tuttavia, non sappiamo esattamente come funzioneranno queste cose (e non lo faremo fino a quando non saranno rilasciate), quindi non faremo alcun progetto per loro in questa serie di tutorial. Lo lasceremo per il giorno in cui il team Ghost li rilascerà effettivamente.
Questo ci porta a ciò che gli utenti possono controllare nel back-end di Ghost in questo momento, che sono impostazioni che si dividono in due aree;
Diamo un'occhiata a ciascuna di quelle aree ora.
Le impostazioni di amministrazione di Ghost sono suddivise in due schede: Impostazioni generali e Impostazioni utente. Le schede delle impostazioni generali e dell'utente controllano il contenuto che possiamo utilizzare nei nostri temi.
Il Impostazioni> Generale tab ci fornisce i seguenti elementi, utilizzabili ovunque in un tema Ghost:
Il Impostazioni> Utente scheda ci dà il seguente, utilizzabile solo nella visualizzazione di un singolo post:
L'interfaccia di post editing di Ghost è sicuramente una delle sue caratteristiche più interessanti. Progettato da scrittori per scrittori, offre un ambiente fantastico per la creazione di contenuti.
Il suo maggiore contrasto rispetto ad altri ambienti di editing è la sua pulizia e il suo minimalismo. Non c'è confusione dalla formattazione di barre degli strumenti, metadati o altri campi personalizzati. La stragrande maggioranza dello spazio dello schermo è interamente dedicata all'area di scrittura.
L'aspetto più rilevante dell'area di post editing per i designer di temi è la spina dorsale della formattazione di Ghost Post: Markdown.
Anziché utilizzare i pulsanti di stile o HTML non elaborato, il contenuto di Ghost viene formattato utilizzando Markdown, una semplice sintassi incorporata che significa che gli autori non devono fermarsi in qualsiasi momento durante la creazione del contenuto. A causa di questo approccio semplificato, esiste un elenco relativamente breve di elementi di stile che l'editor di post controlla:
Nota: Markdown accetta anche HTML non elaborati, il che significa che i video di servizi come YouTube possono essere facilmente incorporati tramite il codice iframe di copia e incolla. Per questo motivo, è anche una buona idea considerare lo stile degli iframe nei tuoi temi.
Ghost è progettato attorno a una netta separazione tra presentazione e contenuto.
Ghost gestisce la generazione di tutti i contenuti e ogni funzionalità aggiuntiva richiesta viene gestita dai plugin. Questo lascia il tema Ghost dedicato alla pura presentazione.
La separazione del contenuto e della presentazione è un principio del web design che non è nuovo. L'idea di base è che se il contenuto e la presentazione sono separati in entità indipendenti diventa possibile modificarne uno senza alterare l'altro. In altre parole, un tema può essere sostituito per un altro senza che l'utente debba modificare il contenuto in alcun modo.
Quando i temi contengono funzionalità che non sono puramente di presentazione, un utente non può più modificare il tema senza alterare il modo in cui il loro contenuto appare. Sono legati alla presentazione che hanno, e lo scopo fondamentale di un tema è essenzialmente perso.
Con Ghost, tuttavia, lo scopo fondamentale di un tema rimane intatto in ogni momento.
Nota: In futuro, come plugin per Ghost, sarà possibile creare temi Ghost con dipendenze plugin. Questa è un'altra caratteristica che sarà resa possibile grazie alla realizzazione di Ghost su Node.js. Saremo comunque in grado di vedere pacchetti globali migliorati disponibili per gli utenti, ma il metodo per farlo conserverà in modo coerente i benefici derivanti da una separazione tra contenuto e presentazione.
Le due fasi chiaramente definite su cui lavorerai durante la creazione di un tema Ghost sono:
Le prossime sezioni di questa serie di tutorial ti forniranno istruzioni dettagliate passo-passo su come procedere attraverso queste fasi per costruire il tuo primo tema Ghost. Prima di allora, tuttavia, è utile capire un po 'di più sul linguaggio dei template che alimenta i temi di Ghost.
I temi Ghost utilizzano un fantastico linguaggio dei modelli denominato Handlebars.js per potenziare il posizionamento dei contenuti. Handlebars è un linguaggio di template nel senso proprio del termine, per cui il suo ruolo è semplicemente quello di generare contenuti precaricati in posizioni specificate all'interno di un file template.
Handlebars è caratterizzato dall'uso di parentesi graffe (che sembrano manubri), per aggiungere tag predefiniti in modelli che verranno sostituiti con il contenuto quando il file viene servito.
Esempio di tag del modello handlebars.js: soddisfare
Handlbars.js è denominato a logica-less linguaggio dei modelli, perché non può essere utilizzato per scrivere funzioni, contenere variabili o preparare altrimenti il contenuto per la visualizzazione. A parte il rendering del contenuto in cui sono posizionati i tag, le sue uniche operazioni sono semplicemente:
È la funzionalità senza logica dietro a ciascun tema Ghost che garantisce che ciascun tema controlli solo gli attributi della presentazione.
I temi Ghost non fanno nulla per determinare il contenuto con cui verranno sostituiti i tag del modello manubrio, gestito da Ghost stesso. Il tema è, tuttavia, utilizzato per determinare come sarà l'output segnato e disegnato.
Grazie a una logica senza modelli, marcatura e styling, l'output di Ghost è facilmente raggiungibile e garantisce un codice molto pulito nei modelli. A sua volta, ciò semplifica la scrittura di markup semantico aggiornato con gli ultimi standard di SEO e accessibilità.
Ecco una rapida lista "a colpo d'occhio" di tutto ciò che è, e non è inclusa nelle due fasi della progettazione di un tema Ghost.
Che cosa è in un tema Ghost: templating
Messa in piega
Tuttavia, il seguente non è incluso in un tema Ghost:
Potresti trovare utile pensare al processo di progettazione in due fasi come riassunto dal "SAMWYS" principio, o "Stile e annotazione su cosa sei servito".
Quando si progetta un tema Ghost non è necessario lavorare con query logiche o database perché Ghost gestisce tutto ciò per noi. SAMWYS ci ricorda che tutto ciò che dobbiamo fare è posizionare i tag del modello, scrivere il markup della qualità e mettere insieme lo stile del tema che mette in risalto il contenuto dell'utente.
Tutto ciò che abbiamo discusso finora ti fornisce una comprensione fondamentale di Ghost.
Da qui possiamo passare al processo passo-passo della creazione del tuo primo tema.
La parte successiva della nostra serie di tutorial inizia con la prima fase del processo di creazione del tema; il palco dei templating. Imparerai esattamente come impostare la struttura dei file del tema, come posizionare i tag del modello e come scrivere uno scheletro di markup.
Accentsconagua