Organizzazione di file e cartelle di temi Ghost

Questa è la seconda parte della nostra serie di tutorial sul tema dei ghost. Tutto da qui presuppone che tu abbia una comprensione fondamentale di Ghost. In caso contrario, prima di continuare, prenditi il ​​tempo per leggere Understanding Ghost: Stages of Design).

Come abbiamo discusso nella parte precedente, ci sono due fasi per progettare un tema per Ghost: Creazione e Styling di Template Template.

In questo tutorial ci concentreremo sulla prima fase, guidandoti passo dopo passo nel processo di impostazione dei modelli del tema. Imparerai a conoscere il file modello Ghost e il sistema parziale, i suoi tag modello Handlebars e come scrivere lo scheletro del markup del tuo tema.

Nota: Questo tutorial è condotto su una macchina Windows, quindi si prega di prendere le misure equivalenti sul sistema operativo preferito.

Avrai anche bisogno del tuo editor di codice preferito a portata di mano; questo tutorial verrà eseguito in Sublime Text 2.

Installazione di Ghost localmente

La prima cosa che devi fare è installare Ghost sul tuo computer locale. Fare ciò è abbastanza facile, purché tu abbia i prerequisiti richiesti sul tuo sistema. Non è necessario eseguire XAMPP o l'equivalente per eseguire Ghost sul computer locale poiché verrà eseguito automaticamente.

Nota: Occasionalmente quando crei un nuovo tema, riavvia Ghost e poi selezioni il nuovo tema in admin, può ancora caricare CSS dal tema precedente. Se riscontri questo problema mentre completi questa serie di tutorial o in qualsiasi momento mentre crei un nuovo tema, tutto ciò che devi fare è eseguire un secondo riavvio di Ghost. Un riavvio aggiuntivo dovrebbe cancellare la cache in modo che il CSS del nuovo tema diventi visibile.

Una volta che hai seguito le istruzioni e installato Ghost sul tuo computer locale (e verificato che tutto funziona correttamente) sarai pronto per iniziare a creare il tuo tema Ghost iniziando con i passaggi seguenti.

Inizia un nuovo tema vuoto

Per iniziare creeremo e attiveremo un tema Ghost vuoto con il minimo assoluto di file richiesti.

Passo 1:

 
In Esplora risorse (o equivalente) accedi alla cartella in cui hai installato Ghost. Dovresti vedere la seguente struttura all'interno della tua cartella Ghost principale:

Passo 2:

Accedi alla cartella "temi> temi", dove vedrai la cartella del tema predefinito "casper".

Passaggio 3:

In questa posizione, crea una nuova cartella e assegnagli il nome che desideri venga chiamato. In questo tutorial creeremo un tema chiamato "UberTheme" e così sarà il nome della cartella che creeremo:

Aggiungi i file richiesti

Ora aggiungeremo i file modello richiesti, senza i quali si otterranno errori se si tenta di attivare il nuovo tema.

I due file che sono assolutamente essenziali per l'esecuzione di un tema Ghost sono:

• index.hbs: controlla la visualizzazione dei tuoi ultimi post / homepage
• post.hbs: controlla la visualizzazione dei singoli post visualizzati singolarmente

Passo 1:

Nell'editor di codice preferito, crea un nuovo file e salvalo nella cartella "UberTheme" come "index.hbs". Non hai ancora alcun codice da aggiungere al file, quindi il file che crei sarà vuoto.

Passo 2:

Crea un secondo nuovo file, quindi salvalo anche nella cartella "UberTheme", questa volta come "post.hbs". Come il file "index.hbs" creato durante il passaggio precedente, anche questo file sarà vuoto / vuoto.

L'interno della tua cartella "UberTheme" dovrebbe apparire così:

Attiva il tema del tour

Ora dobbiamo avviare / riavviare Ghost per vedere "UberTheme" apparire nella lista dei temi disponibili nel pannello di amministrazione in modo che possiamo selezionarlo e attivarlo.

Passo 1:

Se hai già Ghost in esecuzione, spegnilo premendo CTRL + C nel tuo terminale e, quando richiesto, digita "y" seguito da INVIO.

Passo 2:

Avvia / riavvia Ghost digitando "npm start" nel tuo terminale.

