Uppdatering Vad är nytt i Ghost Themes

#märka 
 
Inlägg taggade: name
 
 /märka

Detta lägger till en rubrik på dina sidor med etikettinformation som visar namnet på den aktuella taggen.

I din "layout.less" -fil, efter de .article_uber väljars stil, lägg till den här koden:

.tag_heading font-size: 2rem; vaddering: 0 0 2rem 0; text-align: center; marginal-botten: 0.25rem;  

När du går till en taggssida bör du nu ha en rubrikavsnitt för det så här:

För att skapa olika mallar för specifika taggar, använd namnet för synkronisering av filnamn - slug. Hbs ". Det här kan vara bra för saker som att skapa bildgallerier ur inlägg taggade "galleri", till exempel, med en mall som heter "tag-gallery.hbs".

Hemkontext / Hemmall

Du kanske vill ha en annan mall för din hemsida än vad du gör för efterföljande listor av inlägg som folk sida genom. Du kan till exempel ha en stor omslagsbild eller ett bildspel på din hemsida som du inte vill att besökare måste bläddra förbi igen på nästa sida av inlägg.

För att anpassa din startsida, skapa en mall som heter "home.hbs".

Läs mer i Ghost Developer Docs.

Anpassade felsidor

Om du vill kontrollera den exakta presentationen av felsidor kan du nu skapa en mall med namnet "error.hbs".

Läs mer i (kan du gissa?) Ghost developer docs!

Nya hjälpare

Ghost har infört flera nya hjälpare; typ av malltaggar som hjälper dig att visa vissa typer av innehåll i ditt tema.

navigation Helper

Det är nu möjligt att skapa grundläggande navigationsmenyer i Ghost, genom att gå till Inställningar> Navigation i adminområdet.

För att få en nav-meny att visas i ditt UberTheme, öppna "header.hbs" -filen från "partials" -mappen och lägg till den här koden före den sista stängnings-div-taggen:

Från projektets "LÄSER" mapp, öppna "layout.less" och leta reda på .header_uber klass. På den, på rad 33, ändra padding-botten värde från:

padding-bottom: 3 * @golden + 0em;

... till:

padding-bottom: 1.5 * @golden + 0em;

Lägg sedan till följande kod för att ställa in din nya navigationsmeny:

ul.nav list-style-type: none; margin-top: 1.5 * @golden + 0em; vaddering: 0; display: flex; rättfärdiga innehåll: center; gränstopp: 0,0625rem solid ljus (@ color_03, 33%); gränsbotten: 0,0625rem solid ljus (@ color_03, 33%); bakgrundsfärg: ljusare (@ color_03, 42%); li margin: 0 0.25em; vaddering: 0,75em 1em; en text-decoration: none; 

Notera: Vi använder flexbox här för snabb och enkel menyimplementering, men om du behöver stödja äldre webbläsare kanske du vill använda ett annat tillvägagångssätt.

Ditt tema ska nu ha en navigeringsmeny som ser ut så här:

Läs mer om navigering i ... du vet.

image Helper

Ghost ger nu möjligheten att lägga till en utvald bild på alla inlägg. Om du vill lägga till en bild klickar du på den lilla kugghjulsikonen längst ner till höger om granskningsgränssnittet, och klickar sedan på Lägg till postbild fyrkant på toppen av sidofältet som dyker upp. Alternativt dra och släpp en bild på den.

För att skriva ut postens bild använder du bild hjälpare. I UberTheme öppnar du filen "index.hbs" och hittar den innehåll tagg på rad 12:

 innehåll 

Direkt ovanför lägger du till ett bildelement med hjälp av bild hjälpar i src attribut. Vi använder också postens titel i alt attribut, och linda den med en #if image ... if kolla för att se till att det finns en bild som ska visas:

 #if image  / if content 

Du borde nu kunna se något tillfogat postbild direkt under posttiteln i ditt tema, som så:

Fortsätt, docs.

#has Helper

Den nya #has hjälpen kan du kontrollera om ett inlägg har en viss författare som sin författare och / eller har vissa taggar associerade med den. Detta gör att du kan göra saker som att skapa olika typer av presentationer för olika författare, eller när det gäller taggar, ställer du in olika typer av inlägg som liknar Tumblr-teman eller WordPress-postformat.

Du kan till exempel ha alla inlägg taggade "foto" som presenteras med en speciell bildlayout, alla inlägg taggade "video" presenteras på egen väg och andra inlägg som faller tillbaka till standardmarkeringen:

#has tag = "photo" Särskild bildpostpresentation här else #has tag = "video" Särskild videopostpresentation här else Återgå till standardpresentation / har / has

Dokument.

#is Helper

Hittills har vi gått igenom många av de nya "kontexten" inom en Ghost-plats, som "post", "författare", "sida", "tagg" och "hem". De #är hjälpen ger dig möjlighet att styra utmatningen i en mall beroende på vilket sammanhang mallen används i.

I stället för att skapa en annan "tag.hbs" -mall som vi gjorde ovan kan du till exempel lägga till följande i din "index.hbs" -fil istället:

