Organisera Ghost Tema filer och mappar

Detta är den andra delen av vår Ghost Theme Design Tutorial Series. Allt från här förutsätter att du har en grundläggande förståelse för Ghost. Om inte, fortsätt ta tid att läsa Förstå Ghost: Stages of Design).

Som vi diskuterade i föregående del finns det två steg för att designa ett tema för Ghost: Mall File Creation och Styling.

I denna handledning kommer vi att fokusera på första etappen genom att vägleda dig steg för steg genom processen att ställa in tematets mallar. Du kommer att lära dig om Ghosts mallfil och partiell system, malltaggar för hantering och hur du skriver ditt temas uppläggningsskelett.

Notera: Denna handledning utförs på en Windows-maskin, så ta motsvarande steg på ditt föredragna operativsystem.

Du måste också ha din föredragna kodredigerare praktisk. Denna handledning kommer att utföras i Sublime Text 2.

Installera Ghost lokalt

Det första du behöver göra är att installera Ghost på din lokala dator. Att göra det är ganska enkelt, så länge du har de nödvändiga förutsättningarna för ditt system. Det finns ingen anledning att köra XAMPP eller motsvarande för att köra Ghost på din lokala maskin eftersom det faktiskt kommer att springa själv.

Notera: Ibland när du skapar ett nytt tema, starta om Ghost och välj sedan det nya temat i admin, det kan fortfarande ladda CSS från föregående tema. Om du upplever detta problem när du fyller i denna handledningsserie eller när som helst medan du skapar ett nytt tema behöver du bara göra en andra omstart av Ghost. En ytterligare omstart bör rensa cacheminnet så att det nya temat CSS blir synligt.

När du har följt instruktionerna och installerat Ghost på din lokala dator (och verifierat att det hela fungerar som det ska), är du redo att börja skapa ditt Ghost-tema från och med stegen nedan.

Börja med en ny tomt tema

För att komma igång ska vi skapa och aktivera ett tomt Ghost-tema med det absoluta lägsta antalet obligatoriska filer.

Steg 1:

I Windows Explorer (eller motsvarande) navigerar du till den mapp som du installerade Ghost i. Du borde se följande struktur i din huvud Ghost-mapp:

Steg 2:

Navigera i mappen "innehåll> teman", där du kommer att se mappen för standardtemat "casper".

Steg 3:

På den här platsen, skapa en ny mapp och namnge det oavsett vad du vill att ditt tema ska kallas. I den här handledningen skapar vi ett tema med namnet "UberTheme" och så är namnet på den mapp vi ska skapa:

Lägg till obligatoriska filer

Vi lägger nu till de nödvändiga mallfilerna, utan vilka du får fel om du försöker aktivera ditt nya tema.

De två filerna som är absolut nödvändiga för att ett Ghost-tema ska springa är:

index.hbs: kontrollerar visning av dina senaste inlägg / hemsida
post.hbs: kontrollerar visning av enskilda inlägg ses individuellt

Steg 1:

Skapa en ny fil i din föredragna kodredigerare och spara den i "UberTheme" -mappen som "index.hbs". Du har ingen kod att lägga till i filen ännu, så den fil du skapar kommer att vara tom.

Steg 2:

Skapa en ny ny fil, spara den också i din "UberTheme" -mapp, den här gången som "post.hbs". Precis som filen "index.hbs" som du skapade under föregående steg kommer den här filen även att vara tom / tom.

Insidan av din "UberTheme" -mapp ska nu se ut så här:

Aktivera Tour Theme

Vi måste nu starta / starta om Ghost för att se "UberTheme" komma upp i listan över tillgängliga teman i adminpanelen så att vi kan välja och aktivera det.

Steg 1:

Om du redan har Ghost igång, stäng av den genom att trycka på CTRL + C i din terminal, och skriv då "y" följt av ENTER.

Steg 2:

Starta / starta om Ghost genom att skriva "npm start" i din terminal.

