Organizarea fișierelor tematice și a folderelor

Aceasta este a doua parte a seriei de tematici Ghost. Totul de aici presupune că aveți o înțelegere fundamentală a lui Ghost. Dacă nu, înainte de a continua, vă rugăm să aveți timp să citiți Înțelegerea Ghost: Etape de Design).

Așa cum am discutat în partea anterioară, există două etape pentru a crea o temă pentru Ghost: Crearea și modelarea fișierelor de șabloane.

În acest tutorial ne vom concentra pe prima etapă, ghidându-vă pas cu pas prin procesul de configurare a șabloanelor temei. Veți afla despre fișierul șablonului și sistemul parțial al lui Ghost, etichetele șablonului Handlebars și cum să scrieți scheletul de marcare al temei.

Notă: Acest tutorial este realizat pe o mașină Windows, deci vă rugăm să urmați pașii echivalenți pe sistemul dvs. de operare preferat.

De asemenea, va trebui să aveți editorul de cod preferat la îndemână; acest tutorial va fi realizat în Text Sublim 2.

Instalarea Ghost Local

Primul lucru pe care trebuie să-l faceți este să instalați Ghost pe mașina dvs. locală. A face acest lucru este destul de ușor, atâta timp cât aveți cerințele prealabile cerute în sistemul dumneavoastră. Nu este nevoie să rulați XAMPP sau echivalentul pentru a rula Ghost pe mașina dvs. locală, deoarece va funcționa în sine.

Notă: Ocazional când creați o nouă temă, reporniți Ghost și apoi selectați noua temă în admin, este posibil să încărcați CSS din tema anterioară. Dacă întâmpinați această problemă în timpul completării acestei serii de tutorial sau oricând în timp ce creați o temă nouă tot ce trebuie să faceți este să efectuați oa doua repornire a Ghost. O repornire suplimentară ar trebui să elibereze memoria cache, astfel încât CSS-ul noii teme devine vizibil.

După ce ați urmat instrucțiunile și ați instalat Ghost pe mașina dvs. locală (și ați verificat că funcționează corect), veți fi gata să începeți să creați tema Ghost începând cu pașii de mai jos.

Începeți o nouă Temă Blank

Pentru a începe, vom crea și vom activa o temă Ghost necompletată cu un minim absolut de fișiere necesare.

Pasul 1:

 
În Windows Explorer (sau echivalent) navigați la folderul în care ați instalat Ghost. Ar trebui să vedeți următoarea structură în dosarul principal Ghost:

Pasul 2:

Navigați în dosarul "conținut> teme", unde veți vedea folderul temei implicite "casper".

Pasul 3:

În această locație, creați un nou dosar și numiți-l indiferent ce doriți să fie numit tema. În acest tutorial vom crea o temă numită "UberTheme" și astfel este numele folderului pe care îl vom crea:

Adăugați fișierele necesare

Vom adăuga acum fișierele șablon necesare, fără de care veți obține erori dacă încercați să activați noua temă.

Cele două fișiere care sunt absolut esențiale pentru o temă Ghost pentru a rula sunt:

• index.hbs: controlează afișarea ultimelor mesaje / pagină de pornire
• post.hbs: controlează afișarea mesajelor individuale vizualizate individual

Pasul 1:

În editorul de cod preferat, creați un fișier nou, apoi salvați-l în folderul "UberTheme" ca "index.hbs". Nu aveți niciun cod pe care să-l adăugați încă la fișier, astfel încât fișierul pe care îl creați să fie necompletat.

Pasul 2:

Creați un al doilea fișier nou, apoi salvați-l și în folderul dvs. "UberTheme", de data aceasta ca "post.hbs". Ca fișierul "index.hbs" pe care l-ați creat în timpul etapei anterioare, acest fișier va fi, de asemenea, gol / necompletat.

Interiorul dosarului "UberTheme" ar trebui să arate astfel:

Activați Tema Turului

Acum trebuie să pornim / reporni Ghost pentru a vedea "UberTheme" veni în lista de teme disponibile în panoul de administrare pentru a putea selecta și activa.

Pasul 1:

Dacă aveți deja Ghost rulează, închideți-l apăsând CTRL + C în terminal, apoi, când vi se solicită, tastați "y" urmat de ENTER.

Pasul 2:

Porniți / reporniți Ghost tastând "npm start" în terminalul dvs..