#is "tag" #tag 
 
Inlägg taggade: name
 
 / tag is

De #is "tag" linjekontroller för att se om det aktuella sammanhanget är "tagg", det vill säga att betraktaren tittar på en lista med inlägg under en viss tagg, och först då kommer det att mata ut taggrubriken.

Läs mer.

#prev_post och #next_post hjälpare

Om du vill kan du nu lägga till en Nästa inlägg och a Tidigare inlägg länk för att tillåta läsare att gå direkt från att läsa ett inlägg till ett annat. Dessa länkar ska läggas till i mallen "post.hbs".

Ett exempel på hur dessa länkar kan implementeras (från Ghost docs-sidan) är följande:

#posta 
titel
 
 innehåll 
 #prev_post title / prev_post #next_post title / next_post / post

Övergripande mallar

Alla mallar som vi har täckt hittills motsvarar vissa sammanhang, men det finns några som kan användas för att styra utmatningen från vissa hjälpare, t.ex.. navigering och paginering. Som standard hanterar Ghost utmatningen av dessa hjälpare automatiskt, men du har möjlighet att definiera din egen produktion inom ditt tema.

Navigationsmall

Standardmarkeringsutmatningen av navigering hjälpen är:

 #foreach navigation 
märka
 /för varje 

För att använda din egen navigeringsmarkering istället, skapa en fil med namnet "navigation.hbs" och placera den i din partials-katalog.

Läs mer i dokumenten.

Paginationsmall

Möjligheten att skapa en anpassad mall för paginering hjälpar är inte egentligen nya, men det är något vi inte täckte tidigare i serien och är sålunda värt att nämna här. Standarden paginering kod i Ghost är:

Åsidosätta den här koden med din egen genom att skapa en mall som heter "pagination.hbs" i ditt temas "partials" -mapp.

Mer här i dokumenten.

Extra egenskaper

Förutom nya sammanhang, mallar och hjälpare har Ghost också några fler saker till blandningen.

Utvalda inlägg

Om du vill markera ett specifikt inlägg som "Utvalda" finns det nu två sätt i admingränssnittet.

Från administratörsutrymmet som listar alla dina inlägg klickar du på den lilla stjärnan i det övre vänstra högra hörnet av fönstret för förhandsgranskning.

Från insidan av postredigeraren klickar du på den lilla kugghjulsikonen längst ned till höger på skärmen och markerar sedan rutan märkt Funktion detta inlägg.

I ditt tema, om du vill använda olika markeringar för utvalda inlägg, kontrollera om ett inlägg presenteras med #if featured

#foreach inlägg #if featured  annan  / if / foreach

Utvalda inlägg bär också klassen skiss så att du kan rikta dem till olika styling i din CSS. För att denna klass ska matas ut, inkludera Post_class hjälpen på dina inlägg. 

Till exempel i UberThemes "index.hbs", "post.hbs" och "page.hbs" -filer ändras den här raden:

... till:

Som standard är inlägg inte placerade över andra inlägg, de är i deras vanliga position baserat på när de publicerades. Men om du vill ha presenterade inlägg visas först måste du ha två inläggsslingor: en för utvalda inlägg och en för vanliga inlägg.

#for featured #if featured ! - Visa presenterade inlägg här - if / foreach #foreach inlägg #unless featured ! - Visa vanliga inlägg här - / unless / foreach

Alla sjunger nu: Läs mer i dokumenten.

Anpassade Favicons

För att ställa in ett anpassat favicon, placera din "favicon.ico" -fil i mappen "tillgångar" och ladda den i avsnitt av ditt tema med

asset "/favicon.ico"

Läs mer på Wikipedia (skojar, prova Ghost docs).

Avslutar

Det är en hel del ny kraft som läggs till i Ghost Theme Development, med en uppsjö av nya möjligheter till kreativ temat utveckling!

För att sammanfatta har vi:

• "Package.json" -filen och tillgång hjälparanvändning krävs nu
• Navigation läggs till, med möjlighet att anpassa sin HTML-utmatning
• Utvalda bilder tillagda
• Nya hjälpare att tillåta många fler alternativ i markup
• Statiska sidor och anpassade mallar för dem
• Tag sidor och anpassade mallar till dem
• Författarsidor och anpassade mallar för dem
• Startsidans mall
• Anpassad felmall
• Utvalda inlägg
• Anpassningsbara favicons

Även med allt vi har täckt här finns det fortfarande fler nya hjälpare och funktioner tillgängliga i Ghost, liksom mer detaljer på alla ovanstående, så var noga med att ha en bra läsning på themes.ghost.org för att få alla insatserna och outs.

Bifogad till den här handledningen hittar du en källfilhämtning där du kan få det uppdaterade temat, liksom den redigerade "layout.less" -filen. Använd UberTheme som din testa lekplats för att bekanta dig med allt nytt i Ghost, sedan komma dit och göra några fantastiska teman!

Envato Market

Glöm inte att kolla Ghost-kategorin på Envato Market!