Tips: Om du inte är säker på hur du öppnar terminalen så att du kan utföra steget ovan, navigerar du till "Ghost" -mappen, håller SHIFT intryckt, högerklickar för att öppna menyn Windows, och sedan vänster-klicka på "Öppna kommandofönstret här".

Notera: Stegen ovan antar att du har besökt Så här installerar du Ghost för instruktioner om hur du installerar och kör Ghost.

Steg 3:

Besök din Ghost admin panel, (logga in om det behövs), vanligtvis finns på http: // localhost: 2368 / Ghost

Steg 4:

Klicka på knappen "INSTÄLLNINGAR" på den översta menyn i din adminpanel:

Detta tar dig till avsnittet "INSTÄLLNINGAR> Allmänt" på din adminpanel.

Steg 5:

Bläddra ner till botten av sidan, hitta sedan och expandera "Tema" listrutan. Du bör se "UberTheme" som ett av alternativen:

Steg 6:

Välj "UberTheme" från listan och klicka sedan på den blå "SAVE" knappen längst upp till höger på sidan.

Steg 7:

I din webbläsare, besök den främre delen av din Ghost-installation, som vanligtvis finns på http: // localhost: 2368 /

Resultat: Du får bara se ett blankt vitt webbläsarfönster.

Om du inte ser ett tomt vitt webbläsarfönster och istället ser du något som bilden nedan, går du igenom ovanstående steg igen och kontrollerar att du har namngett dina mallfiler korrekt:

Fyll i fil- och mappstrukturen

De enda absolut nödvändiga filerna är "index.hbs" och "post.hbs" mallfiler som beskrivs i det sista avsnittet.

Men det finns två filer du kommer att vilja använda i stort sett alla teman, även om de inte är strikt nödvändiga, så lägger vi till dem nu. Vi organiserar också en mappstruktur för att hålla några ytterligare filer till ditt tema senare.

Tema Wrapper File

Det finns bara en enda huvudmallfil du vill ha i rotmappen i ditt tema, och det är "default.hbs" -filen.

Den här filen skapar "wrapper" -koden för ditt tema, det vill säga huvud- och fotkoden som läggs runt varje sida på en webbplats som kör ditt tema. Det kommer att innehålla din standard , och sektioner, liksom vissa mallkoder som kommer att mata ut viktig Ghost-kod.

Vi kommer att täcka vad som faktiskt måste skrivas in i den här filen mer detaljerat senare. För nu, låt oss bara skapa den tomma filen själv.

Steg 1:

Skapa en ny fil i din föredragna kodredigerare och spara den i "UberTheme" -mappen som "default.hbs".

Skapa din partiella mapp

Med handtagsmallar har du möjlighet att skapa vad som kallas "partiella" mallfiler. Dessa partiella mallfiler låter dig bryta ditt tema ner i mindre komponenter för en mer modulär, välorganiserad struktur.

Till exempel kanske du vill dela upp din layout i rubrikerna "huvud", "huvud" och "sidfot" med koden för varje innehåll i sin egen delfil. Du kommer att se denna process i praktiken senare. För tillfället skapar vi bara den mapp som ska användas för att hålla dessa "partiella" filer.

Steg 1:

I Windows Explorer (eller motsvarande) navigera till din "UberTheme" -mapp.

Steg 2:

Skapa en ny mapp och namnge den "partials".

Notera: Det är viktigt att säkerställa att denna mapp heter rätt och ligger i tematets rotmapp eller Ghost kan inte hitta dina delmallfiler.

Tillgångsmappstruktur

När vi når stylingsteget går alla dina stilrelaterade filer in i mappen "tillgångar", inklusive CSS, JS, font och bildfiler.

Notera: Du behöver inte namnge mappen "tillgångar" - du kan faktiskt namnge det du vill ha. Vi följer helt enkelt riktlinjerna för bästa praxis från Ghost i denna handledning.

Steg 1:

I Windows Explorer (eller motsvarande) navigera till din "UberTheme" -mapp.

Steg 2:

Skapa en ny mapp och namnge den "tillgångar".

Steg 3:

Navigera i mappen "tillgångar".

Steg 4:

Skapa en ny mapp och namnge den "css".

Steg 5:

Skapa en ny mapp och namnge den "teckensnitt".

Steg 6:

Skapa en ny mapp och namnge den "bilder".

Steg 7:

Skapa en ny mapp och namnge den "js".

Din temafil och mappstruktur ska nu se ut så här:

Lägg till din stilarkfil

Tekniskt kan man lägga till din stilarkfil som en del av stylingsprocessen. Vi kommer dock att skriva avsnittet i nästa steg i handledningen, och som en del av det vill vi länka ditt temans stilark och verifiera att det laddas.

Därför skapar vi en stilarkfil som lägger till en bakgrundsfärg till ditt tema så vi kan sedan se till att det är länkat till din avsnittet korrekt.

Steg 1:

Skapa en ny fil i din föredragna kodredigerare.

Steg 2:

Lägg till följande CSS i filen:

kropp bakgrundsfärg: # F0F0F0;

Steg 3:

Spara filen i din "UberTheme> assets> css" -mapp som "style.css".

Skriva default.hbs-filen

Vi kommer nu att flytta in i skrivandet av den aktuella templerande koden för ditt tema, med början av filen "default.hbs". (Se ovan för en sammanfattning av vad den här filen är för).

Notera: För att skilja mellan html-taggar och hanteringsmallar, använder vi antingen termen "HTML-taggar" eller "malltaggar" så att du vet vilken typ som hänvisas till.

Steg 1:

I din föredragna kodredigerare öppnar du din "default.hbs" -fil från root-mappen av temat, dvs "UberTheme".

Steg 2:

Lägg till följande kod:

    ! Dokumentinställningar   ! Responsive Meta Tags

Allt vi har gjort här är att lägga till de väsentliga doktypen, html, huvud och kroppstaggar. Vi har också lagt till några grundläggande metataggar för att ställa in charsetet, aktiverat Chrome Frame (om tillgängligt) eller annat Edge-läge (högst tillgängligt) för IE, och att initiera vår responsiva bildskärm.

Notera: I ovanstående kod ser du också två exempel på hur kommentarer kan skrivas i styrfiler ("Dokumentinställningar" och "Responsiva Metataggar" kommentarer). Kommentarer skiljer sig åt när ett utropstecken läggs till omedelbart efter öppnandet av två uppsättningar av lockiga fästen, med slutet av kommentaren markerad av två stängande uppsättningar av lockiga fästen. Här är ett annat exempel:

 ! Din kommentar här

Steg 3:

Lägg till följande kod ovanför ! Responsive Meta Tags koda:

 ! Sida Meta Meta_title

Detta lägger till sidspecifika meta html-taggar.

Steg 4:

Lägg till följande kod ovanför ! Responsive Meta Tags kod och direkt under sidan meta html-tagglinjer som du tidigare lagt till:

 ! Stilar

Detta lägger till den externa länken till ditt stilark.

Notera: Du behöver inte en fullständig sökväg till ditt stilark, bara en sökväg i förhållande till rotmappen i ditt tema.

Steg 5:

Lägg till följande ovanför stängningen html-tagg:

 Ghost_head

Ghost använder denna tagg för att mata ut viktig stil och metadata i huvuddelen.

Notera: För dem med en WordPress-teman bakgrund kan du jämföra detta med att inkludera wp_head () i alla teman sektioner.

Steg 6:

Byt ut den html-tagg med följande kod:

Den här malltaggen matar ut ett annat CSS-klassnamn beroende på vilket område av webbplatsen som laddas:

På hemsidan: "hemmall"
På sidor med äldre inlägg som nås via pagination: "arkivmall"
På enskilda inlägg: "postmall"