Bacsis: Dacă nu sunteți sigur cum să deschideți terminalul astfel încât să puteți efectua pasul de mai sus, navigați la dosarul "Ghost", apăsați și mențineți apăsat SHIFT, faceți clic dreapta pentru a afișa meniul opțiunilor Windows, apoi faceți clic stânga pe "Deschide fereastra de comandă aici".

Notă: Pașii de mai sus presupun că ați vizitat Cum se instalează Ghost pentru instrucțiuni despre instalarea și rularea Ghost.

Pasul 3:

Vizitați panoul Ghost admin, (conectându-vă, dacă este necesar), aflat de obicei la http: // localhost: 2368 / ghost

Pasul 4:

Faceți clic pe butonul "SETĂRI" din meniul de sus din panoul dvs. admin:

Aceasta vă va duce la secțiunea "SETĂRI> Generalități" a panoului de administrare.

Pasul 5:

Derulați în jos în partea de jos a paginii, apoi găsiți și extindeți lista derulantă "Tema". Ar trebui să vedeți "UberTheme" ca una dintre opțiunile:

Pasul 6:

Selectați "UberTheme" din listă, apoi faceți clic pe butonul albastru "SAVE" din partea dreaptă sus a paginii.

Pasul 7:

În browser-ul dvs., vizitați partea din față a instalării Ghost, aflată în mod obișnuit la adresa http: // localhost: 2368 /

Rezultat: Nu trebuie să vedeți decât o fereastră de browser alb albă.

Dacă nu vedeți o fereastră de browser alb albă și în loc să vedeți ceva asemănător imaginii de mai jos, parcurgeți din nou pașii de mai sus și asigurați-vă că ați denumit corect fișierele șablonului:

Finalizați structura fișierelor și a folderelor

Singurele fișiere absolut necesare sunt fișierele șablon "index.hbs" și "post.hbs" descrise în ultima secțiune.

Cu toate acestea, există încă două fișiere pe care doriți să le utilizați în aproape orice temă, chiar dacă acestea nu sunt strict necesare, astfel încât să le adăugăm acum. De asemenea, vom organiza o structură de directoare pentru a ține mai târziu orice fișiere suplimentare adăugate la tema dvs..

Fișier Wrapper tematic

Există doar un singur fișier șablon principal pe care doriți să îl doriți în directorul rădăcină al temei și acesta este fișierul "default.hbs".

Acest fișier creează codul "wrapper" pentru tema dvs., adică codul capului și al piciorului care va fi înfășurat în jurul fiecărei pagini a unui site care rulează tema. Va conține standardul , și secțiuni, precum și unele etichete șablon care vor scoate codul Ghost important.

Vom acoperi ceea ce trebuie scris în acest fișier mai detaliat mai târziu. Pentru moment, hai să creăm doar fișierul gol în sine.

Pasul 1:

În editorul de cod preferat, creați un fișier nou apoi salvați-l în folderul "UberTheme" ca "default.hbs".

Creați dosarul parțial

Cu template-urile Handlebars aveți posibilitatea de a crea ceea ce se numește fișiere șablon "parțiale". Aceste fișiere parțiale șablon vă permit să vă rupeți tema în jos în componente mai mici pentru o structură mai modulară, bine organizată.

De exemplu, ați putea împărți aspectul în secțiuni "header", "principal" și "subsol", cu codul pentru fiecare conținut în propriul fișier parțial. Veți vedea acest proces în practică mai târziu. Pentru moment, vom crea doar folderul care va fi folosit pentru a ține aceste fișiere "parțiale".

Pasul 1:

În Windows Explorer (sau echivalent) navigați la folderul "UberTheme".

Pasul 2:

Creați un dosar nou și denumiți-l "partiale".

Notă: Este important să vă asigurați că acest dosar este denumit corect și că este localizat în directorul rădăcină al temei sau că Ghost nu va putea găsi fișierele șablon parțial.

Structura folderului activelor

Când ajungem la etapa de styling, toate fișierele legate de styling vor intra în folderul "assets", inclusiv CSS, JS, fonturi și fișiere imagine.

Notă: Nu aveți obligația de a numi dosarul "active" - ​​puteți să-i numiți, de fapt, orice doriți. Pur și simplu urmăm cele mai bune practici din Ghost în acest tutorial.

Pasul 1:

