Forstå Ghost Designens scener

Prosessen med å bygge temaer for Ghost er utrolig jevn, enkel og veldig lett å lære. Men før du begynner å bygge et eget Ghost-tema, er det viktig og nyttig å forstå rollen temaer spiller i den generelle Ghost økologi slik at du kan designe på den optimale måten.

Den beste måten å gjøre dette på er ikke å hoppe først og fremst i design eller kode, men ved å få en grundig forståelse av Ghost selv som grunnlag.

I denne første delen av vår opplæringsserie får du grunnlaget, og når du gjør det, blir du perfekt plassert for å begynne å bygge ditt første tema.


Hva er Ghost og hvem er det for?

Ghost er en åpen kildekode applikasjon dedikert til innhold publisering.

I løpet av de siste årene har innholdsverktøy for publisering utviklet seg slik at folk selv kan administrere omtrent hvilken type nettsted de måtte trenge. Enten det er en kompleks nettbutikk, en forretningspresentasjon eller et fullverdig CMS, kan brukerne håndtere alt selv med relativt lite erfaring.

Men Ghost handler ikke om noen av de komplekse tingene. Ghost handler om å sette fokuset tilbake på en enkel ting: skriving.

Det er en plattform bygget på prinsippet om enkelhet. Hovedmålet er å hjelpe forfattere til å blogge mer og fokusere mindre på innholdsutgivelsesverktøyet i bloggingligningen.

For temautviklere innfører dette en endring i tempoet. Mens temaer for andre plattformer ofte drives av brukerens etterspørsel etter temaer for å legge til alle slags funksjonalitet, er Ghost-plattformen bare drevet av en ting. Tagline for Ghost forteller oss hva det er:

Bare en blogging plattform

Siden Ghost er 100% fokusert på blogging, er Ghost: Bare for bloggere.

Og i tråd med dette, er Ghost tema design også drevet av en ting bare: Bare blogging temaer.

Disse kan virke som åpenbare uttalelser, men de er viktige å understreke, fordi på en plattform fokusert på skriving, brukes av folk som er fokusert på skriving, må også Ghost-temaer utformes med fokus på å skrive.


Ghost Theme Design Filosofi

Som en del av sin Kickstarter-kampanje, sa grunnleggeren av Ghost, John O'Nolan, følgende:

... det handler ikke bare om å lage noe som ser bra ut, det handler om å gi forfattere verktøy for å presse blogging og å presse journalistikk til neste nivå.

Der ligger filosofien som Ghost tema designere trenger å vedta for best å betjene brukerne av Ghost: Først og fremst sørg for at brukerens innhold alltid er foran og midt.

Det er en felles tilnærming i webdesign for å fokusere på grafikk og generelt utseende av design, med styling av typografi og innhold som skjer sist. Men i et Ghost-tema bør innholdet aldri ta et baksete til andre aspekter av designet.

Som en Ghost-tema designer bør du først og fremst vurdere hvordan innholdet vil vises, med sterk vekt på typografi, og resten av temaets design skal utfolde seg til støtte for det.

Du får mer innsikt i hvordan dette virker senere i opplæringsserien når vi begynner å bygge et aktuelt tema, men før vi kan gjøre det, må vi lære mer om selve Ghost-plattformen.


The Ghost Platform

Det er noen grunnleggende aspekter ved Ghost å være klar over som gjør det annerledes enn andre plattformer du kan være vant til.

Et JavaScript-program bygget på Node.js

I motsetning til de fleste populære byggeprogrammer som er PHP-basert, er Ghost bygget på Node.js.

Node.js er en programvareplattform som tolker og utfører JavaScript på baksiden. Du kan lære mer om det på Nodejs.org, men du trenger egentlig ikke. En grundig kunnskap om Node.js er ikke nødvendig for å bygge et Ghost-tema - alt du trenger å vite vil bli dekket i denne opplæringsserien.

Mange anser Node.js å ​​være fremtiden for en rekke årsaker; Hastigheten er en av dem. Node.js har blitt demonstrert å utføre betydelig raskere enn PHP på tvers av mange benchmarking tester, det er en viktig komponent bak hvorfor Ghost løper så blisteringly fort.

For å arbeide med et Ghost-tema i et lokalt miljø må du installere Node.js lokalt. Heldigvis er det en veldig rask og enkel prosess. Vi peker deg på instruksjoner om hvordan du gjør det før vi starter prosessen med å bygge et tema i den andre delen av denne opplæringsserien.

