Accentsconagua

Actualizare Ce este nou în temele Ghost

Web design
Share

Deoarece versiunea originală a temei de creație Ghost a fost publicată la sfârșitul anului 2013, a mult de noi modificări au trecut prin API tematică. Există câteva cerințe noi pentru teme, câteva lucruri care sunt depreciate și un mare set de noi ajutoare, contexte, șabloane și caracteristici adăugate.

În acest tutorial vom lua "UberTheme", tema care a fost finalizată în lecția a șasea a seriei, o actualizați pentru a se conforma cerințelor actuale și include unele dintre cele mai recente adăugiri la Ghost.

Nu vom implementa fiecare o nouă caracteristică în tema noastră, deoarece sunt prea multe pentru a se potrivi într-un tutorial, cu toate acestea, vom trece peste multe dintre aceste noi caracteristici noi la fel.

Cerințe noi:

"Package.json" Fișier

Temele necesită acum un fișier "package.json" pentru a defini numele temei. Acest fișier poate conține, de asemenea, numărul versiunii temei.

În directorul rădăcină al UberTheme, creați un fișier numit "package.json" și adăugați următorul cod în interiorul:

"nume": "UberTheme", "versiune": "1.0.1"

În momentul de față, temele utilizează doar aceste două câmpuri, dar pe măsură ce ecosistemul Ghost va crește câmpuri suplimentare vor fi adăugate pentru a expune informațiile despre dezvoltatori și pentru a ajuta la actualizarea și gestionarea compatibilității.

Mai multe informații pot fi găsite în documentele dezvoltatorului Ghost.

Utilizarea asset Helper

Ori de câte ori încărcați CSS, JS sau imagini din folderul temelor "active", ar trebui să utilizați acum Activ ajutor. Acest lucru ajută la cache, asigurarea căilor corecte de încărcare și asigurarea că temele sunt structurate uniform, astfel încât oamenii să poată conta pe găsirea unui dosar "activ" utilizat în orice temă.

Deschideți fișierul "default.hbs" al UberTheme pentru editarea și localizarea liniilor de la 12 la 14:

  ! Scripturi

Editați-le pentru a utiliza Activ ajutor după cum urmează:

  ! Scripturi

Citiți mai multe în docurile Ghost dev.

depreciată

În UberTheme nu am folosit niciunul dintre urmãtoarele lucruri, astfel încât nu va trebui sã faceþi nici o modificare a temei din cauza deprecierii. Cu toate acestea, în oricare dintre celelalte proiecte tematice Ghost, asigurați-vă că nu mai folosiți aceste funcții:

pageUrl Ajutor

Acest ajutor a fost ceva care ar putea fi folosit în șabloane de paginare. Acum, folosiți-vă PAGE_URL in schimb.

Author.email

Acest ajutor este eliminat și acum trimite doar un șir gol. Verificați dublu secțiunile autorului și asigurați-vă că nu este folosit.

Clase Arhiva-șablon și pagină

Aceste clase au fost utilizate la ieșirea în cazul utilizării Body_class ajutător, dar nu mai există.

Pe paginile, post-șablon Clasă

post-șablon clasa a fost folosită pentru a fi exportată prin Body_class ajutor pe pagini, dar acum apare doar pe postări.

Contexte noi și șabloane

Ghost are un număr de "contexte" pe care le puteți găsi în timp ce navigați în jurul unui blog. De exemplu, când citești o singură postare, te afli în contextul "postare". Acum există câteva contexte recent adăugate care afișează diferite tipuri de conținut. Mai jos, vom acoperi noile contexte "autor", "pagină", ​​"etichetă" și "acasă".

Pe lângă aceste noi contexte, există și câteva șabloane noi pe care le puteți adăuga la tema dvs. pentru a obține niveluri mai înalte de control asupra prezentării. Rețineți că, dacă adăugați noi șabloane la tema dvs., va trebui să reporniți Ghost pentru ca acestea să fie preluate de sistem și să devină operaționale.

Pagini statice / Contexte pagină și șabloane de pagini personalizate

Ghost suportă acum pagini statice și postări, ceea ce îl face perfect în multe moduri pentru construirea unui site tipic pentru afaceri de mici dimensiuni. Pentru a crea o pagină statică, mai întâi adăugați o postare obișnuită, apoi faceți clic pe micul Angrenaj pictograma din colțul din dreapta jos al interfeței de editare. Apoi bifați caseta din bara laterală de setări etichetate Transformați acest post într-o pagină statică.

Adăugați un șablon "page.hbs" la tema dvs. pentru a controla stilul paginii statice sau lăsați-l să revină la utilizarea șablonului "post.hbs".

