Share
I denne opplæringen vil jeg gå gjennom alle de viktigste aspektene ved å bruke Ghosts innebygde AMP-støtte.
Merk: Denne artikkelen forutsetter at du allerede er kjent med hvordan du lager AMP-gyldige sider, og som sådan vil fokusere på detaljene som er spesifikke for å bruke Ghost og AMP sammen. Hvis du er ny til AMP, sjekk ut:
Jeg antar også at du har kunnskap om hvordan du lager et typisk Ghost-tema. Hvis ikke, kan du lære hvordan du leser:
Faktisk har Ghost automatisk AMP-støtte uten at du må løfte en finger. AMP-versjonen av et innlegg kan bli besøkt bare ved å legge til vedlegg / Amp / til nettadressen sin. Den vanlige versjonen av et innlegg vil også automatisk inkludere en lenke i avsnitt for å la Google vite at denne AMP-versjonen er tilgjengelig.
På grunn av denne automatiske funksjonaliteten, hvis du besøker et Ghost-innlegg ved hjelp av Chrome med AMP Validator-utvidelsen installert, vil du se et lite blått linkikon som indikerer at en AMP-versjon av siden har blitt oppdaget.
Klikk på ikonet og du vil bli tatt til postens AMP-versjon, da vil du se at ikonet blir grønt for å indikere gyldig AMP-kode.
Denne automatiserte AMP-støtten er imidlertid kun for enkelt innlegg. Andre typer innhold som hjemmesiden eller taggsidene dine vil ikke ha AMP-versjoner med mindre du manuelt utvikler hele temaet ditt, helt ut fra AMP-kompatibel kode.
Som standard er presentasjonen av AMP-innlegg på Ghost styrt av en intern mal. For å se hvordan denne malen er satt sammen, og få en referanse for hvordan AMP fungerer med Ghost, kan du finne denne standardmalen i Ghost-installasjonen din på /core/server/apps/amp/lib/views/amp.hbs
Hvis du foretrekker å bruke din egen markering og styling for dine AMP-innlegg, må du opprette en mal med navnet "amp.hbs"i rotmappen til temaet ditt.
AMP-malen din vil ikke kunne utvides på den vanlige "default.hbs" -malen, som du vanligvis ville ha ved å lage Ghost-templatmaler. Snarere bør det opprettes som et komplett frittstående HTML-dokument med sitt eget html, hode og kropp elementer.
Årsaken til dette er at du må sørge for:
Accentsconagua
hode seksjonEn "default.hbs" -fil i et typisk Ghost-tema ville ikke oppfylle de ovennevnte kravene, derav behovet for å ha en selvstendig "amp.hbs".
Det er et par ting å være klar over med CSS i AMP-maler.
For det første, hvis du laster inn i en tilpasset skrift fra en av de godkjente kildene, må du sørge for at du gjør det på en gyldig måte. For eksempel kan en Google-skrifttype lastes inn via en nettadresse som //fonts.googleapis.com i "default.hbs" -malen, men for å bestå validering i "amp.hbs" -malen din, må du endre det til https://fonts.googleapis.com
Den andre primære hensynet er at du må ha alle dine egendefinerte CSS inline mellom koder i seksjonen, med CSS ikke over 50kb og ikke bryte noen AMP CSS regler.
Det er to måter å gå om dette på:
Hvis din "vanlige" side virkelig trenger noen tungvektig CSS, trenger du kanskje det tidligere alternativet, men ellers kan det være lettere å bruke sistnevnte.
Å holde nettstedets hele stilark under 50kb kan virke skremmende, gitt at noen populære CSS-rammer er mer i området 120kb - 150kb, men hvis du satser med 50kb-målet i tankene, er det ganske oppnåelig. For eksempel er unminified CSS of Ghost-standardtemaet Casper 45,5 kb.
Hvis du ønsker å bruke denne tilnærmingen, kan du opprette en delvis mal med navnet "css.hbs" og plassere hele webområdet ditt CSS-kode direkte inne. Deretter i din "default.hbs" mal kan du laste dette CSS med:
Og i "amp.hbs" -malen din i stedet bruk:
For å få mest mulig ut av CSS kan du også redusere det før du legger det inn i denne delen. Du vil kunne overvåke filstørrelsen på denne delen for å få en ganske god ide om du er innenfor 50kb grensen.
I hoveddelen av "amp.hbs" -malen må du inkludere uttrykket Amp_ghost_head i stedet for det vanlige Ghost_head. Dette sikrer at ingen JS er ute i hodet, noe som vil ødelegge AMP-validering.
Og i motsetning til vanlig Ghost maler, bør du utelate Ghost_foot uttrykk alt sammen.
Alt innholdet i et innlegg kan bli eksponert i "amp.hbs" -malen ved å bruke blokkuttrykket post ... / post. I mellom disse kodene kan du bruke følgende hjelpere til å utføre innhold:
Du kan også få tilgang til alle @blog globale data fra "amp.hbs" -malen, for eksempel @bloggtittel og @ blog.url, enten i eller utenfor post ... / post uttrykk.
Som du vet, krever AMP et antall egne egendefinerte elementer som skal brukes i stedet for vanlige HTML-elementer. Dette betyr at det er to aspekter av Ghost-stedene dine hvor du må sikre at de riktige AMP-elementene blir brukt:
I innleggets innhold Ghost kan automatisk oppdage bilder, iframes, gifs og lydelementer og omskrive dem i sine AMP-kolleger.
For å aktivere dette må du inkludere amp_components i hodet ditt, like før avslutningen tag, som vil sende ut noen ekstra skript AMPs egendefinerte elementer kreves. Du må også bruke Amp_content i stedet for innhold slik at riktig oppretting for tilpassede elementer blir produsert.
Når det gjelder koden i "amp.hbs" -malen, må du imidlertid legge til nødvendige AMP-elementer manuelt. For eksempel, hvis du vil inkludere innleggets uthevede bilde du vil bruke:
Det dekker alle essensialene for å tappe inn Ghost i bygget AMP-støtte. La oss få en rask omtale av hovedpunktene:
Amp_ghost_head i stedet for Ghost_head Ghost_footamp_components rett før avslutningen post ... / post blokkere uttrykk og alt @blog globale data.Amp_content å utdata innhold. Dette skal plasseres inne i post ... / post blokkere.Det bringer oss til slutten av denne raske opplæringen. Hold øye med flere tips om hvordan du bruker AMP med andre plattformer for webutvikling, som kommer snart!
