Oppdatering Hva er nytt i Ghost Temaer

#stikkord 
 
Innlegg merket: name
 
 /stikkord

Dette vil legge til en overskrift på etikettene for etikettoppføringer som viser navnet på gjeldende tagg.

I din "layout.less" -fil, etter de .article_uber velg stil, legg til denne koden:

.tag_heading font-size: 2rem; polstring: 0 0 2rem 0; tekst-align: center; margin-bunn: 0.25rem;  

Når du går til en etikettoversiktsside, bør du nå ha en overskriftsavdeling for den slik:

For å lage forskjellige maler for bestemte koder, bruk filnavnet syntaks "tag - slug. Hbs". Dette kan være bra for ting som å lage bildegallerier ut av innlegg merket "galleri", for eksempel, ved hjelp av en mal som heter "tag-gallery.hbs".

Hjem Kontekst / Hjemmeside

Du kan ønske å ha en annen mal for hjemmesiden din enn du gjør for etterfølgende lister over innlegg som folk side gjennom. For eksempel kan du ha et stort bilde eller en lysbildefremvisning på hjemmesiden din, slik at du ikke vil at besøkende må rulle forbi igjen på neste innleggside.

For å tilpasse startsiden din, opprett en mal som heter "home.hbs".

Les mer i Ghost-utviklerens dokumenter.

Egendefinerte feil sider

Hvis du vil kontrollere den eksakte presentasjonen av feilsider, kan du nå ved å opprette en mal som heter "error.hbs".

Les mer i (kan du gjette?) Ghost utvikler docs!

Nye hjelpere

Ghost har introdusert flere nye hjelpere; slags maletiketter som hjelper deg med å utføre bestemte typer innhold i temaet ditt.

navigasjon Hjelper

Det er nå mulig å lage grunnleggende navigasjonsmenyer i Ghost, ved å gå til Innstillinger> Navigasjon i administrasjonsområdet.

For å opprette en nav-meny i UberTheme, åpne "header.hbs" -filen fra "partials" -mappen og legg til denne koden før den siste lukkede div-taggen:

Fra prosjektets "LESS" mappe, åpne "layout.less" og finn .header_uber klasse. På den, på linje 33, endre padding-bottom verdi fra:

polstring-bunn: 3 * @golden + 0em;

… til:

polstring-bunn: 1,5 * @golden + 0em;

Deretter legger du til følgende kode for å stile din nye navigasjonsmeny:

ul.nav listestil-type: none; margin-topp: 1,5 * @golden + 0em; polstring: 0; display: flex; begrunn-innhold: center; border-top: 0,0625rem solid lys (@ color_03, 33%); grensebunn: 0,0625rem solid lys (@ color_03, 33%); bakgrunnsfarge: lysere (@ color_03, 42%); li margin: 0 0.25em; polstring: 0.75em 1em; en tekst-dekorasjon: ingen; 

Merk: Vi bruker flexbox her for rask og enkel menyimplementering, men hvis du trenger å støtte eldre nettlesere, kan du ønske å bruke en annen tilnærming.

Ditt tema bør nå ha en navigasjonsmeny som ser slik ut:

Les mer om navigasjon i ... du vet.

image Hjelper

Ghost gir nå muligheten til å legge til et kjennetegnet bilde til et innlegg. For å legge til et bilde, klikk på det lille tannhjulikonet nederst til høyre i grensesnittet for redigering av innlegg, og klikk deretter på Legg til postbilde firkanten øverst på sidefeltet som dukker opp. Du kan også dra og slippe et bilde på det.

For å sende ut postens bilde, bruk bilde hjelper. I UberTheme, åpne opp "index.hbs" filen og finn innhold tag på linje 12:

 innhold 

Rett over det, legg til et bildeelement ved hjelp av bilde hjelper i src Egenskap. Vi bruker også postens tittel i alt attributt, og pakk det med en #if image ... if sjekk for å sikre at det er et bilde som skal vises:

 #if image  / if content 

Du bør nå kunne se et hvilket som helst lagt innleggsbilde rett under posttittelen i temaet ditt, slik som:

Fortsett, docs.

#has Hjelper

Den nye #has hjelper deg å sjekke om et innlegg har en bestemt forfatter som sin forfatter, og / eller har visse koder knyttet til den. Dette gjør at du kan gjøre ting som å skape ulike typer presentasjoner for forskjellige forfattere, eller når det gjelder koder, sette opp forskjellige typer innlegg som ligner Tumblr-temaer eller WordPress-postformater.

For eksempel kan du ha alle innlegg merket "bilde" presentert med et spesielt bildeoppsett, alle innlegg merket "video" presentert på egen måte og andre innlegg som faller tilbake til standardoppslaget:

#has tag = "photo" Spesiell presentasjon av fotopost her else #has tag = "video" Spesiell presentasjon av videoinnlegg her else Gå tilbake til standard presentasjon / har / has

Dokumenter.

#is Hjelper

Så langt har vi gått gjennom mange av de nye "sammenhengene" innenfor et Ghost-område, for eksempel "innlegg", "forfatter", "side", "tag" og "hjemme". De #er hjelper gir deg muligheten til å kontrollere utdata i en mal, avhengig av hvilken kontekst malen brukes i.

