Accentsconagua

Aggiornamento Novità in Ghost Themes

Web design
Share

Poiché la nostra serie di tutorial per la creazione di temi Ghost originale è stata pubblicata alla fine del 2013, a lotto delle nuove modifiche sono passate attraverso l'API tematica. Ci sono alcuni nuovi requisiti per i temi, alcune cose che sono deprecate e una grande grande pila di nuovi aiutanti, contesti, modelli e funzionalità aggiunte.

In questo tutorial prenderemo "UberTheme", il tema che è stato completato nella lezione sei della serie, lo aggiorna per soddisfare i requisiti attuali e include alcune delle ultime aggiunte a Ghost.

Non implementeremo ogni nuova funzione nel nostro tema in quanto ce ne sono troppi per essere inclusi in un solo tutorial, tuttavia esamineremo molte di queste fantastiche nuove funzionalità uguali.

Nuovi requisiti:

File "package.json"

I temi richiedono ora un file "package.json" per definire il nome del tema. Questo file può anche contenere il numero di versione del tema.

Nella cartella principale del tuo UberTheme, crea un file chiamato "package.json" e aggiungi il seguente codice all'interno:

"nome": "UberTheme", "versione": "1.0.1"

Al momento i temi usano solo questi due campi, ma man mano che l'ecosistema Ghost crescerà verranno aggiunti ulteriori campi per esporre le informazioni degli sviluppatori e aiutare con gli aggiornamenti e la gestione della compatibilità.

Maggiori informazioni possono essere trovate nei documenti dello sviluppatore Ghost.

Uso dell'helper asset

Ogni volta che si carica CSS, JS o immagini dalla cartella "assets" del tema, si dovrebbe ora utilizzare bene aiutante. Questo aiuta con la memorizzazione nella cache, garantendo percorsi di caricamento corretti e assicurandosi che i temi siano strutturati in modo uniforme in modo che le persone possano contare sulla ricerca di una cartella "risorse" opportunamente utilizzata in qualsiasi tema.

Apri il file "default.hbs" di UberTheme per modificare e individuare le righe da 12 a 14:

  ! Script

Modificali per usare il bene aiutante come segue:

  ! Script

Leggi di più nei documenti di sviluppo di Ghost.

deprecato

In realtà, in UberTheme non usavamo nulla del genere, quindi non sarà necessario apportare modifiche al tema a causa della deprecazione. Tuttavia, in uno qualsiasi dei tuoi altri progetti a tema Ghost, assicurati di non utilizzare più queste funzionalità:

pageUrl Helper

Questo aiutante era qualcosa che poteva essere utilizzato nei modelli di impaginazione. Adesso, usa  PAGE_URL anziché.

Author.email

Questo helper viene rimosso e ora emette solo una stringa vuota. Controlla le sezioni dell'autore e assicurati che non sia utilizzato.

Classi archive-modello e pagina

Queste classi venivano utilizzate per l'output se si utilizzava Body_class aiutante, ma non sono più sul posto.

Sulle pagine, post-modello Classe

Il post-modello classe utilizzata per essere emessa tramite il Body_class helper sulle pagine, ma ora appare solo nei post.

Nuovi contesti e modelli

Ghost ha un certo numero di "contesti" in cui potresti trovarti mentre navighi in un blog. Ad esempio, quando leggi un singolo post sei nel contesto "post". Ora ci sono diversi contesti aggiunti di recente che mostrano vari tipi di contenuti. Di seguito, tratteremo i nuovi contesti "autore", "pagina", "tag" e "home".

Oltre a questi nuovi contesti, ci sono anche diversi nuovi modelli che puoi aggiungere al tuo tema per livelli più fini di controllo sulla presentazione. Si noti che se si aggiungono nuovi modelli al tema, sarà necessario riavviare Ghost per poterli prelevare dal sistema e diventare operativi.

Pagine statiche / Contesto pagina e Modelli pagina personalizzati

Ghost ora supporta pagine statiche e post, rendendolo perfetto in molti modi per la creazione di un tipico sito di piccole imprese a cinque pagine. Per creare una pagina statica, prima aggiungi un post normale, quindi fai clic sul piccolo Ingranaggio icona nell'angolo in basso a destra dell'interfaccia di modifica. Quindi selezionare la casella nella barra laterale delle impostazioni etichettata Trasforma questo post in una pagina statica.

Aggiungi un modello "page.hbs" al tuo tema per controllare lo stile di pagina statico, oppure lascia che ricada usando il modello "post.hbs".

