Înțelegerea Ghost Etape de proiectare

Procesul de a construi teme pentru Ghost este incredibil de neted, simplu și foarte ușor de învățat. Dar, înainte de a începe să construiți o temă Ghost reală, este important și util să înțelegeți rolul pe care îl joacă temele în ecologia globală Ghost, astfel încât să puteți proiecta în mod optim.

Cea mai bună modalitate de a face acest lucru nu este să sari în capul unui proiect sau cod, ci să dobândiți o înțelegere aprofundată a Duhului însuși ca fundație.

În această primă parte a seriei dvs. de tutorial veți câștiga această fundație și, odată ce ați făcut, veți fi perfect plasat pentru a începe să vă construiți prima temă.


Ce este Duhul și cine este pentru el?

Ghost este o aplicație Open Source dedicată publicării de conținut.

De-a lungul ultimilor ani, instrumentele de publicare de conținut au evoluat pentru a permite oamenilor să se autofinanțeze doar despre orice tip de site de care ar putea avea nevoie. Fie că este vorba de un magazin online complex, de o prezentare de afaceri sau de un CMS cu drepturi depline, utilizatorii se pot ocupa de totul cu o experiență relativ mică.

Dar Ghost nu are de-a face cu niciunul din aceste lucruri complexe. Ghost este despre a pune accentul pe un singur lucru simplu: scris.

Este o platformă construită pe principiul simplității. Obiectivul său principal este de a ajuta scriitorii mai mult pe blog și să se concentreze mai puțin asupra componentei instrumentului de publicare a conținutului din ecuația de blogging.

Pentru dezvoltatorii de teme, aceasta introduce o schimbare a ritmului. În timp ce temele pentru alte platforme sunt adesea determinate de cererea utilizatorilor de a adăuga tot felul de complexități funcționale pe site-ul lor, platforma Ghost este condusă doar de un singur lucru. Sloganul pentru Ghost ne spune ce este:

Doar o platformă de bloguri

Din moment ce Ghost este concentrat 100% pe blogging, Ghost este: Doar pentru bloggeri.

Și în concordanță cu aceasta, design-ul de temă Ghost este, de asemenea, condus de un singur lucru: Doar bloguri tematice.

Acestea ar putea părea ca declarații evidente, dar ele sunt importante pentru a sublinia, pentru că pe o platformă axată pe scriere, fiind folosită de oameni care se concentrează pe scriere, trebuie să fie concepute și temele Ghost cu accent pe scriere.


Ghost Tema Design Filozofie

Ca parte a campaniei sale Kickstarter, fondatorul Ghost, John O'Nolan, a declarat următoarele:

... nu este vorba numai de a face ceva care arata bine, ci de a oferi instructorilor instrumente pentru a împinge blogging-ul si pentru a impinge jurnalismul la urmatorul nivel.

Aici se află filosofia pe care trebuie să o adopte designerii de temă Ghost pentru a servi cel mai bine utilizatorii Ghost: În primul rând, asigurați-vă că conținutul unui utilizator este mereu în față și centru.

Este o abordare comună în designul web pentru a se concentra pe grafica și aspectul general al designului, cu stilul de tipografie și de conținut care se întâmplă în sfârșit. Dar într-o temă Ghost conținutul nu ar trebui să ia niciodată un loc înapoi la alte aspecte ale designului.

Ca designer de temă fantomă, primul dvs. aspect ar trebui să fie modul în care va apărea conținutul, cu un accent puternic pe tipografie, iar restul designului temei ar trebui să se desfășoare în sprijinul acestuia.

Veți obține mai multe informații despre modul în care funcționează mai târziu în seria tutorial odată ce începem să construim o temă reală, dar înainte de a face acest lucru trebuie să învățăm mai multe despre platforma Ghost.


Platforma Ghost

Există câteva aspecte fundamentale ale lui Ghost pentru a fi conștienți de faptul că o diferențiază de celelalte platforme pe care le puteți folosi.

O aplicație JavaScript construită pe Node.js

Spre deosebire de majoritatea aplicațiilor curente de construire a site-urilor Web bazate pe PHP, Ghost este construit pe Node.js.

Node.js este o platformă software care interpretează și execută JavaScript în back-end. Puteți afla mai multe despre acest lucru la Nodejs.org, dar într-adevăr nu trebuie. O cunoaștere aprofundată a Node.js nu este necesară pentru a construi o temă Ghost - tot ce trebuie să știți va fi acoperită în această serie de tutori.

Mulți oameni consideră că Node.js este calea viitorului din mai multe motive; viteza fiind una dintre ele. Node.js a fost demonstrat că are performanțe mult mai rapide decât PHP în cadrul a numeroase teste de benchmarking, este o componentă cheie în spatele motivului pentru care Ghost rulează atât de blisteringly fast.

Pentru a lucra la o temă Ghost într-un mediu local, va trebui să instalați Node.js local. Din fericire, acest lucru este un proces foarte rapid și ușor. Vă vom îndruma instrucțiunile despre cum să faceți acest lucru înainte de a începe procesul de construire a unei teme în a doua parte a acestei serii tutorial.

