Share
I denna handledning går jag igenom alla viktiga aspekter av att använda Ghosts inbyggda AMP-stöd.
Notera: den här artikeln förutsätter att du redan är bekant med hur man skapar AMP-giltiga sidor, och som sådan kommer att fokuseras på detaljerna specifikt för att använda Ghost och AMP tillsammans. Om du är ny på AMP, kolla in:
Jag antar också att du har kunskap om hur man skapar ett typiskt Ghost-tema. Om inte kan du lära dig hur du läser:
I själva verket har Ghost automatisk AMP-stöd utan att du behöver lyfta ett finger. AMP-versionen av ett inlägg kan besökas bara genom att lägga till / Amp / till dess webbadress. Den vanliga versionen av ett inlägg kommer också automatiskt att innehålla en länk i avsnitt för att låta Google veta den här AMP-versionen är tillgänglig.
På grund av denna automatiska funktionalitet kan du se en liten blå länkikon som indikerar att en AMP-version av sidan har upptäckts om du besöker en Ghost-post med Chrome med AMP Validator-förlängningen installerad..
Klicka på ikonen och du kommer att tas till postens AMP-version, då kommer du att se ikonen bli grön för att ange giltig AMP-kod.
Detta automatiska AMP-stöd är dock endast för enskilda inlägg. Andra typer av innehåll som din hemsida eller taggsidor kommer inte att ha AMP-versioner om du inte manuellt utvecklar hela temat för att vara helt byggt ut av AMP-kompatibel kod.
Som standard kontrolleras presentationen av AMP-inlägg på Ghost av en intern mall. För att se hur denna mall är sammanställd och få en referens för hur AMP fungerar med Ghost, kan du hitta den här standardmallen i din Ghost-installation på /core/server/apps/amp/lib/views/amp.hbs
Om du föredrar att använda din egen markering och styling för dina AMP-inlägg måste du skapa en mall som heter "amp.hbs"i rotmappen i ditt tema.
Din AMP-mall kommer inte att kunna utöka den vanliga "default.hbs" -mallen, som du vanligtvis skulle göra när du skapade teman för Ghost-teman. Snarare bör det skapas som ett komplett fristående HTML-dokument med sitt eget html, huvud och kropp element.
Anledningen till detta är att du måste se till att
Accentsconagua
huvud sektionEn "default.hbs" -fil i ett typiskt Ghost-tema skulle inte uppfylla ovanstående krav, därmed behovet av att ha en fristående "amp.hbs".
Det finns ett par saker att vara medveten om med CSS i dina AMP-mallar.
För det första, om du laddar i en anpassad typsnitt från en av de godkända källorna, var noga med att du gör det på ett AMP-giltigt sätt. Till exempel kan en Google-typsnitt laddas via en webbadress som //fonts.googleapis.com i din "default.hbs" -mall, men för att klara validering i din "amp.hbs" -mall skulle du behöva ändra det till https://fonts.googleapis.com
Det andra främsta övervägandet är att du måste ha alla dina anpassade CSS inline mellan taggar i avsnitt, med din CSS inte över 50kb och inte bryta någon AMP CSS regler.
Det finns två sätt att göra om detta:
Om din "vanliga" webbplats verkligen behöver lite tungviktig CSS kanske du behöver det tidigare alternativet, men annars kan det vara lättare att använda den senare.
Att hålla hela webbplatsens hela stilbunt under 50kb kan tyckas skrämmande med tanke på att några populära CSS-ramar ligger i området 120kb - 150kb, men om du ställer ut med 50kb-målet i åtanke är det ganska uppnåeligt. Exempelvis är den oförminskade CSS i Ghost-standardtematet Casper 45,5kb.
Om du vill använda den här metoden kan du skapa en partiell mall som heter "css.hbs" och placera all din webbplats CSS-kod direkt inuti. Därefter kan du i din "default.hbs" mall ladda denna CSS med:
Och i din "amp.hbs" mall används istället:
För att klara ut det mesta av din CSS kan du också begränsa det innan du placerar det i det här partiet. Du kan övervaka filstorleken för den här partitionen för att få en ganska bra idé om du befinner dig inom gränsen på 50 kb.
I huvuddelen av din "amp.hbs" mall måste du inkludera uttrycket Amp_ghost_head istället för det vanliga Ghost_head. Detta kommer att säkerställa att ingen JS är ute i huvudet, vilket skulle bryta AMP-validering.
Och till skillnad från i vanliga Ghost mallar, bör du släppa bort Ghost_foot uttryck alla tillsammans.
Allt innehåll i ett inlägg kan exponeras i "amp.hbs" mallen med hjälp av blockuttrycket post ... / post. Mellan dessa taggar kan du använda följande hjälpare för att utmata innehåll:
Du kan också få tillgång till alla @blog globala data från "amp.hbs" -mallen, t.ex. @Bloggtitel och @ blog.url, vare sig i eller utanför post ... / post uttryck.
Som du vet behöver AMP ett antal egna anpassade element som ska användas i stället för vanliga HTML-element. Det betyder att det finns två aspekter på dina Ghost-platser där du behöver se till att rätt AMP-element används:
I ditt inlägg kan Ghost automatiskt identifiera bilder, iframes, gifs och ljudelement och skriva om dem i sina AMP-motsvarigheter.
För att aktivera detta måste du inkludera amp_components i huvuddelen, precis före stängningen tagg, som kommer att mata ut ytterligare skript AMPs anpassade element krävs. Du måste också använda Amp_content istället för innehåll så den korrekta markeringen för anpassade element produceras.
När det gäller koden i din "amp.hbs" -mall måste du dock lägga till några obligatoriska AMP-element manuellt. Om du till exempel vill inkludera inläggets utvalda bild skulle du använda:
Det täcker alla väsentligheter för att knacka in i Ghosts inbyggda AMP-stöd. Låt oss få en snabb sammanfattning av nyckelpunkterna:
Amp_ghost_head istället för Ghost_head Ghost_footamp_components strax före stängningen post ... / post blockera uttryck och alla @blog globala data.Amp_content att skriva ut innehåll. Detta bör placeras inuti post ... / post blockera.Det tar oss till slutet av denna snabba handledning. Håll utkik efter fler tips om hur du använder AMP med andra plattformar för webbplatsskapande, som kommer snart!