In UberTheme, duplicare il modello "post.hbs" esistente e rinominarlo in "page.hbs". Rimuoveremo il markup da questo modello di cui le pagine non hanno realmente bisogno, vale a dire la data pubblicata, i tag, la barra di condivisione, le informazioni sull'autore e l'impaginazione.

Individua il elemento sulla riga 7 ed eliminarlo:

Ora cancella fino in fondo dalla riga 12:

#if tag

... fino alla riga 38, subito prima della chiusura etichetta:

  /Se

Quindi elimina anche da quella che ora è la riga 14, alla riga 18:

## pagination 
 Pagination 
 /Se

Le tue pagine dovrebbero ora apparire con solo il titolo e il contenuto della pagina:

È inoltre possibile creare modelli per pagine specifiche con la sintassi di denominazione del file "page - slug. Hbs", ad es. “pagina-contatto-us.hbs”.

Leggi di più nei documenti dello sviluppatore Ghost.

Pagina dell'autore / Contesto e modello di autore personalizzato

Ora che Ghost supporta più utenti, è possibile vedere un elenco di tutti i post scritti da un particolare autore. Per poter accedere facilmente a questi elenchi di post dell'autore, devi aggiungere l'attribuzione dell'autore alla visualizzazione dei post del tema.

Innanzitutto, aggiungeremo un'attribuzione dell'autore a UberTheme modificando il file "index.hbs" e aggiungendo il seguente codice subito prima del soddisfare etichetta:

Scritto da autore

Dovrai anche fare la stessa aggiunta nel file "post.hbs".

Dalla cartella "LESS" del progetto del tema, modifica anche il file "layout.less" e aggiungi questo stile, per mettere in corsivo il testo dell'autore:

.author font-style: italic;

Ora dovresti avere un'attribuzione di autore nella parte superiore dei tuoi post, in questo modo:

Noterai che il nome dell'autore è automaticamente collegato; quel link va a una visualizzazione di tutti i post scritti dall'autore in questione. Per impostazione predefinita, questo elenco di post dell'autore utilizza il modello "index.hbs", ma puoi anche personalizzare la presentazione con un modello denominato "author.hbs".

Per i modelli specifici dell'autore utilizzare la sintassi di denominazione del file "author - slug. Hbs", ad es. “autore-kezz.hbs”.

Ancora una volta, si può trovare di più su questo nei documenti dello sviluppatore Ghost.

Pagine tag / Contesto tag e modelli di tag personalizzati

Quando si usa il tag aiutante per mostrare i tag associati ai post, ogni tag verrà ora collegato a una pagina che mostra tutti i post con lo stesso tag.

Creare un file modello "tag.hbs" se si desidera personalizzare la visualizzazione della pagina di tag del tema o, in alternativa, lasciarlo tornare al file "index.hbs".

Per aggiungere una pagina di tag a UberTheme, duplicare il modello "index.hbs" e rinominarlo in "tag.hbs". Subito dopo l'apertura

tag aggiungi questo codice:

#etichetta 
 
Post con tag: name
 
 /etichetta

Ciò aggiungerà un'intestazione al tag che elenca le pagine che mostrano il nome del tag corrente.

Nel tuo file "layout.less", dopo il .article_uber stile selettore, aggiungi questo codice:

.tag_heading font-size: 2rem; padding: 0 0 2rem 0; allineamento del testo: centro; margin-bottom: 0,25rem;

Quando vai a una pagina di elenco dei tag, ora dovresti avere una sezione di titolo per questo in questo modo:

Per creare modelli diversi per tag specifici, utilizzare la sintassi di denominazione del file "tag - slug. Hbs". Questo può essere ottimo per cose come la creazione di gallerie di immagini da post con tag "gallery", ad esempio, utilizzando un modello chiamato "tag-gallery.hbs".

Contesto domestico / modello di casa

Potresti desiderare di avere un modello diverso per la tua home page rispetto a quello che fai per gli elenchi successivi di post come pagine di persone. Ad esempio, potresti avere una grande immagine di copertina o una presentazione sulla tua home page che non vuoi che i visitatori debbano scorrere di nuovo sulla pagina successiva dei post.

Per personalizzare la visualizzazione della pagina iniziale, crea un modello denominato "home.hbs".

Leggi di più nei documenti dello sviluppatore Ghost.

Pagine di errore personalizzate

Se desideri controllare la presentazione esatta delle pagine di errore, ora puoi creare un modello chiamato "error.hbs".

Leggi di più nel (puoi indovinare?) Documenti dello sviluppatore Ghost!

Nuovi aiutanti