Merk: Du bør være oppmerksom på at på kort sikt kan du støte på noen voksende smerter som bruker Ghost-nettstedene dine. Omtrent alle verter i verden akkurat nå er konfigurert for å imøtekomme PHP-applikasjoner, men siden Node.js er fortsatt relativt ny, er "push-knappen" -oppsettet på levende domener som du kanskje er vant til med andre programmer, ikke helt klar. En rekke verter bygger allerede ny infrastruktur spesielt for å legge til rette for Ghost, så det vil bare være kort ventetid til distribusjon av Ghost vil være like enkelt som noe annet program hvis det ikke er enklere. I tillegg starter du i november at du kan bruke Ghosts interne hosting service.

Brukerdrevne innstillinger tilgjengelig for demning

Et annet aspekt av Ghost som kan være forskjellig fra andre plattformer du har tema for tidligere, gjelder innstillinger som brukere kan kontrollere i bakenden.

Ghosts brukerdrevne innstillinger bestemmer en stor prosentandel av hva som kan sendes ut på forsiden, noe som igjen påvirker typen innhold som er tilgjengelig for tema.

Det er fortsatt mange nye ting som er planlagt for Ghost, men tilnærmingen vi skal ta i denne opplæringsserien, er å jobbe med de innstillingene som er brukbare nå.

Visse innstillinger for fremtidig Ghost-funksjonalitet eksisterer akkurat nå. For eksempel er det et admin-brukergrensesnitt for å opprette navmenyer underveis, samt foreløpig funksjonalitet for å sende dem ut i Ghosts kjernen. Vi vet imidlertid ikke nøyaktig hvordan disse tingene kommer til å fungere (og vil ikke før de blir løslatt), så vi vil ikke gjøre noe design for dem i denne opplæringsserien. Vi lar det gå for dagen da Ghost-teamet faktisk frigjør dem.

Dette bringer oss til hva brukerne kan kontrollere i den bakre delen av Ghost akkurat nå, som er innstillinger som bryter ned i to områder;

  1. Admin-innstillinger
  2. Innleggsredigeringskontroller

La oss se på hvert av disse områdene nå.

Admin Innstillinger

Ghosts administratorinnstillinger er delt inn i to faner: Generelle innstillinger og brukerinnstillinger. Både de generelle og brukerinnstillingsfanene styrer innholdet vi kan stile i våre temaer.

De Innstillinger> Generelt fanen gir oss følgende elementer, som kan brukes hvor som helst i et Ghost-tema:

  • bloggtittel
  • Bloggbeskrivelse
  • Blogglogo
  • Blog Cover

De Innstillinger> Bruker fanen gir oss følgende, kan bare brukes i enkelt innlegg:

  • Cover image
  • Profilbilde
  • Navn
  • e-post
  • plassering
  • nettsted
  • Bio

Postredaktør kontrollerer

Ghosts postredigeringsgrensesnitt er absolutt en av sine mest overbevisende funksjoner. Designet av forfattere for forfattere, tilbyr det et fantastisk miljø for innholdsskaping.

Den store kontrasten mot andre redigeringsmiljøer er hvor rent og minimalistisk det er designet for å være. Det er ingen rot i formatering av verktøylinjer, metakasser eller andre tilpassede felt. Størstedelen av skjermrommet er viet helt til skriveområdet.

Det mest relevante aspektet av postredigeringsområdet til temadesignere er ryggraden i Ghost postformatering: Markdown.

I stedet for å bruke styling-knapper eller rå HTML, er Ghosts innhold formatert ved hjelp av Markdown, en enkel inline-syntaks som betyr at forfattere ikke trenger å pause når som helst under innholdsopprettelsen. På grunn av denne forenklede tilnærmingen er det en relativt kort liste over ting som skal styles som postredaktøren kontrollerer:

  • Vanlig tekst
  • H1 til H6-koder
  • Link stater
  • Inline kode
  • Blockquotes
  • Bilder
  • lister
  • Horisontale regler

Merk: Markdown vil også akseptere rå HTML, noe som betyr at videoer fra tjenester som YouTube lett kan legges inn via kopi og lim inn iframe-kode. Av den grunn er det også en god ide å vurdere stylingen av iframes i dine temaer også.

Ghost-temaer kontrollerer kun presentasjon

Ghost er utformet rundt en klar adskillelse av presentasjon og innhold.

Ghost selv håndterer all innholdsgenerering og eventuell ekstra nødvendig funksjonalitet håndteres av plugins. Dette etterlater Ghost-temaet dedikert til ren presentasjon.

Adskillelsen av innhold og presentasjon er et prinsipp for webdesign som ikke er nytt. Den grunnleggende ideen er at hvis innhold og presentasjon er skilt i uavhengige enheter, blir det mulig for en å bli endret uten å endre den andre. Med andre ord kan ett tema slås ut for en annen uten at brukeren må endre innholdet på noen måte.