Notă: Ar trebui să fiți conștienți de faptul că pe termen scurt s-ar putea întâmpina unele dureri crescânde care să vă pună în aplicare site-urile dvs. Ghost. Aproximativ fiecare gazdă din lume este acum configurată să găzduiască aplicații PHP, dar din moment ce Node.js este încă relativ nou, configurarea "push button" pe domenii live pe care ați putea să o utilizați cu alte aplicații nu este chiar pregătită. Un număr de gazde construiesc deja noi infrastructuri pentru a facilita Ghost, deci va fi doar o scurtă așteptare până când implementarea Ghost va fi la fel de ușor ca orice altă aplicație, dacă nu și mai ușoară. În plus, începând din luna noiembrie, veți putea să utilizați serviciul de găzduire Ghost în incintă.

User Driven Settings disponibil pentru Theming

Un aspect suplimentar al Ghost care poate fi diferit față de alte platforme pe care le-ați temut în trecut se referă la setările pe care utilizatorii le pot controla în spate.

Setările ghidate de utilizatori Ghost determină un procent mare din ceea ce poate fi transmis în partea frontală, ceea ce, la rândul său, influențează tipul de conținut disponibil pentru tematică.

Există încă o mulțime de lucruri noi planificate pentru Ghost, dar abordarea pe care o vom lua în această serie de tutorial este de a lucra cu setările care sunt utilizabile acum.

Anumite setări pentru funcționalitatea Ghost viitoare există acum. De exemplu, există un admin UI pentru crearea de meniuri nav pe drum, precum și o funcționalitate preliminară pentru ieșirea lor în nucleul lui Ghost. Cu toate acestea, nu știm exact cum vor funcționa aceste lucruri (și nu vor fi puse până când nu vor fi lansate), așa că nu vom face niciun proiect pentru ei în această serie de tutori. O să lăsăm asta pentru ziua în care echipa Ghost îi eliberează.

Acest lucru ne aduce la ceea ce utilizatorii pot controla în spatele capătului Ghost chiar acum, care sunt setări care se împart în două zone;

  1. Setările administratorului
  2. Controalele post editare

Să ne uităm la fiecare dintre aceste zone acum.

Setări administrator

Setările administratorului Ghost sunt împărțite în două file: Setări generale și Setări utilizator. Atât tab-urile generale, cât și setările de utilizator controlează conținutul pe care îl putem modela în temele noastre.

Setări> Generalități tab-ul ne oferă următoarele elemente, utilizabile oriunde într-o temă Ghost:

  • Titlu de Blog
  • Descrierea blogului
  • Blog Logo
  • Coperta blogului

Setări> Utilizator tab-ul ne oferă următoarele, utilizabile numai în vizualizarea unui singur mesaj:

  • Imagine de copertă
  • Imagine de profil
  • Nume
  • E-mail
  • Locație
  • website
  • Bio

Controalele editorului post

Interfața de editare a postului Ghost este cu siguranță una dintre caracteristicile sale cele mai convingătoare. Proiectat de scriitori pentru scriitori, acesta ofera un mediu fantastic pentru crearea de continut.

Contrastul său major față de alte medii de editare este cât de curat și minimalist este proiectat să fie. Nu există nici o aglomerație de la barele de instrumente de formatare, casete meta sau alte câmpuri personalizate. Marea majoritate a spațiului de pe ecran este dedicat în întregime zonei de scris.

Cel mai relevant aspect al zonei post-editare a designerilor tematici este coloana vertebrală a formatării postului Ghost: Markdown.

În loc să folosească butoane de stil sau HTML brut, conținutul lui Ghost este formatat folosind Markdown, o sintaxă inline simplă, ceea ce înseamnă că scriitorii nu trebuie să întrerupă în nici un moment în timpul creării conținutului. Din cauza acestei abordări simplificate, există o listă relativ scurtă de lucruri care trebuie să fie desemnate ca editorul postului să controleze:

  • Textul obișnuit
  • H1 până la tagurile H6
  • Starea legăturilor
  • Cod inline
  • blockquotes
  • Imagini
  • liste
  • Reguli orizontale

Notă: Markdown va accepta și cod HTML brut, ceea ce înseamnă că videoclipuri din servicii cum ar fi YouTube pot fi ușor încorporate prin copierea și inserarea codului iframe. Din acest motiv, este de asemenea o idee bună să luați în considerare stilul de iframe în temele dvs..

Temele tematice leagă numai prezentarea

Ghost este proiectat în jurul unei separări clare a prezentării și conținutului.

Ghost se ocupă de generarea conținutului și orice funcționalitate suplimentară necesară este gestionată de pluginuri. Acest lucru lasă tema Ghost dedicată prezentării pure.

Separarea conținutului și a prezentării este un principiu al designului web care nu este nou. Ideea de bază este că, dacă conținutul și prezentarea sunt separate în entități independente, devine posibil ca cineva să fie schimbat fără a altera celălalt. Cu alte cuvinte, o temă poate fi oprită pentru alta, fără ca utilizatorul să trebuiască să-și schimbe conținutul în orice mod.