Ghost ha introdotto diversi nuovi aiutanti; tipo di tag modello che ti aiutano a produrre determinati tipi di contenuti nel tuo tema.

navigation Helper

È ora possibile creare menu di navigazione di base in Ghost, andando a Impostazioni> Navigazione nell'area amministrativa.

Per far apparire un menu nav nel tuo UberTheme, apri il file "header.hbs" dalla cartella "parziali" e aggiungi questo codice prima dell'ultimo tag div di chiusura:

Dalla cartella "LESS" del progetto, apri "layout.less" e individua il file .header_uber classe. In essa, sulla linea 33, cambia il padding-bottom valore da:

padding-bottom: 3 * @ golden + 0em;

… a:

padding-bottom: 1.5 * @golden + 0em;

Quindi aggiungi il codice seguente per modellare il tuo nuovo menu di navigazione:

ul.nav list-style-type: none; margin-top: 1.5 * @golden + 0em; padding: 0; display: flex; justify-content: center; border-top: 0.0625rem luce solida (@ color_03, 33%); border-bottom: 0.0625rem solid lighten (@ color_03, 33%); background-color: lighten (@ color_03, 42%); li margin: 0 0.25em; imbottitura: 0,75em 1em; a decorazione del testo: nessuna;

Nota: Stiamo usando flexbox qui per l'implementazione rapida e semplice dei menu, ma se hai bisogno di supportare i browser legacy potresti voler utilizzare un approccio diverso.

Il tema dovrebbe ora avere un menu di navigazione simile a questo:

Maggiori informazioni sulla navigazione nel ... sai.

image Helper

Ghost ora offre la possibilità di aggiungere un'immagine in primo piano a qualsiasi post. Per aggiungere un'immagine, fai clic sull'icona dell'ingranaggio in basso a destra dell'interfaccia di modifica del post, quindi fai clic su Aggiungi immagine post piazza nella parte superiore della barra laterale che si apre. In alternativa, trascina e rilascia un'immagine su di essa.

Per stampare l'immagine del post usa il Immagine aiutante. In UberTheme, apri il file "index.hbs" e individua il file soddisfare etichetta sulla linea 12:

 soddisfare

Direttamente sopra di esso, aggiungi un elemento immagine usando il Immagine aiuto in src attributo. Useremo anche il titolo del post nel alt attributo e avvolgere con un #if immagine ... / if controlla per assicurarti che ci sia un'immagine da mostrare:

 #if immagine titolo / if content

Ora dovresti essere in grado di vedere qualsiasi immagine post aggiunta proprio sotto il titolo del post nel tuo tema, in questo modo:

Vai, documenti.

#has Helper

Il nuovo  #has helper ti consente di controllare se un post ha un certo autore come autore e / o ha determinati tag associati ad esso. Questo ti permette di fare cose come la creazione di diversi tipi di presentazione per diversi autori o, nel caso di tag, l'impostazione di diversi tipi di post simili ai temi di Tumblr o ai formati di post WordPress.

Ad esempio, potresti avere tutti i post contrassegnati come "foto" presentati con un layout fotografico speciale, tutti i post contrassegnati come "video" presentati a modo loro e altri post che tornano al markup predefinito:

#has tag = "foto" Speciale foto post presentazione qui else #has tag = "video" Speciale video post presentazione qui else Torna alla presentazione predefinita / ha / has

Documenti.

#is Helper

Finora abbiamo analizzato molti dei nuovi "contesti" all'interno di un sito Ghost, come "post", "autore", "pagina", "tag" e "home". Il #è helper ti offre un modo per controllare l'output in un modello a seconda del contesto in cui viene utilizzato il modello.

Ad esempio, invece di creare un modello "tag.hbs" diverso come abbiamo fatto in precedenza, potresti aggiungere quanto segue al tuo file "index.hbs":

#is "tag" #tag 
 
Post con tag: name
 
 / tag / is

Il #is "tag" controlli di riga per vedere se il contesto corrente è "tag", cioè che il visualizzatore guarda un elenco di post sotto un determinato tag e solo allora emetterà l'intestazione del tag.

Leggi di più.

#prev_post e #next_post helper

Se lo desideri, ora puoi aggiungere un Prossimo post e a Messaggio precedente collegamento per consentire ai lettori di passare direttamente dalla lettura di un post a un altro. Questi collegamenti dovrebbero essere aggiunti al modello "post.hbs".

Un esempio di come questi collegamenti potrebbero essere implementati, (dalla pagina dei documenti Ghost), è il seguente:

#inviare 
titolo
 
 soddisfare 
 #prev_post title / prec_post #next_post title / next_post / post

Sostituire i modelli