Når temaer inneholder funksjonalitet som ikke er rent presentasjonsmessig, kan en bruker ikke lenger endre temaet uten å endre måten deres innhold ser ut. De blir bundet til presentasjonen de har, og det grunnleggende formålet med et tema er hovedsakelig tapt.

Med Ghost er det grunnleggende formålet med et tema fortsatt intakt hele tiden.

Merk: I fremtiden, som plugins for Ghost ruller ut, vil det være mulig å bygge Ghost-temaer med pluginavhengigheter. Dette er en annen funksjon som vil bli gjort mulig takket være Ghost som bygges på toppen av Node.js. Vi vil fortsatt kunne se forbedrede samlede pakker tilgjengelig for brukerne, men metoden for å gjøre dette vil konsekvent bevare fordelene som kommer fra en adskillelse av innhold og presentasjon.


De to scenene i Ghost Theme Design

De to veldig klart definerte stadiene som du vil jobbe gjennom i prosessen med å skape et Ghost-tema, er:

  1. Maling av malfil - Skrive malfiler med plassering av maler og merking
  2. styling - Legger til design og respons, hovedsakelig gjennom skriving av CSS

De neste avsnittene i denne opplæringsserien gir deg fullstendige trinnvise instruksjoner om hvordan du går videre gjennom disse stadiene for å bygge ditt første Ghost-tema. Før det er det imidlertid nyttig å forstå litt mer om det templerende språket som driver Ghost-temaer.

Introduksjon til Logisk-mindre Templering med Handlebars.js

Ghost-temaer bruker et fantastisk templerende språk som heter Handlebars.js for å drive plassering av innhold. Handlebars er et templerende språk i ordets rette betydning, hvorved det er bare å utdatere forhåndsinnhentet innhold i bestemte posisjoner i en malfil.


Håndtak er preget av bruk av krøllede parenteser (som ser ut som styrer), for å legge til forhåndsdefinerte tagger i maler som vil bli erstattet med innhold når filen blir servert.

Eksempel på handlebars.js mal tag: innhold

Handlbars.js refereres til som a logikk-mindre templerende språk fordi det ikke kan brukes til å skrive funksjoner, holde variabler eller ellers forberede innhold til visning. Annet enn å gjengi innhold der koder er plassert, er det bare å gjøre det til:

  1. Kontroller om et gitt innhold finnes, for eksempel, eller ikke. en logo
  2. Iterere et sett med innhold som inneholder flere poster, f.eks. en gruppe av siste innlegg

Det er logikkløs funksjonalitet bak hvert Ghost-tema som sikrer at hvert tema kontrollerer attributter av presentasjon bare.

Ghost-temaer gjør heller ikke noe for å bestemme hvilket innhold håndtaksmalerne skal erstattes med - det håndteres av Ghost selv. Temaet brukes imidlertid til å bestemme hvordan produksjonen vil bli merket og stylet.

Takket være logisk-mindre templering, merking og styling er Ghosts utdata lett oppnådd og bidrar til å sikre veldig ren kode i dine maler. Dette gjør det igjen enkelt å skrive semantisk merking som er oppdatert med de nyeste SEO- og tilgjengelighetsstandardene.

Komponenter av et spøkelses tema

Her er en rask oversikt over alt som er, og er ikke inkludert i de to faser av å designe et Ghost-tema.

Hva er i et spøkelses tema: templating

  • Plassering av styretiketter i malfiler
  • Semantisk merking av disse malene

styling

  • typografi
  • Layout kontroll
  • Fargevalg og overordnet design
  • respons

Men følgende er ikke inkludert i et spøkelses tema:

  • Logikk
  • Funksjonalitetstilskudd
  • Tilpasset administrasjonsområde kontroller
  • Modifiserte databasespørsmål

Du kan finne det nyttig å tenke på designprosessen i to etapper som oppsummert av "SAMWYS" prinsipp, eller "Stil og merke hva du serveres".

Når du designer et Ghost-tema, trenger vi ikke å jobbe med logikk eller database spørringer fordi Ghost håndterer alt dette for oss. SAMWYS minner oss alt vi trenger å gjøre er å plassere malemerker, skrive kvalitetsoppslag og sette sammen flott tema styling som viser brukerinnhold.


Nestemann

Alt vi har diskutert hittil gir deg en grunnleggende forståelse av Ghost.

Herfra kan vi gå videre til den faktiske trinnvise prosessen med å lage ditt første tema.

Neste del av vår opplæringsserie begynner med den første fasen av temaopprettingsprosessen; templerende scenen. Du lærer nøyaktig hvordan du konfigurerer temaets filstruktur, hvordan du plasserer maltekoder og hvordan du skriver et oppskriftsskjelett.