În UberTheme, duplicați șablonul existent "post.hbs" și redenumiți-l la "page.hbs". Vom elimina marcajul din acest șablon pe care paginile nu au nevoie într-adevăr, adică data postată, etichetele, bara de partajare, informațiile despre autor și paginare.

Localizați element pe linia 7 și ștergeți-l:

Acum ștergeți tot drumul de la linia 12:

#if etichete

... până la linia 38, chiar înainte de închidere etichetă:

  /dacă

Apoi, ștergeți și din linia 14, la linia 18:

#în paginare 
 paginare 
 /dacă

Paginile dvs. ar trebui să apară acum doar cu titlul și conținutul paginii:

Șabloanele pentru anumite pagini pot fi create și cu sintaxa de denumire a fișierelor "page - slug. Hbs", de ex. „pagina-contact-us.hbs“.

Citiți mai multe în documentele dezvoltatorului Ghost.

Pagina de autor / Context și modelul de autor personalizat

Acum că Ghost acceptă mai mulți utilizatori, este posibil să vedeți o listă cu toate postările pe care le-a scris un anumit autor. Pentru a oferi acces facil la aceste liste de postări de autor, va trebui să adăugați atribuirea autorului în afișarea postării temei.

Mai întâi, vom adăuga o atribuire a autorului la UberTheme, editând fișierul "index.hbs" și adăugând următorul cod chiar înainte de conţinut etichetă:

Scris de author

De asemenea, veți dori să faceți aceeași adăugire în fișierul "post.hbs".

Din dosarul "LESS" al temei proiectului, editați fișierul "layout.less" și adăugați acest stil, pentru a redacta textul autorului:

.autor font-style: italic;

Ar trebui să aveți acum o atribuire de autor în partea de sus a postărilor dvs., după cum urmează:

Veți observa că numele autorului este conectat automat; această legătură duce la afișarea tuturor postărilor scrise de autorul în cauză. În mod implicit, această listă de postări de autor utilizează șablonul "index.hbs", dar puteți personaliza și prezentarea cu un șablon numit "author.hbs".

Pentru șabloanele specifice autorului, utilizați sintaxa de numire a fișierului "author - slug. Hbs", de ex. „autor-kezz.hbs“.

Din nou, mai pot fi găsite mai multe despre acest lucru în documentele dezvoltatorului Ghost.

Pagini etichete / Conținut etichetă și șabloane de etichete personalizate

Atunci când utilizați Etichete ajutător pentru a afișa etichete asociate postărilor, fiecare etichetă va conecta acum la o pagină care prezintă toate postările care poartă aceeași etichetă.

Creați un fișier șablon "tag.hbs" dacă doriți să personalizați afișarea paginii cu etichete a temei dvs. sau, alternativ, lăsați-o să revină la fișierul "index.hbs".

Pentru a adăuga o pagină de etichete la UberTheme, duplicați șablonul "index.hbs" și redenumi-l la "tag.hbs". Imediat după deschidere

eticheta adăugați acest cod:

#etichetă 
 
Mesaje postate: name
 
 /etichetă

Acest lucru va adăuga un antet în paginile cu înregistrări de etichete care vor afișa numele etichetei curente.

În fișierul "layout.less", după .article_uber selector stil, adăugați acest cod:

.tag_heading font-size: 2rem; umplutură: 0 0 2rem 0; text-align: centru; marginea-jos: 0.25rem;

Atunci când accesați o pagină cu înregistrări de etichete, ar trebui să aveți acum o secțiune pentru aceasta, astfel:

Pentru a crea șabloane diferite pentru anumite etichete, utilizați sintaxa de numire a fișierului "tag - slug. Hbs". Acest lucru poate fi grozav pentru lucruri precum crearea de galerii de imagini din posturile etichetate "galerie", de exemplu, folosind un șablon numit "tag-gallery.hbs".

Context de domiciliu / șablon de domiciliu

Este posibil să doriți să aveți un șablon diferit pentru pagina dvs. de pornire decât pentru listele ulterioare de postări, prin intermediul unei pagini de persoane. De exemplu, este posibil să aveți o imagine de acoperire mare sau o prezentare de diapozitive pe pagina dvs. de pornire, pe care nu doriți ca vizitatorii să trebuiască să o parcurgeți din nou pe următoarea pagină de postări.

Pentru a personaliza afișarea paginii dvs. de pornire, creați un șablon numit "home.hbs".

Citiți mai multe în documentele dezvoltatorului Ghost.

Pagini de eroare personalizate

Dacă doriți să controlați prezentarea exactă a paginilor de eroare, acum puteți crea un șablon numit "error.hbs".

Aflați mai multe în documentele (puteți să ghiciți?) Ghost developer docs!

Noi asistenți

