Share
Het AMP-project biedt een relatief handsfree manier om verschillende soorten webpagina-optimalisatie te implementeren. U kunt ons complete overzicht van wat het project precies is en wat het doet in AMP Project lezen: Zal het uw sites sneller maken??.
Om samen te vatten hoe AMP wordt geïmplementeerd, zult u:
Nadat u de bovenstaande drie dingen hebt gedaan, wordt de rest van het optimalisatieproces achter de schermen voor u afgehandeld. Bovendien moeten AMP-pagina's een validatietest doorstaan en om aan deze test te slagen, moeten alle praktische richtlijnen worden gevolgd..
Een van de regels van AMP kan echter een beetje onpraktisch zijn tijdens de ontwikkeling, en dat is de vereiste dat alle aangepaste CSS inline wordt geladen in de hoofd sectie tussen een set labels.
Als u uw CSS handmatig rechtstreeks in de pagina's van uw pagina schrijft hoofd secties waar je problemen en beperkingen tegenkomt. Mocht u de CSS op meerdere pagina's van de site moeten veranderen, dan zal het bewerkelijk zijn en heeft u niet de mogelijkheid om CSS-verbeteringshulpmiddelen zoals preprocessors of minifiers te gebruiken.
Om deze reden, als je jezelf meer dan één AMP-sjabloon maakt, wil je een manier vinden om je CSS in een externe stylesheet te schrijven, zodat je gebruikelijke workflow wordt gehandhaafd, maar sla je AMP-validatie over door al je CSS in het hoofd te verplaatsen sectie na het feit.
In deze snelle tip leer je twee manieren om precies dat te doen.
Jade is een taal die je kunt bedenken net als een preprocessor voor HTML. Hiermee kun je HTML schrijven in een korte, afgekorte vorm, die wordt gecompileerd in gewone HTML, maar het belangrijkste is dat je voor het onderwerp ook CSS-bestanden kunt importeren en hun volledige inhoud kunt laten uitvoeren waar je maar wilt.
In deze methode schrijft u uw AMP-sjablonen met behulp van de Jade-syntaxis en importeert u een extern CSS-bestand in de kopsectie van elk van uw sjablonen. Dit is een van de beste methoden die u kunt gebruiken om AMP-pagina's te maken als u statische HTML wilt uitvoeren. Hier is hoe je het aanpakt.
Het eerste dat u moet doen, is het externe stylesheet instellen dat u in uw AMP-sjablonen wilt importeren. Maak een map om uw project te huisvesten, maak er vervolgens een nieuw stylesheet van en noem het "style.css".
Voeg wat standaard CSS toe aan uw stylesheet, alles wat u wilt, zolang uw bestand niet groter is dan 50 kb, in overeenstemming met de validatieregels van AMP.
Als u alleen wat test-CSS wilt om aan de slag te gaan, voegt u het volgende toe:
body background: # 3498db; kleur: #fff
De volgende stap is het toevoegen van de boilerplate-code van AMP, maar met twee significante verschillen. Ten eerste zullen we Jade-syntaxis gebruiken in plaats van gewone HTML, en twee, we zullen ons externe "style.css" -bestand importeren.
Maak een nieuw bestand in uw projectmap met de naam "index.jade" en voeg de volgende code toe:
doctype html (amp, lang = "en") head meta (charset = "utf-8") title AMP via Jade link (rel = "canonical", href = "/ index.html") meta (name = "viewport" , content = "width = device-width, minimum-scale = 1, initial-scale = 1") script (type = "application / ld + json"). "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open source-framework voor het publiceren van content", "datePublished": "2015-10-07T12: 02: 41Z "," image ": [" logo.jpg "] | | script (async, src = "https://cdn.ampproject.org/v0.js") style (amp-custom) include style.css body h1 Dit is een Jade gebaseerde AMP-pagina.
De bovenstaande code is dezelfde als die u vindt in de AMP-documenten, zojuist geconverteerd naar Jade-syntaxis.
U zult merken aan de onderkant van deze code die we hebben:
stijl (amp-custom) bevat style.css
De lijnlezing stijl (amp-maat) zal de vereiste uitvoeren -tags. Ingesprongen op de volgende regel die u zult zien include style.css. Dit maakt gebruik van Jade's functionaliteit en zal alle inhoud van je "style.css" -bestand importeren en dit tussen de stijl-tags uitvoeren.
U hebt nu alle vereiste code voor deze methode ingesteld en u hoeft alleen uw Jadesjabloon te compileren. Je kunt dit doen via een taakrunner zoals Gulp of Grunt, of via een compilatie-app.
Voor relatief eenvoudige projecten waarbij je alleen bestanden wilt laten compileren, raad ik aan om een app genaamd Prepros te gebruiken. U hebt alleen de gratis / proefversie nodig voor het doel van deze methode.
Nadat u Prepros hebt geïnstalleerd en uitgevoerd, hoeft u alleen maar uw projectmap naar de interface te slepen en wordt uw Jade-bestand gevonden. Het zal automatisch naar je project gaan kijken voor veranderingen, dus sla gewoon je Jade- of CSS-bestand op en dat zal Prepros triggeren om je sjabloon te compileren.
U zou nu een nieuw bestand moeten zien verschijnen in uw project genaamd "index.html", en daarbinnen zou u uw gecompileerde HTML boilerplate code moeten zien compleet met inline aangepaste CSS:
AMP via Jade Dit is een op Jade gebaseerde AMP-pagina.
Het volgende dat u gaat doen, is een voorbeeld van uw site bekijken. Hoewel het mogelijk is om gewoon uw AMP-bestand te bekijken in een browser die rechtstreeks vanaf uw harde schijf is geladen, is het een goede gewoonte om uw sites te bekijken met een lokale host, d.w.z. om een webhost op uw computer te simuleren..
Prepros komt met een meegeleverde lokale voorbeeldweergave die automatisch wordt vernieuwd wanneer er wijzigingen in uw project worden aangebracht. U kunt het echter niet gebruiken met AMP (helaas). Prepros laadt wat JavaScript in zijn voorbeeld om live herladen mogelijk te maken, maar vanwege het feit dat geen aangepast JavaScript is toegestaan op AMP-pagina's, zal de validator dit script detecteren en dan een foutmelding geven.
Om deze reden is de benadering die ik aanbeveel, om je site preview localhost in te stellen met MAMP voor Mac of Windows. Je volgt hetzelfde proces als hierboven, het enige verschil is dat je je projectmap in je MAMP "htdocs" -map maakt voordat je hem naar je Prepros-interface sleept. Wanneer MAMP wordt uitgevoerd, kunt u dit bekijken op een URL zoals http: // localhost: 8888 / myproject.
Met deze aanpak haalt u het beste uit twee werelden: een localhost-preview zonder validatiefouten via MAMP en automatische Jade-compilatie via Prepros.
Als u geen statische HTML-sjablonen hoeft te genereren, hebt u de mogelijkheid om PHP te gebruiken om uw stylesheet dynamisch in uw kopsectie uit te voeren. Deze aanpak vereist waarschijnlijk wat minder gedoe, maar is alleen geschikt als uw projectvereisten (en uw gastheer) PHP toestaan.
Overigens, zelfs als je nog nooit eerder PHP hebt gebruikt en gewoon wilt schrijven in rechte HTML in plaats van Jade-syntaxis te gebruiken, kun je deze techniek nog steeds gebruiken.
Begin door een indexbestand te maken met de standaard AMP boilerplate-code eraan toegevoegd, maar in plaats van het bestand "index.html" een naam te geven, noem het "index.php":
Hallo, AMP's Welkom bij het mobiele web
Als u al aan een AMP-sjabloon hebt gewerkt, kunt u ook het bestand een andere naam geven en de extensie wijzigen in ".php", waardoor het wordt geconverteerd naar een PHP-bestand. "About.htm" zou bijvoorbeeld worden hernoemd naar "about.php". (Zorg er wel voor dat u de extensie ook op interne links wijzigt.)
Maak nu een externe stylesheet met de naam "style.css" in uw hoofdmap. Als je een sjabloon hebt waaraan je al werkt, knip dan elke CSS die je momenteel hebt tussen je tags en plak deze in uw externe stylesheet.
Als je je externe CSS in het hoofdgedeelte van je AMP-bestand wilt plaatsen, plak je dit éénregelige PHP-fragment tussen de tags:
Als je niet erg geïnteresseerd bent in PHP, kun je dat laten, wetende dat het codefragment PHP toestaat je stylesheet op te halen van de server, de inhoud ervan leest en het inline weergeeft. Als u echter meer wilt weten over het fragment, laten we het opsplitsen.
Ten eerste hebben we de PHP-tags voor openen en sluiten . Deze laten de server weten dat wat er tussen deze tags zit, PHP is en geen normale HTML.
Dan gebruiken we de functie ReadFile (). Deze functie kijkt naar het bestand dat tussen de haakjes is gespecificeerd, haalt het op van de server, leest de inhoud ervan uit en geeft die inhoud inline weer.
Tussen de haakjes hebben we de functie getcwd (). Deze functie krijgt het pad naar de huidige werkdirectory, d.w.z. de map waarin ons PHP-bestand zich bevindt.
Daarna hebben we de string (normale tekst) "/style.css" die de naam van onze stylesheet aangeeft, ten opzichte van de locatie van ons PHP-bestand. Dan tussen deze string en de getcwd () functie plaatsen we een punt . welke de twee samenvoegt (verbindt) om het volledige pad naar ons stylesheet te creëren. In een MAMP-voorbeeld zou het pad bijvoorbeeld "/Applications/MAMP/htdocs/myproject/style.css" zijn.
U kunt dit fragment in zoveel PHP-sjablonen gebruiken als u nodig hebt en alle wijzigingen in uw externe stylesheet worden in al uw sjablonen weergegeven.
Net als bij de Jade-methode, is een geweldige manier om een voorbeeld van uw op PHP gebaseerde AMP-pagina's te bekijken, het gebruik van MAMP, dat volledige ondersteuning biedt voor PHP. Installeer MAMP en maak uw projectmap binnen de map "htdocs" en u kunt een voorbeeld van uw site weergeven op een URL zoals http: // localhost: 8888 / myproject zonder enige aanvullende configuratie.
We hebben nu twee manieren behandeld waarop u uw externe stylesheet en normale CSS-ontwikkelingsworkflow kunt behouden, maar nog steeds uw AMP-validatie doorgeeft door uw CSS inline te verplaatsen. Laten we ze snel samenvatten.
Accentsconagua
hoofd sectie. Compileer met Prepros en voorbeeld met MAMP.hoofd sectie. Voorbeeld met MAMP.Voor welke methode te kiezen, het zal afhangen van de details van uw project, maar in het algemeen gesproken:
Met een van deze methoden kunt u CSS ontwikkelen op de manier zoals u gewend bent, waarbij wijzigingen direct worden doorgevoerd in alle sjablonen en toegang hebben tot preprocessors en optimalisatietools, terwijl uw CSS nog steeds op een AMP-compatibele manier wordt ingevoegd.
Ik hoop dat dit helpt om je AMP-ontwikkelingsprocessen een beetje soepeler te maken!