Mancia: Se non sei sicuro di come aprire il terminale in modo da poter eseguire il passaggio precedente, vai alla cartella "Ghost", tieni premuto MAIUSC, fai clic con il pulsante destro del mouse per visualizzare il menu delle opzioni di Windows, quindi fai clic con il pulsante sinistro del mouse su "Apri finestra di comando qui".

Nota: I passaggi precedenti presuppongono che tu abbia visitato Come installare Ghost per istruzioni sull'installazione e l'esecuzione di Ghost.

Passaggio 3:

Visita il tuo pannello di amministrazione di Ghost, (esegui l'accesso se necessario), in genere all'indirizzo http: // localhost: 2368 / ghost

Passaggio 4:

Fai clic sul pulsante "IMPOSTAZIONI" nel menu in alto nel tuo pannello di amministrazione:

Verrai indirizzato alla sezione "IMPOSTAZIONI> Generale" del tuo pannello di amministrazione.

Passaggio 5:

Scorri fino alla fine della pagina, quindi individua ed espandi l'elenco a discesa "Tema". Dovresti vedere "UberTheme" come una delle opzioni:

Passaggio 6:

Seleziona "UberTheme" dall'elenco, quindi fai clic sul pulsante blu "SAVE" in alto a destra della pagina.

Step 7:

Nel tuo browser, visita il front-end dell'installazione di Ghost, in genere su http: // localhost: 2368 /

Risultato: non dovresti vedere nient'altro che una finestra del browser bianca vuota.

Se non vedi una finestra bianca vuota del browser e invece vedi qualcosa di simile all'immagine qui sotto, ripassa nuovamente i passaggi precedenti e assicurati di aver chiamato correttamente i file modello:

Completa la struttura di file e cartelle

Gli unici file assolutamente necessari sono i file modello "index.hbs" e "post.hbs" come descritto nell'ultima sezione.

Tuttavia ci sono altri due file che vorrai utilizzare in quasi tutti i temi, anche se non sono strettamente necessari, quindi li aggiungeremo ora. Organizzeremo anche una struttura di cartelle per contenere eventuali file aggiuntivi aggiunti al tema in seguito.

File Wrapper di temi

C'è solo un altro file di modello principale che desideri nella cartella principale del tuo tema, e questo è il file "default.hbs".

Questo file crea il codice "wrapper" per il tema, ovvero il codice della testa e del piede che verrà avvolto attorno a ciascuna pagina di un sito che esegue il tema. Conterrà il tuo standard , e sezioni, così come alcuni tag modello che emetteranno un codice Ghost importante.

Tratteremo ciò che in realtà deve essere scritto in questo file in modo più dettagliato in seguito. Per ora, creiamo solo il file vuoto stesso.

Passo 1:

Nell'editor di codice preferito, crea un nuovo file e salvalo nella cartella "UberTheme" come "default.hbs".

Crea la cartella dei tuoi parziali

Con il modello di Handlebars hai la possibilità di creare quelli che vengono chiamati file modello "parziali". Questi file di modelli parziali consentono di suddividere il tema in componenti più piccoli per una struttura più modulare e ben organizzata.

Ad esempio, potresti voler dividere il layout nelle sezioni "header", "main" e "footer", con il codice per ogni contenuto nel proprio file parziale. Vedrai questo processo in pratica più tardi. Per ora, creeremo solo la cartella che verrà utilizzata per contenere questi file "parziali".

Passo 1:

In Esplora risorse (o equivalente) accedi alla cartella "UberTheme".

Passo 2:

Crea una nuova cartella e chiamala "parziali".

Nota: È importante assicurarsi che questa cartella abbia un nome corretto e che si trovi nella cartella radice del tema, altrimenti Ghost non sarà in grado di trovare i file di modello parziali.

Struttura delle cartelle degli asset

Quando raggiungiamo la fase di progettazione, tutti i file relativi allo stile verranno inseriti nella cartella "risorse", inclusi file CSS, JS, font e immagini.

Nota: Non sei obbligato a nominare la cartella "assets" - puoi effettivamente nominarla come desideri. In questo tutorial stiamo semplicemente seguendo le linee guida sulle best practice di Ghost.

Passo 1:

In Esplora risorse (o equivalente) accedi alla cartella "UberTheme".

Passo 2:

Crea una nuova cartella e chiamala "risorse".

Passaggio 3:

Accedi alla cartella "risorse".

Passaggio 4:

Crea una nuova cartella e chiamala "css".

Passaggio 5:

Crea una nuova cartella e chiamala "caratteri".

Passaggio 6:

Crea una nuova cartella e chiamala "immagini".

Step 7:

Crea una nuova cartella e chiamala "js".

Il file del tema e la struttura della cartella ora dovrebbero assomigliare a questo:

Aggiungi il tuo foglio di stile

Tecnicamente, l'aggiunta del tuo foglio di stile potrebbe essere chiamata parte del processo di progettazione. Tuttavia, scriveremo il sezione nella prossima fase del tutorial, e come parte di ciò vorremmo collegare il foglio di stile del tema e verificarne il caricamento.

A tale scopo, creeremo un file di fogli di stile che aggiungerà un colore di sfondo al tema in modo che possiamo successivamente assicurarci che sia collegato al tuo sezione correttamente.

Passo 1:

Nell'editor di codice preferito, crea un nuovo file.

Passo 2:

Aggiungi il seguente CSS al file:

body background-color: # F0F0F0; 

Passaggio 3:

Salva il file nella cartella "UberTheme> assets> css" come "style.css".

Scrivere il file default.hbs

Ora stiamo andando a scrivere il vero codice dei template del tuo tema, iniziando con il file "default.hbs". (Vedi sopra per un riassunto di cosa è questo file).

Nota: Per distinguere tra tag html e tag template manubri, useremo il termine "tag html" o "tag modello" in modo da sapere a quale tipo si fa riferimento.

Passo 1:

Nell'editor di codice preferito, apri il file "default.hbs" dalla cartella principale del tema, ad esempio "UberTheme".

Passo 2:

Aggiungi il seguente codice:

    ! Impostazioni documento   ! Meta tag reattivi       

Tutto ciò che abbiamo fatto qui è aggiungere i tag doctype, html, head e body essenziali. Abbiamo anche aggiunto alcuni meta tag di base per impostare il set di caratteri, il Chrome Frame abilitato (se disponibile) o la modalità Edge (il più alto disponibile) per IE e per inizializzare il nostro display reattivo.

Nota: Nel codice precedente vedrete anche due esempi di come i commenti possono essere scritti nei file manubri (i commenti "Impostazioni documento" e "Tag meta reattivi"). I commenti sono differenziati quando viene aggiunto immediatamente un punto esclamativo dopo l'apertura di due serie di parentesi graffe, con la chiusura del commento contrassegnata da due serie di parentesi graffe. Ecco un altro esempio:

 ! Il tuo commento qui

Passaggio 3:

Aggiungi lo snippet seguente appena sopra il ! Meta tag reattivi codice:

 ! Meta pagina  

Ciò aggiunge tag meta html specifici della pagina.

Passaggio 4:

Aggiungi il seguente snippet sopra il ! Meta tag reattivi codice e direttamente sotto le linee di tag meta html della pagina che hai aggiunto in precedenza:

 ! Stili 

Questo aggiunge il link esterno al tuo foglio di stile.

Nota: Non è necessario un percorso completo per il foglio di stile, solo un percorso relativo alla cartella principale del tema.

Passaggio 5:

Aggiungi quanto segue sopra alla chiusura tag html:

  Ghost_head

Ghost usa questo tag per produrre uno stile e meta dati importanti nella sezione principale.

Nota: Per quelli con uno sfondo tematico WordPress, puoi confrontarlo con l'inclusione di wp_head () in tutto il tema sezioni.

Passaggio 6:

Sostituisci il tag html con il seguente codice:

Questo tag modello emetterà un nome di classe CSS diverso a seconda di quale area del sito viene caricata:

• Nella home page: "modello di casa"
• Sulle pagine di post più vecchi raggiunti tramite paginazione: "template-archivio"
• Su post singoli: "post-template"

Step 7:

Sotto il

  Ghost_foot

    ! Impostazioni documento   ! Meta pagina   ! Stili  ! Meta tag reattivi     Ghost_head   
 corpo 
  Ghost_foot  

 !< default