Ghost a introdus câțiva ajutoare noi; gen de etichete șablon care vă ajută să obțineți anumite tipuri de conținut în tema dvs..

navigare Ajutor

Acum este posibil să creați meniuri de bază de navigare în Ghost, accesând Setări> Navigare în zona administratorului.

Pentru a crea un meniu nav în UberTheme, deschideți fișierul "header.hbs" din dosarul "partial" și adăugați acest cod înaintea ultimului tag div de închidere:

Din dosarul proiectului "LESS", deschideți "layout.less" și localizați .header_uber clasă. În el, pe linia 33, schimbați umplutură de fund valoare de la:

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

… la:

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

Apoi adăugați următorul cod pentru stilul noului meniu de navigare:

ul.nav list-style-type: none; marginea superioară: 1,5 * @golden + 0em; umplutura: 0; afișaj: flex; justify-content: centru; frontală superioară: 0.0625rem solidă ușoară (@ color_03, 33%); frontieră de fund: 0.0625rem solid luminat (@ color_03, 33%); fundal-culoare: lumina (@ color_03, 42%); li marja: 0 0.25em; umplutură: 0,75 sem 1em; a text-decoration: none;

Notă: Folosim flexbox aici pentru implementarea rapidă și ușoară a meniului, dar dacă aveți nevoie de suport pentru browserele moștenite, vă recomandăm să utilizați o abordare diferită.

Tema dvs. ar trebui să aibă acum un meniu de navigare care arată astfel:

Citiți mai multe despre navigarea în ... știți.

image Ajutor

Ghost oferă acum posibilitatea de a adăuga o imagine recomandată la orice postare. Pentru a adăuga o imagine, faceți clic pe pictograma roată mică din colțul din dreapta jos a interfeței de editare post, apoi faceți clic pe Adăugați o imagine postată pătrat în partea de sus a barei laterale care iese. Alternativ, glisați și fixați o imagine pe ea.

Pentru a scoate imaginea postului, utilizați imagine ajutor. În UberTheme, deschideți fișierul "index.hbs" și localizați conţinut etichetă pe linia 12:

 conţinut

Direct deasupra lui, adăugați un element de imagine folosind imagine helper în src atribut. De asemenea, vom folosi titlul postului în Alt atribuiți și împachetați-o cu un #if imagine ... / if verificați dacă aveți o imagine care să fie afișată:

 #if imagine titlu / if conținut

Ar trebui să puteți vedea acum orice imagine postată chiar sub titlul postului din tema dvs., cum ar fi:

Continuă, docs.

#has Ajutor

Noul #has helper vă permite să verificați dacă un post are un anumit autor ca scriitor și / sau dacă anumite taguri sunt asociate cu acesta. Acest lucru vă permite să faceți lucruri cum ar fi crearea diferitelor tipuri de prezentări pentru diferiți autori sau în cazul etichetelor, configurarea diferitelor tipuri de postări similare cu temele Tumblr sau cu formatele postale WordPress.

De exemplu, ați putea avea toate postările etichetate "fotografie" prezentate împreună cu un aspect special de fotografie, toate posturile etichetate "video" prezentate în modul lor propriu și alte postări care revin la marcajul implicit:

#has tag = "photo" Prezentare specială pentru postarea fotografiilor aici #has tag = "video" Prezentare specială pentru postarea videoclipurilor aici else Întoarcere la prezentarea implicită / are / has

Documente.

#is Ajutor

Până acum, am parcurs multe dintre noile "contexte" din cadrul unui site Ghost, cum ar fi "post", "autor", "pagină", ​​"etichetă" și "acasă". #este helper vă oferă o modalitate de a controla ieșirea într-un șablon în funcție de contextul în care se utilizează șablonul.

De exemplu, în loc să creați un șablon "tag.hbs" diferit, așa cum am făcut mai sus, puteți adăuga următoarele în fișierul "index.hbs":

#este "etichetă" #tag 
 
Mesaje postate: name
 
 / tag / este

 #este "etichetă" pentru a vedea dacă contextul actual este "etichetă", adică că spectatorul se uită la o listă de postări sub o anumită etichetă și numai atunci va scoate titlul etichetei.

Citeste mai mult.

#prev_post și # next_post Helpers

Dacă doriți, puteți adăuga acum Următorul mesaj și a Postul anterior link pentru a permite cititorilor să meargă direct de la citirea unei posturi în alta. Aceste linkuri ar trebui adăugate la șablonul "post.hbs".

Un exemplu de modul în care aceste linkuri ar putea fi implementate (din pagina Ghost docs) este următorul:

#post 
titlu
 
 conţinut 
 #prev_post title / prev_post #extensiune_post title / next_post / post

Șabloane suprasolicitate