Atunci când temele conțin funcționalități care nu sunt doar de prezentare, un utilizator nu mai poate schimba tema fără a schimba modul în care arată conținutul lor. Ei devin legați de prezentarea pe care o au și scopul fundamental al unei teme este, în esență, pierdut.

Cu Ghost, totuși, scopul fundamental al unei teme rămâne intact în orice moment.

Notă: În viitor, ca plugin-uri pentru Ghost roll out, va fi posibil să se construiască teme Ghost cu dependențe de plugin-uri. Aceasta este o altă caracteristică care va fi posibilă datorită faptului că Ghost este construit pe partea de sus a Node.js. Vom continua să vedem pachetele globale îmbunătățite disponibile pentru utilizatori, dar metoda pentru a face acest lucru va păstra în mod consecvent beneficiile care rezultă dintr-o separare a conținutului și a prezentării.


Cele două etape ale temei fantomă

Cele două etape foarte bine definite pe care le veți realiza în procesul de creare a temei Ghost sunt:

  1. Crearea fișierelor șablon - Scrierea fișierelor șablon cu plasarea și marcarea etichetelor șablonului
  2. Coafura - Adăugarea de design și de reacție, predominant prin scrierea de CSS

Următoarele secțiuni ale acestei serii de tutorial vă vor oferi instrucțiuni pas cu pas despre cum să procedați prin aceste etape pentru a vă construi prima temă Ghost. Înainte de aceasta, cu toate acestea, este util să înțelegeți mai mult despre limbajul templificator care împarte temele Ghost.

Introducere în templatizarea fără logică cu Handlebars.js

Temele tematice folosesc un limbaj fantastic numit Handlebars.js pentru a alimenta plasarea conținutului. Handlebars este o limbă templantă în sensul propriu al termenului, prin care rolul său este pur și simplu de a scoate conținut pre-încărcat în poziții specificate dintr-un fișier de șablon.


Mânerele de manevră se caracterizează prin utilizarea de brațe false (care seamănă cu ghidonul) pentru a adăuga etichete predefinite în șabloane care vor fi înlocuite cu conținut atunci când fișierul este servit.

Exemplu etichetă șablon handlebars.js: conţinut

Handlbars.js este denumit a logica mai puțin templarea limbajului deoarece nu poate fi folosit pentru scrierea de funcții, menținerea variabilelor sau pentru a pregăti altfel conținutul pentru afișare. În afară de redarea conținutului în care sunt plasate etichete, singurele sale operații sunt pur și simplu:

  1. Verificați dacă există sau nu o anumită bucată de conținut, de ex. un logo
  2. Iterați un set de conținut care conține mai multe înregistrări, de ex. un grup de postări recente

Este funcționalitatea mai puțin logică din spatele fiecărei tematici Ghost, care asigură că fiecare temă controlează doar atributele prezentării.

Temele tematice, de asemenea, nu fac nimic pentru a determina ce conținut va fi înlocuit cu etichetele pentru șablon de ghidon - acest lucru este gestionat de Ghost însuși. Tema este, totuși, utilizată pentru a determina cum va fi producția marcat și șterse.

Datorită templatizării, marcării și stilului fără logică, ieșirea Ghost este ușor de atins și vă ajută să garantați un cod foarte curat în șabloanele dvs. La rândul său, acest lucru facilitează scrierea marcajului semantic care este la curent cu cele mai recente standarde de SEO și accesibilitate.

Componente ale unei tematici Ghost

Aici este o listă rapidă "dintr-o privire" a tot ceea ce este, și nu este inclusă în cele două etape de proiectare a temei Ghost.

Ce este într-o temă Ghost: templating

  • Plasarea etichetelor de ghidon în fișierele șablon
  • Semnificația marcajelor tag-urilor șablonului

Coafura

  • Tipografie
  • Controlul aspectului
  • Schema de culori și designul general
  • sensibilitate

Cu toate acestea, următoarele nu este incluse într-o temă Ghost:

  • Logică
  • Completarea funcționalității
  • Controalele personalizate ale zonei administrative
  • Modificările interogărilor bazei de date

S-ar putea să fiți de ajutor să vă gândiți la procesul de proiectare în două etape care este rezumat de către "SAMWYS" sau "Stilul și marcarea ceea ce vi se oferă".

Când proiectăm o temă Ghost nu trebuie să lucrăm cu interogări logice sau baze de date, deoarece Ghost se ocupă de toate acestea pentru noi. SAMWYS ne reamintește tot ce trebuie să facem este să plasăm etichetele șablonului, să scriem marcaj de calitate și să punem împreună stilul de temă excelent care afișează conținutul utilizatorilor.


Urmeaza

Tot ceea ce am discutat până acum vă oferă o înțelegere fundamentală a lui Ghost.

De aici putem trece la procesul pas cu pas al creării primei dvs. teme.

Următoarea parte a seriei noastre de tutorial începe cu prima etapă a procesului de creare a temelor; stadiul de templitare. Veți învăța exact cum să configurați structura fișierelor temei, cum să plasați etichetele șablonului și cum să scrieți un schelet de marcare.