Share
In deze tutorial zal ik je door alle belangrijke aspecten van het gebruik van Ghost's ingebouwde AMP-ondersteuning leiden.
Notitie: in dit artikel wordt ervan uitgegaan dat u al bekend bent met het maken van AMP-geldige pagina's, en als zodanig gericht bent op de details specifiek voor het samen gebruiken van Ghost en AMP. Als u nog geen ervaring heeft met AMP, bekijkt u het volgende:
Ik ga er ook van uit dat je weet hoe je een typisch Ghost-thema kunt maken. Zo niet, dan kunt u leren hoe door het lezen van:
In feite heeft Ghost automatische AMP-ondersteuning zonder dat je een vinger hoeft op te tillen. De AMP-versie van een bericht kan alleen worden bezocht door toe te voegen / Amp / naar zijn URL. De reguliere versie van een bericht bevat ook automatisch een link in de sectie om Google te laten weten dat deze AMP-versie beschikbaar is.
Als gevolg van deze geautomatiseerde functionaliteit, als u een Ghost-bericht bezoekt met Chrome met de AMP Validator-extensie geïnstalleerd, ziet u een klein blauw koppelingspictogram dat aangeeft dat er een AMP-versie van de pagina is gedetecteerd.
Klik op het pictogram om naar de AMP-versie van de post te gaan. Op dat moment ziet u het pictogram groen worden om geldige AMP-code aan te geven.
Deze geautomatiseerde AMP-ondersteuning is echter alleen voor afzonderlijke berichten. Andere soorten inhoud zoals uw startpagina of tagpagina's hebben geen AMP-versies tenzij u uw hele thema handmatig ontwikkelt om volledig te worden opgebouwd uit AMP-compatibele code.
Standaard wordt de presentatie van AMP-berichten op Ghost beheerd door een interne sjabloon. Om te zien hoe deze sjabloon is samengesteld en een referentie te krijgen voor hoe AMP met Ghost werkt, vindt u deze standaardsjabloon in uw Ghost-installatie op /core/server/apps/amp/lib/views/amp.hbs
Als u liever uw eigen markeringen en opmaak gebruikt voor uw AMP-berichten, moet u een sjabloon maken met de naam "amp.hbs"in de hoofdmap van uw thema.
Uw AMP-sjabloon kan niet worden uitgebreid op de standaard "default.hbs" -sjabloon, zoals u gewoonlijk zou doen bij het maken van Ghost-themasjablonen. Het moet eerder worden gemaakt als een volledig zelfstandig HTML-document met een eigen HTML-document html, hoofd en lichaam elementen.
De reden hiervoor is dat je moet zorgen voor:
Accentsconagua
hoofd sectieEen "default.hbs" -bestand in een typisch Ghost-thema voldoet niet aan de bovenstaande vereisten, vandaar de noodzaak om een op zichzelf staande "amp.hbs" te hebben.
Er zijn een aantal dingen waar u rekening mee moet houden met CSS in uw AMP-sjablonen.
Ten eerste, als u laadt in een aangepast lettertype van een van de goedgekeurde bronnen, moet u dit op een AMP-geldige manier doen. Een Google-lettertype kan bijvoorbeeld worden geladen via een URL zoals //fonts.googleapis.com in uw "default.hbs" -sjabloon, maar om de validatie in uw "amp.hbs" -sjabloon over te dragen, moet u dat wijzigen in https://fonts.googleapis.com
De andere primaire overweging is dat u al uw aangepaste CSS inline moet hebben tags in de sectie, waarbij uw CSS maximaal 50 kb overschrijdt en geen AMP CSS-regels overtreedt.
Er zijn twee manieren om dit te doen:
Als je "gewone" site echt wat zwaardere CSS nodig heeft, dan heb je misschien de vorige optie nodig, maar anders zou je het gemakkelijker kunnen vinden om de laatste optie te gebruiken.
Het hele stylesheet onder de 50 kb houden lijkt misschien intimiderend, aangezien sommige populaire CSS-frameworks meer in de buurt van 120 kb - 150 kb liggen, maar als je met het 50 kb-doel in gedachten bent, is het redelijk haalbaar. De niet-gemarkeerde CSS van het Ghost-standaardthema Casper is bijvoorbeeld 45,5Kb.
Als u deze methode wilt gebruiken, kunt u een deelsjabloon met de naam "css.hbs" maken en de CSS-code van uw site rechtstreeks in de CSS-code plaatsen. Dan kunt u in uw "default.hbs" -sjabloon deze CSS laden met:
En gebruik in plaats daarvan in uw "amp.hbs" -sjabloon:
Om het meeste uit je CSS te persen, kun je het ook verkleinen voordat je het in dit deel plaatst. U kunt de bestandsgrootte van deze partitie controleren om een redelijk goed idee te krijgen of u binnen de limiet van 50 kB bent.
In het head-gedeelte van je "amp.hbs" -sjabloon moet je de expressie opnemen Amp_ghost_head in plaats van het gebruikelijke Ghost_head. Dit zorgt ervoor dat er geen JS wordt uitgevoerd in het hoofd, waardoor de AMP-validatie wordt verbroken.
En, in tegenstelling tot normale Ghost-sjablonen, moet u de Ghost_foot uitdrukking allemaal samen.
Alle inhoud van een bericht kan worden weergegeven in de "amp.hbs" -sjabloon met behulp van de blokexpressie post ... / post. Tussen deze tags kunt u de volgende helpers gebruiken om inhoud uit te voeren:
Je hebt ook toegang tot alle @blog globale gegevens vanuit de "amp.hbs" -sjabloon, zoals @Blog Titel en @ blog.url, of binnen of buiten de post ... / post uitdrukking.
Zoals u weet, vereist AMP dat een aantal eigen aangepaste elementen worden gebruikt in plaats van normale HTML-elementen. Dit betekent dat er twee aspecten van uw Ghost-sites zijn, waarbij u ervoor moet zorgen dat de juiste AMP-elementen worden gebruikt:
In je berichtinhoud kan Ghost automatisch afbeeldingen, iframes, gifs en audio-elementen detecteren en deze vervolgens in hun AMP-tegenhangers herschrijven.
Om dit in te schakelen, moet u opnemen Amp_components in je hoofdgedeelte, vlak voor de sluiting tag, die eventuele extra scripts zal uitvoeren die AMP's aangepaste elementen nodig hebben. Je zult ook moeten gebruiken Amp_content in plaats van inhoud dus de juiste opmaak voor aangepaste elementen wordt geproduceerd.
Wat betreft de code in uw "amp.hbs" -sjabloon, moet u echter alle vereiste AMP-elementen handmatig toevoegen. Als u bijvoorbeeld de aanbevolen afbeelding van de post wilt opnemen, gebruikt u:
Dat omvat alle essentiële dingen om gebruik te maken van Ghost's in ingebouwde AMP-ondersteuning. Laten we een korte samenvatting van de belangrijkste punten:
Amp_ghost_head in plaats van Ghost_head Ghost_foot Amp_components vlak voor de sluiting post ... / post blokkeer expressie en alles @blog globale gegevens. Amp_content om inhoud uit te voeren. Dit moet in de post ... / post blok.Dat brengt ons bij het einde van deze snelle tutorial. Houd binnenkort een kijkje voor meer tips over het gebruik van AMP met andere platformen voor het maken van sites!