În Windows Explorer (sau echivalent) navigați la folderul "UberTheme".

Pasul 2:

Creați un folder nou și denumiți-l "active".

Pasul 3:

Navigați în dosarul "active".

Pasul 4:

Creați un folder nou și numiți-l "css".

Pasul 5:

Creați un folder nou și denumiți-l "fonturi".

Pasul 6:

Creați un folder nou și denumiți-l "imagini".

Pasul 7:

Creați un folder nou și denumiți-l "js".

Structura fișierului și a dosarului temei ar trebui să arate astfel:

Adăugați fișierul cu foi de stil

Din punct de vedere tehnic, adăugarea fișierului stilistic ar putea fi numit parte a procesului de styling. Cu toate acestea, vom scrie în etapa următoare a tutorialului și, ca parte a acestuia, vom dori să conectăm foaia de stil a temei și să verificăm că se încarcă.

În acest scop, vom crea un fișier de stil care va adăuga o culoare de fundal pentru tema dvs., astfel încât să putem asigura ulterior că este conectat în secțiune corectă.

Pasul 1:

În editorul de cod preferat, creați un fișier nou.

Pasul 2:

Adăugați următorul CSS în fișier:

corp fundal-culoare: # F0F0F0; 

Pasul 3:

Salvați fișierul în folderul "UberTheme> assets> css" ca "style.css".

Scrierea fișierului default.hbs

Acum vom trece la scrierea codului templating al temei dvs., începând cu fișierul "default.hbs". (Vezi mai sus pentru un rezumat al acestui fișier).

Notă: Pentru a face diferența între etichetele html și etichetele de șablon pentru ghidon, vom folosi fie termenul "etichete html", fie "etichete șablon", astfel încât să știți la ce tip se face trimitere.

Pasul 1:

În editorul de cod preferat, deschideți fișierul "default.hbs" din dosarul rădăcină al temei, adică "UberTheme".

Pasul 2:

Adăugați următorul cod:

    ! Setări pentru documente   ! Meta etichete responsabile       

Tot ce am făcut aici este adăugarea etichetelor esențiale doctype, html, head and body. De asemenea, am adăugat câteva metaetichete de bază pentru a seta setul de caractere, pentru Chrome (dacă este disponibil) sau pentru modul Edge (cel mai mare disponibil) pentru IE și pentru a inițializa afișajul nostru receptiv.

Notă: În codul de mai sus veți vedea și două exemple privind modul în care pot fi scrise comentariile în fișierele ghidonului (comentariile "Document Settings" și "Responsive Meta Tags"). Comentariile sunt diferențiate atunci când există un semn de exclamare adăugat imediat după deschiderea a două seturi de paranteze curl, cu închiderea comentariului marcat de două seturi de închidere de paranteze curl. Iată un alt exemplu:

 ! Comentariul dvs. aici

Pasul 3:

Adăugați următorul fragment chiar deasupra ! Meta etichete responsabile cod:

 ! Meta pagină  

Aceasta adaugă tag-uri meta html specifice paginii.

Pasul 4:

Adăugați următorul fragment deasupra ! Meta etichete responsabile cod și direct sub linia de tag-uri meta html pe care ați adăugat-o anterior:

 ! Stiluri 

Aceasta adaugă linkul extern la foaia de stil.

Notă: Nu aveți nevoie de o cale completă pentru foaia de stil, ci doar o cale relativă la directorul rădăcină al temei.

Pasul 5:

Adăugați următoarele deasupra închiderii tag-ul html:

 Ghost_head

Ghost utilizează această etichetă pentru a scoate un stil important și meta date importante în secțiunea cap.

Notă: Pentru cei cu un fundal tematic WordPress, puteți compara acest lucru cu includerea lui wp_head () în toată tema secțiuni.

Pasul 6:

Înlocuiți html tag cu următorul cod:

Această etichetă șablon va afișa un alt nume de clasă CSS în funcție de aria de încărcare a site-ului:

• Pe pagina de pornire: "home-template"
• În paginile posturilor mai vechi obținute prin paginare: "arhivă-șablon"
• Pe postări unice: "post-șablon"

Pasul 7:

Sub

 Ghost_foot

    ! Setări pentru documente   ! Meta pagină   ! Stiluri  ! Meta etichete responsabile    Ghost_head   
 corp 
 Ghost_foot  

 !< default