Share
Processen att bygga teman för Ghost är otroligt smidig, enkel och väldigt lätt att lära. Men innan du börjar bygga ett verkligt Ghost-tema är det viktigt och användbart att förstå rollen som teman spelar i den övergripande Ghost-ekologin så att du kan designa optimalt.
Det bästa sättet att göra detta är att inte hoppa över huvudet till design eller kod, utan genom att få en grundlig förståelse av Ghost själv som din grund.
I den här första delen av vår tutorial-serie får du den grunden och när du gör det kommer du att vara perfekt placerad för att börja bygga ditt första tema.
Ghost är ett open source-program dedikerat till publicering av innehåll.
Under de senaste åren har innehållsverktyg utvecklats för att tillåta att människor själv hanterar nästan vilken typ av webbplats de eventuellt behöver. Oavsett om det är en komplex webbutik, en företagspresentation eller ett heltäckande CMS, kan användarna hantera allt själva med relativt liten erfarenhet.
Men Ghost handlar inte om några av de komplicerade sakerna. Ghost handlar om att fokusera på en enkel sak: skrift.
Det är en plattform som bygger på principen om enkelhet. Dess huvudsyfte är att hjälpa författare att blogga mer och fokusera mindre på innehållsförlagringsverktyget i bloggenekvationen.
För temat utvecklare introducerar detta en förändring av takt. Medan teman för andra plattformar ofta drivs av användarnas efterfrågan på teman för att lägga till alla slags funktionell komplexitet på deras hemsida, drivs Ghost-plattformen endast av en sak. Tagline för Ghost berättar för oss vad det är:
Bara en bloggplattform
Eftersom Ghost är 100% fokuserad på bloggar är Ghost: Bara för bloggare.
Och i linje med detta är Ghost-temat design också drivet av en sak: Bara blogga teman.
Dessa kan verka som tydliga uttalanden men de är viktiga att betona, för på en plattform som fokuserar på att skriva, används av personer som är fokuserade på att skriva, så måste Ghost-teman utformas med fokus på att skriva.
Som en del av hans Kickstarter-kampanj sade Ghosts grundare, John O'Nolan, följande:
... det handlar inte bara om att göra något som ser bra ut, det handlar om att ge författare verktyg för att driva bloggar och att driva journalistik till nästa nivå.
Där ligger den filosofi som Ghost tema designers behöver anta för att bäst kunna tjäna användarna av Ghost: Först och främst se till att användarens innehåll alltid är främst och centrerat.
Det är ett vanligt sätt att utforma webbdesign för att fokusera på grafik och övergripande utseende av design, med styling av typografi och innehåll som händer senast. Men i ett Ghost-tema bör innehållet aldrig gå tillbaka till andra aspekter av designen.
Som en Ghost-temaformgivare bör du överväga hur innehållet ska dyka upp, med stark tonvikt på typografi, och resten av tematets design ska utvecklas till stöd för det.
Du får mer inblick i hur det här fungerar senare i tutorialserien när vi börjar bygga ett aktuellt tema, men innan vi kan göra det behöver vi lära oss mer om Ghost-plattformen själv.
Det finns några grundläggande aspekter av Ghost att vara medveten om som gör det annorlunda än andra plattformar du kan vara van vid.
Till skillnad från de flesta av de för närvarande populära webbplatsbyggnadsapplikationerna som är PHP-baserade, är Ghost byggt på Node.js.
Node.js är en mjukvaruplattform som tolkar och kör JavaScript på baksidan. Du kan lära dig mer om det på Nodejs.org, men du behöver verkligen inte. En fördjupad kunskap om Node.js är inte nödvändig för att bygga ett Ghost-tema - allt du behöver veta kommer att beskrivas i den här handledningsserien.
Många anser att Node.js är framtidsvägen av ett antal skäl. Hastigheten är en av dem. Node.js har visat sig fungera betydligt snabbare än PHP över många benchmarkingstester, det är en nyckelkomponent bakom varför Ghost körs så blåsigt snabbt.
För att arbeta på ett Ghost-tema i en lokal miljö måste du installera Node.js lokalt. Lyckligtvis är det en väldigt snabb och enkel process. Vi pekar på instruktioner om hur du gör det innan vi börjar processen med att bygga ett tema i den andra delen av denna handledningsserie.
Notera: Du bör vara medveten om att på kort sikt kan du stöta på vissa svullnadssmärtor som utnyttjar dina Ghost-webbplatser. Nästan varje värd i världen just nu är konfigurerad för att rymma PHP-applikationer, men eftersom Node.js fortfarande är relativt ny är inställningen "push button" på levande domäner som du kanske brukar använda med andra program inte helt redo. Ett antal värdar bygger redan ny infrastruktur speciellt för att underlätta Ghost, så det kommer bara att bli en kort väntetid tills Ghost-implementeringen blir lika lätt som någon annan applikation om det inte är lättare. Dessutom, från och med november kan du använda Ghosts webbhotellstjänst.
En ytterligare aspekt av Ghost som kan vara annorlunda än andra plattformar du har tema för tidigare beror på inställningar som användare kan styra i bakre änden.
Ghosts användardefinierade inställningar bestämmer en stor andel av vad som kan matas ut i frontänden vilket i sin tur påverkar vilken typ av innehåll som är tillgängligt för dem.
Det finns fortfarande många nya saker planerade för Ghost, men det tillvägagångssätt som vi ska ta i denna tutorial-serie är att arbeta med de inställningar som är användbara nu.
Vissa inställningar för framtida Ghost-funktionalitet existerar just nu. Det finns till exempel en admin-användargränssnitt för att skapa navmenyer på vägen, liksom preliminär funktionalitet för att utge dem i Ghosts kärna. Men vi vet inte exakt hur dessa saker ska fungera (och det kommer inte förrän de släpps) så vi kommer inte att göra någon formgivning för dem i den här handledningsserien. Vi lämnar det för dagen då Ghost-laget faktiskt släpper ut dem.
Detta leder oss till vad användare kan styra i Ghosts bakre ände, vilka är inställningar som bryts ner i två områden;
Låt oss titta på var och en av dessa områden nu.
Ghosts administratörsinställningar är uppdelade i två flikar: Allmänna inställningar och Användarinställningar. Både de allmänna och användarinställningsflikarna styr innehållet vi kan ställa in i våra teman.
De Inställningar> Allmänt fliken ger oss följande element, användbara var som helst i ett Ghost-tema:
De Inställningar> Användare Fliken ger oss följande, användbar endast i enbart inlägg:
Ghosts postredigeringsgränssnitt är verkligen en av sina mest övertygande funktioner. Designad av författare för författare, erbjuder den en fantastisk miljö för skapande av innehåll.
Dess stora kontrast mot andra redigeringsmiljöer är hur rent och minimalistiskt det är utformat för att vara. Det finns ingen rodnad från att formatera verktygsfält, metakasser eller andra anpassade fält. Den stora delen av skärmutrymmet är helt och hållet till skrivområdet.
Den mest relevanta aspekten av postredigeringsområdet till temat designers är ryggraden i Ghost postformatering: Markdown.
I stället för att använda styling-knappar eller rå HTML, formateras Ghosts innehåll med Markdown, en enkel inline-syntax som innebär att författare inte behöver pausa när som helst under skapandet av innehåll. På grund av detta förenklade tillvägagångssätt finns en relativt kort lista över saker som ska utformas som postredaktören kontrollerar:
Notera: Markdown kommer också att acceptera rå HTML, vilket innebär att videoklipp från tjänster som YouTube enkelt kan inbäddas via kopiera och klistra iframe-kod. Av den anledningen är det också en bra idé att överväga styling av iframes i dina teman också.
Ghost är utformad kring en tydlig separation av presentation och innehåll.
Ghost själv hanterar all innehållsgenerering och eventuell ytterligare nödvändig funktionalitet hanteras av plugins. Detta lämnar Ghost-temat tillägnad ren presentation.
Separationen av innehåll och presentation är en princip för webbdesign som inte är ny. Grundidén är att om innehåll och presentation separeras i oberoende enheter blir det möjligt för en att ändras utan att ändra den andra. Med andra ord kan ett tema bytas ut för en annan utan att användaren måste ändra sitt innehåll på något sätt.
När teman innehåller funktionalitet som inte är rent presenterad kan en användare inte ändra sitt tema utan att också ändra hur innehållet ser ut. De blir knutna till den presentation de har, och grunden för ett tema är väsentligen förlorat.
Med Ghost, är grunden till ett tema ändå intakt hela tiden.
Notera: I framtiden, som plugins för Ghost rullar ut, kommer det att vara möjligt att bygga Ghost-teman med pluginberoende. Detta är en annan funktion som kommer att bli möjlig tack vare Ghost som byggs ovanpå Node.js. Vi kommer fortfarande kunna se förbättrade övergripande paket tillgängliga för användarna, men metoden för att göra det kommer konsekvent att behålla fördelarna som uppstår genom en separation av innehåll och presentation.
De två mycket tydligt definierade stegen som du kommer att arbeta igenom i processen att skapa ett Ghost-tema är:
Nästa avsnitt i denna handledningsserie ger dig fullständiga stegvisa instruktioner om hur du går igenom dessa steg för att bygga ditt första Ghost-tema. Innan dess är det dock bra att förstå lite mer om det templerande språket som driver Ghost-teman.
Ghost-teman använder ett fantastiskt templerande språk som heter Handlebars.js för att driva placeringen av innehåll. Handlebars är ett templerande språk i ordets egentliga bemärkelse, varigenom dess roll helt enkelt utmatar förhämtat innehåll i angivna positioner i en mallfil.
Styrenheter kännetecknas av användningen av lockiga fästen (som ser ut som styrenheter), för att lägga till fördefinierade taggar i mallar som kommer att ersättas med innehåll när filen visas.
Exempel på hanteringsfältet för handtag.js.js: innehåll
Handlbars.js kallas a logik-mindre templerande språk eftersom det inte kan användas för att skriva funktioner, hålla variabler eller för att annars förbereda innehåll för visning. Annat än att göra innehåll där taggar placeras är det bara att:
Det är den logiska funktionen bakom varje Ghost-tema som säkerställer att varje tema kontrollerar attribut av presentation endast.
Ghost-teman gör inte heller något för att bestämma vilket innehåll handtagen malltaggarna ska ersättas med - det hanteras allt av Ghost själv. Temat används dock för att bestämma hur produktionen kommer att vara märkt och stylat.
Tack vare logiklös templering, märkning och styling kan Ghosts resultat enkelt uppnås och hjälper till att garantera mycket ren kod i dina mallar. Detta gör det lätt att skriva semantisk markering som är aktuell med de senaste SEO- och tillgänglighetsstandarderna.
Här är en snabb "överblick" -lista över allt som är och ingår inte i de två stegen att designa ett Ghost-tema.
Vad är i ett spök tema: mall
styling
Men följande är inte ingår i ett Ghost-tema:
Du kanske tycker att det är bra att tänka på tvåstegs designprocessen som sammanfattad av "SAMWYS" principen eller "Stil och märkning vad du serveras".
När vi designar ett Ghost-tema behöver vi inte arbeta med logiska eller databasfrågor eftersom Ghost hanterar allt detta för oss. SAMWYS påminner oss om allt vi behöver göra är att placera malltaggar, skriva kvalitetsmarkering och sätta samman bra tematyp som visar användarinnehåll.
Allt vi har diskuterat hittills ger dig en grundläggande förståelse för Ghost.
Härifrån kan vi gå vidare till den faktiska steg-för-steg-processen för att skapa ditt första tema.
Nästa del av vår tutorial-serie börjar med den första etappen av temaprocessen. templeringsstadiet. Du lär dig exakt hur du konfigurerar ditt temas filstruktur, hur man placerar malltaggar och hur man skriver ett markeringsskelett.
Accentsconagua