Toate șabloanele pe care le-am acoperit până acum corespund anumitor contexte, cu toate acestea există unele care pot fi folosite pentru a controla ieșirea anumitor ajutoare, de ex.. navigare și paginare. În mod implicit, Ghost se ocupă automat de ieșirea acestor ajutoare, însă aveți opțiunea de a defini propria dvs. ieșire în cadrul temei.

Șablon de navigare

Efectul de marcare prestabilit de către navigare helper este:

     #pentru navigarea în prealabil 
  • eticheta
    •  /pentru fiecare

Pentru a utiliza în schimb propriul dvs. marcaj de navigare, creați un fișier numit "navigation.hbs" și plasați-l în directorul parțial al temei.

Citiți mai multe în docs.

Paginare Template

Abilitatea de a crea un șablon personalizat pentru paginare helper nu este de fapt nou, dar este ceva ce nu am acoperit anterior în serie și este, prin urmare, merită menționat aici. Valoarea implicită paginare cod în Ghost este:

Înlocuiți acest cod cu propriul dvs., creând un șablon numit "pagination.hbs" în dosarul "parțial" al temei.

Mai multe aici în docs.

Caracteristici suplimentare

Pe lângă contexte noi, șabloane și ajutoare, Ghost mai are și câteva lucruri adăugate în mix.

Posturi recomandate

Dacă doriți să marcați o anumită postare ca "Recomandată", există acum două moduri în interfața de administrare.

Din spațiul de administrare care afișează toate postările, faceți clic pe steaua mică din colțul din dreapta sus al ferestrei de previzualizare a postării.

Din interiorul editorului post, faceți clic pe pictograma roată mică din colțul din dreapta jos al ecranului, apoi bifați caseta etichetă Prezentați această postare.

În tema dvs., dacă doriți să folosiți marcare diferită pentru postările recomandate, verificați dacă este prezentată o postare #în cazul în care nu apare

#prezente posturi #în cazul în care nu sunt prezentate  Else  / if / foreach

Posturile recomandate poartă și clasa Recomandate permițându-vă să le vizați pentru stilul diferit în CSS. Pentru ca această clasă să fie afișată, includeți Post_class ajutor pe postările dvs.. 

De exemplu, în fișierele "index.hbs", "post.hbs" și "page.hbs" ale UberTheme se modifică această linie:

… la:

În mod prestabilit, postările recomandate nu sunt poziționate deasupra altor postări, ele se află în poziția lor obișnuită, bazate pe momentul în care au fost publicate. Cu toate acestea, dacă doriți să fie afișate mai întâi postările prezentate, veți avea nevoie de două bucle de postare: una pentru posturi recomandate și una pentru postări regulate.

#primite postări #început ca atare ! - Afișați posturile postate aici - / if #foreach posts # featured ! - Afișați mesajele regulate aici - / unless / foreach

Toată lumea cântă acum: citiți mai multe în docs.

Favicoane particularizate

Pentru a seta un favicon personalizat, plasați fișierul "favicon.ico" în dosarul "assets" și îl încărcați în cu tema cu tema

asset "/ favicon.ico"

Citiți mai multe pe Wikipedia (glumesc, încercați documentele Ghost).

Înfășurarea în sus

Aceasta este o mulțime de putere nouă adăugată în dezvoltarea temelor Ghost, cu o mulțime de noi oportunități de dezvoltare a temelor creative!

Pentru a rezuma, avem:

  • "Package.json" și Activ ajutor helper acum necesare
  • Navigarea a fost adăugată, cu posibilitatea de a personaliza ieșirea HTML
  • Imagini speciale adăugate
  • Noi ajutători pentru a permite mai multe opțiuni în marcare
  • Pagini statice și șabloane personalizate pentru ele
  • Etichetați paginile și șabloanele personalizate pentru ele
  • Paginile de autor și șabloanele personalizate pentru ele
  • Pagina principală șablon
  • Șablonul de eroare personalizat
  • Posturi recomandate
  • Favicoane personalizabile

Chiar și cu tot ce am acoperit aici, sunt încă mai mulți noi ajutători și caracteristici disponibile în Ghost, precum și mai multe detalii despre toate cele de mai sus, deci asigurați-vă că aveți o citire bună la themes.ghost.org pentru a obține toate ins și outs.

Atașat la acest tutorial, veți găsi un fișier de descărcare de unde puteți obține tema actualizată, precum și fișierul "layout.less" editat. Utilizați UberTheme ca loc de joacă teste pentru a vă familiariza cu tot ce este nou în Ghost, apoi ieșiți acolo și faceți câteva teme minunate!

Piața Envato

Nu uitați să verificați categoria Ghost de pe Envato Market!

Web design
×