Tutti i modelli finora trattati corrispondono a determinati contesti, tuttavia alcuni di essi possono essere utilizzati per controllare l'output di determinati helper, ad es.. navigazione e Pagination. Di default Ghost gestisce automaticamente l'output di questi helper, ma hai la possibilità di definire il tuo output all'interno del tuo tema.

Modello di navigazione

L'output di markup predefinito da navigazione l'aiutante è:

     #foreach navigation 
  • etichetta
    •  /per ciascuno

Per utilizzare invece il tuo markup di navigazione, crea un file denominato "navigation.hbs" e posizionalo nella directory dei partial del tuo tema.

Leggi di più nei documenti.

Modello di impaginazione

La possibilità di creare un modello personalizzato per il Pagination l'helper non è in realtà nuovo, ma è qualcosa che non abbiamo trattato in precedenza nella serie e vale quindi la pena di essere menzionato qui. Il predefinito Pagination codice in Ghost è:

Sostituisci questo codice con il tuo creando un modello chiamato "pagination.hbs" nella cartella "parziali" del tuo tema.

Altro qui nei documenti.

Caratteristiche extra

Oltre a nuovi contesti, modelli e aiutanti, Ghost ha aggiunto alcune altre cose nel mix.

Messaggi in primo piano

Se desideri contrassegnare un post specifico come "In primo piano", ora ci sono due modi nell'interfaccia di amministrazione.

Dallo spazio di amministrazione che elenca tutti i tuoi post, fai clic sulla piccola stella nell'angolo in alto a sinistra della finestra di anteprima del post.

Dall'interno dell'editor di post, fai clic sull'icona dell'ingranaggio in basso a destra dello schermo, quindi seleziona la casella con l'etichetta Metti in evidenza questo post.

Nel tuo tema, se desideri utilizzare un markup diverso per i post in primo piano, controlla se è presente un post #if featured

#foreach posts #if featured  altro  / if / foreach

Anche i post in primo piano sono di classe In primo piano permettendoti di indirizzarli per uno stile diverso nel tuo CSS. Affinché questa classe sia emessa, includere il  Post_class aiutante nei tuoi post. 

Ad esempio in "index.hbs" di UberTheme, i file "post.hbs" e "page.hbs" cambiano questa riga:

… a:

Per impostazione predefinita, i post in primo piano non sono posizionati sopra gli altri post, sono nella loro posizione normale in base a quando sono stati pubblicati. Tuttavia, se desideri visualizzare per primi i post in primo piano, avrai bisogno di due loop di post: uno per i post in primo piano e uno per i post normali.

#foreach posts #if featured ! - Mostra i post in primo piano qui - / if / foreach #foreach posts #unless featured ! - Mostra post regolari qui - / unless / foreach

Tutti cantiamo ora: leggi di più nei documenti.

Favicon personalizzati

Per impostare una favicon personalizzata, inserisci il file "favicon.ico" nella cartella "assets" e caricalo nel file sezione del tuo tema con

asset "/favicon.ico"

Leggi di più su Wikipedia (scherzando, prova i documenti Ghost).

Avvolgendo

Si tratta di un sacco di nuovi poteri aggiunti allo sviluppo del tema Ghost, con una miriade di nuove opportunità per lo sviluppo di temi creativi!

Per riassumere, abbiamo:

  • File "package.json" e bene ora è necessario l'uso dell'assistente
  • Aggiunta la navigazione, con la possibilità di personalizzare l'output HTML
  • Aggiunte immagini in primo piano
  • Nuovi aiutanti per consentire molte più opzioni nel markup
  • Pagine statiche e modelli personalizzati per loro
  • Tag pagine e modelli personalizzati per loro
  • Pagine dell'autore e modelli personalizzati per loro
  • Modello di pagina iniziale
  • Modello di errore personalizzato
  • Post in evidenza
  • Favicon personalizzabili

Anche con tutto ciò che abbiamo trattato qui, ci sono ancora più nuovi aiutanti e funzionalità disponibili in Ghost, oltre a maggiori dettagli su tutto quanto sopra, quindi assicurati di avere una buona lettura su themes.ghost.org per ottenere tutti gli ins e fuori.

In allegato a questo tutorial troverai un download del file sorgente dove puoi trovare il tema aggiornato, oltre al file "layout.less" modificato. Usa UberTheme come campo di prova per familiarizzare con tutto ciò che è nuovo in Ghost, poi vai là fuori e crea alcuni temi fantastici!

Mercato Envato

Non dimenticare di controllare la categoria Ghost sul mercato Envato!

Web design
×