For eksempel, i stedet for å lage en annen "tag.hbs" mal som vi gjorde ovenfor, kan du legge til følgende i "index.hbs" -filen din i stedet:

#is "tag" #tag 
 
Innlegg merket: name
 
 / tag is

De #is "tag" linjekontroller for å se om den nåværende konteksten er «tag», det vil si at betrakteren ser på en liste over innlegg under en bestemt tag, og først da vil den sende ut tagg-overskriften.

Les mer.

#prev_post og #next_post hjelpere

Hvis du vil, kan du legge til en Neste innlegg og a Forrige innlegg lenke for å tillate leserne å gå rett fra å lese ett innlegg til et annet. Disse koblingene skal legges til i "post.hbs" -malen.

Et eksempel på hvordan disse koblingene kan implementeres, (fra Ghost docs-siden), er som følger:

#post 
tittel
 
 innhold 
 #prev_post title / prev_post #next_post title / next_post / post

Overordnede maler

Alle maler vi har dekket så langt, samsvarer med visse sammenhenger, men det er noen som kan brukes til å kontrollere utdataene fra enkelte hjelpere, f.eks.. navigasjon og Paginering. Som standard håndterer Ghost utgangene til disse hjelpene automatisk, men du har muligheten til å definere din egen produksjon innenfor temaet ditt.

Navigasjonsmall

Standard markup utdata av navigasjon hjelper er:

 #foreach navigasjon 
merkelapp
 /for hver 

For å bruke din egen navigasjonsmarkering i stedet, opprett en fil kalt "navigation.hbs" og legg den i partikkatalogen av temaet ditt.

Les mer i dokumentene.

Paginasjonsmal

Muligheten til å lage en egendefinert mal for Paginering Hjelperen er egentlig ikke ny, men det er noe vi ikke dekker tidligere i serien, og er dermed verdt å nevne her. Standaren Paginering kode i Ghost er:

Overstyr denne koden med din egen ved å opprette en mal med navnet "pagination.hbs" i temaet "partials" -mappen.

Mer her i dokumentene.

Ekstra funksjoner

I tillegg til nye sammenhenger, maler og hjelpere har Ghost også noen få ting lagt til i blandingen.

Utvalgte innlegg

Hvis du vil markere et bestemt innlegg som «Utvalgt», er det nå to måter i administrasjonsgrensesnittet.

Fra administrasjonsområdet som viser alle innleggene dine, klikker du på den lille stjernen øverst i venstre hjørne av vinduet for forhåndsvisning.

Fra innsiden av postredigeringsprogrammet klikker du på det lille girikonet nederst til høyre på skjermen, og merker av i boksen merket Funksjon dette innlegget.

I temaet ditt, hvis du vil bruke forskjellige oppslag for utvalgte innlegg, sjekk om et innlegg er omtalt med #if featured

#foreach posts #if featured  ellers  / if / foreach

Utvalgte innlegg bærer også klassen kjennetegnet slik at du kan målrette dem mot forskjellige styling i CSS. For at denne klassen skal bli utført, inkludere Post_class hjelper på innleggene dine. 

For eksempel i UberThemes "index.hbs", "post.hbs" og "page.hbs" -filer endres denne linjen:

… til:

Vanlige innlegg er som standard ikke plassert over andre innlegg, de er i sin vanlige posisjon basert på når de ble publisert. Men hvis du ønsker å ha omtalt innlegg vises først, må du ha to innleggsløyfer: ett for utvalgte innlegg og ett for vanlige innlegg.

#for featured #if featured ! - Vis utvalgte innlegg her - if / foreach #foreach innlegg #unless featured ! - Vis vanlige innlegg her - / unless / foreach

Alle sang sammen nå: Les mer i dokumentene.

Tilpassede Favicons

Hvis du vil angi et egendefinert favicon, plasserer du favicon.ico-filen i mappen "eiendeler" og laster den inn i delen av temaet ditt med

asset "/favicon.ico"

Les mer på Wikipedia (tuller, prøv Ghost docs).

Wrapping Up

Det er en hel del ny kraft lagt til i Ghost-temautvikling, med en mengde nye muligheter for kreativ temautvikling!

For å oppsummere har vi:

• "Package.json" -filen og ressurs hjelpesperre er nå nødvendig
• Navigasjon lagt til, med muligheten til å tilpasse HTML-utgangen
• Utvalgte bilder lagt til
• Nye hjelpere til å tillate mange flere alternativer i markup
• Statiske sider og tilpassede maler for dem
• Merk sidene og egendefinerte maler for dem
• Forfattersider og tilpassede maler for dem
• Hjemmeside mal
• Tilpasset feilmal
• Utvalgte innlegg
• Tilpassbare favikoner

Selv med alt vi har dekket her, er det fortsatt flere nye hjelpere og funksjoner tilgjengelig i Ghost, så vel som mer detaljert på alt ovenfor, så vær sikker på at du har en god lesning på themes.ghost.org for å få alle insene og outs.

Vedlagt denne opplæringen finner du en kildefilnedlastning der du kan få det oppdaterte temaet, samt den redigerte "layout.less" -filen. Bruk UberTheme som din teste lekeplass for å bli kjent med alt nytt i Ghost, så kom deg ut og lag noen fantastiske temaer!

Envato Market

Ikke glem å sjekke Ghost-kategorien på Envato Market!