Steg 7:

Under

kropp

 Var du än placerar kropp taggen i din "default.hbs" -fil är där ditt huvudsakliga innehåll kommer att visas, dvs din senaste inläggslista eller en enda inläggsvy.
 Vi har också lagt till en div med wrapper_uber klassnamn vi kommer att stila senare som en omslag, med hjälp av den för att styra bredden och annan stilering av tematets huvudinnehåll.
 Notera: Alla CSS-klasser bör innehålla namespacing för att säkerställa att de inte kolliderar med andra stilar som webbplatsen kan ladda. I det här fallet lägger vi alla klassnamn med _uber.
 Viktig: Det är mycket viktigt kropp taggen är omgiven av trippelformiga fästen, eftersom detta förhindrar att de värden som returneras här från att bli rymda. Om du inte använde trippelformiga parentesar här skulle du få en HTML-belastning som visas på din skärm istället för det faktiska innehållet.
 Steg 8:
 Direkt ovanför  html-tagg lägg till följande kod:
  Ghost_foot
 Mycket som Ghost_head tagg som vi lagt till ovan, detta Ghost_foot malltaggen måste inkluderas för att kunna skriva ut viktiga skript och data.
 Steg 9:
 Spara filen "default.hbs".
 Din "default.hbs" -fil ska nu se ut så här:
     ! Dokumentinställningar   ! Sida Meta Meta_title  ! Stilar  ! Responsive Meta Tags    Ghost_head    kropp 
 Ghost_foot  
 
 Testa din "default.hbs" -fil
 Du är nu redo att testa din "default.hbs" mallfil och se till att allt är korrekt.
 För att göra detta behöver du bara låta Ghost veta att du vill att den ska ladda mallen "default.hbs".
 Steg 1:
 Öppna både dina "index.hbs" och "post.hbs" -filer i din kodredigerare.
 Steg 2:
 Lägg till följande kod till var och en och spara sedan:
  !< default
 När Ghost ser !< default taggar det kommer att veta att du vill paketera sidan i koden från "default.hbs" mallen.
 Steg 3:
 Nu, för att testa din "default.hbs" -fil, gå tillbaka till den främre delen av din Ghost-webbplats, som vanligen finns på http: // localhost: 2368 / sphost, och uppdatera sidan.
 Steg 4:
 Där innan du såg bara ett tomt vitt webbläsarfönster bör du nu se fönstrets bakgrundsfärg omvandlas till en ljusgrå.
 Om du ser detta har du verifierat att ditt stilark laddas korrekt.
 Om webbläsarfönstret fortfarande är vit kontrollerar du att platsen och namnet på ditt stilark är korrekt inmatat i  linje du lagt till i din  sektion.
 Steg 5:
 Använd din webbläsare för att visa sidkällan. Om det ser ut så här har du lyckats skapa din "default.hbs" -fil:
       Spöke           
   
 Notera: Det kan hända att innehållet på din titel och metadata visas annorlunda när du ser din sidkälla. Om så är fallet är det helt normalt eftersom uppgifterna i de här fälten är dragna från bloggtiteln och bloggbeskrivningen som anges i Ghost admin-sidan "Inställningar> Allmänt".
 
 Kommer härnäst
 Även om detta är slutet på den andra delen, är vi inte färdiga med det templerande skedet för att skapa ditt Ghost-tema ännu.
 Vi är dock redo att börja lägga till lite innehåll så att det kan visas på en sida och så att vi kan fortsätta testa inställningen av våra mallar när vi går.
 Nästa steg i vår tutorial-serie fortsätter och avslutar templeringsprocessen. Du lär dig hur du lägger till malltaggar och markering, avslutar ditt temas tre huvudmallfiler och lägg till mallfilerna som placerar en gemensam rubrik och sidfot i ditt tema. Vid slutet av nästa del kommer templeringsprocessen att skapa ditt tema vara komplett.



		
			
	   
	




Webbdesign