Share
AMP-projektet ger ett relativt handsfree sätt att implementera flera olika typer av webbsidaoptimering. Du kan läsa vår fullständiga sammanfattning av exakt vad projektet är och vad det gör i AMP Project: Kommer det att göra dina webbplatser snabbare?.
För att sammanfatta hur AMP implementeras kommer du att:
När du har gjort ovanstående tre saker hanteras resten av optimeringsprocessen för dig bakom kulisserna. Dessutom måste AMP-sidor genomgå ett valideringstest, och för att klara detta test måste alla sina bästa praxisregler följas.
En av AMP: s regler kan dock vara lite ojämförlig under utveckling, och det är kravet att alla anpassade CSS ska laddas inline i huvud sektion mellan en uppsättning av taggar.
Om du manuellt skriver din CSS direkt i dina sidor " huvud sektioner du kommer att möta problem och begränsningar. Skulle du behöva byta CSS på flera sidor, kommer det att vara mödosamt, och du kommer inte att ha möjlighet att använda CSS-förbättringsverktyg som förprocessorer eller miniräknare.
Om du ser dig själv som gör mer än en AMP-mall, vill du hitta ett sätt att skriva din CSS i ett externt stilark så att ditt vanliga arbetsflöde bibehålls, men ändå överför AMP-validering genom att flytta all din CSS i huvudet avsnitt efter faktum.
I det här snabba tipset lär du dig två sätt du kan göra just det.
Jade är ett språk du kan tänka på lika mycket som en preprocessor för HTML. Det låter dig skriva HTML i en tät, shorthandform som kompilerar till vanlig HTML, men viktigast av allt för det aktuella ämnet kan du också importera CSS-filer och få hela innehållet överallt där du gillar.
I den här metoden skriver du dina AMP-mallar med Jade-syntax och importerar en extern CSS-fil till huvuddelen av var och en av dina mallar. Det här är en av de bästa metoderna du kan använda för att skapa AMP-sidor om du behöver skriva ut statisk HTML. Så här går du igenom det.
Det första du behöver göra är att konfigurera det externa formatarket du vill importera till dina AMP-mallar. Skapa en mapp för att hysa ditt projekt, sedan inuti det skapa ett nytt stilark och namnge det "style.css".
Lägg till lite grundläggande CSS i ditt stilark, allt du vill ha så länge som filen fortfarande inte är större än 50kb, i enlighet med AMP: s valideringsregler.
Om du bara vill ha några test CSS för att komma igång, lägg till följande:
kropp bakgrund: # 3498db; färg: #fff
Nästa steg är att lägga till i AMPs boilerplate-kod, men med två signifikanta skillnader. En, vi använder Jade-syntax istället för rakt HTML, och två, vi importerar vår externa "style.css" -fil.
Skapa en ny fil i din projektmapp med namnet "index.jade" och lägg till följande kod till den:
doktyp html (amp, lang = "en") huvudmeta (charset = "utf-8") titel AMP via Jade-länk (rel = "canonical", href = "/ index.html") meta , content = "width = device-width, minimumskala = 1, initialskala = 1") skript (typ = "application / ld + json"). "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source-ram för publicering av innehåll", "datum Publicerat": "2015-10-07T12: 02: 41Z "," bild ": [" logo.jpg "] | | script (async, src = "https://cdn.ampproject.org/v0.js") stil (amp-custom) inkluderar style.css body h1 Detta är en Jade-baserad AMP-sida.
Ovanstående kod är densamma som du hittar i AMP-dokumenten, bara konverterad till Jade-syntax.
Du kommer att märka mot botten av den här koden vi har:
stil (amp-custom) inkluderar style.css
Linjeläsningen stil (amp-custom) kommer att mata ut det nödvändiga taggar. Inryckt på följande rad ser du inkludera style.css. Denna leverans Jade innehåller funktioner, och kommer att importera allt innehåll i din "style.css" -fil och mata ut den mellan stilen.
Du har nu installerat all nödvändig kod för den här metoden, och du behöver bara kompilera din Jade-mall. Du kan göra det antingen genom en arbetslöpare som Gulp eller Grunt, eller genom en kompileringsapp.
För relativt rakt fram projekt där du bara vill få filer sammanställd, rekommenderar jag att du använder en app som heter Prepros. Du behöver bara den kostnadsfria versionen för denna metod.
När du har installerat och kör Prepros är allt du behöver göra att dra din projektmapp till dess gränssnitt och det kommer att hitta din Jade-fil. Det börjar automatiskt titta på ditt projekt för ändringar, så spara bara din Jade- eller CSS-fil och det kommer att utlösa Prepros att kompilera din mall.
Du borde nu se en ny fil visas i ditt projekt med namnet "index.html", och inuti det borde du se din kompilerade HTML boilerplate kod komplett med inline anpassad CSS:
AMP via Jade Detta är en Jade-baserad AMP-sida.
Nästa sak du kommer att vilja göra är att kolla in en förhandsgranskning av din webbplats. Även om det är möjligt att bara se din AMP-fil i en webbläsare laddad direkt från hårddisken, är det bra att förhandsgranska dina webbplatser med ett lokalt värd, dvs att simulera en webbhotell på datorn.
Prepros kommer med en inkluderad localhost förhandsgranskning som automatiskt uppdateras när ändringar görs i ditt projekt. Du kommer emellertid inte att kunna använda den med AMP (tyvärr). Anledningen till att Prepros laddar in vissa JavaScript i dess förhandsgranskning för att aktivera live reload, men på grund av det faktum att ingen anpassad JavaScript är tillåten på AMP-sidor kommer validatorn att upptäcka det här skriptet och sedan kasta ett fel.
Av den anledningen är det tillvägagångssätt som jag rekommenderar att konfigurera ditt lokala förhandsgransknings lokalahost med MAMP för Mac eller Windows. Du följer samma process som vi gick igenom ovan, den enda skillnaden är att du ska skapa din projektmapp i din MAMP "htdocs" -mapp innan du drar den på ditt Prepros-gränssnitt. När MAMP körs, så kan du förhandsgranska det på en webbadress som http: // localhost: 8888 / myproject.
Med detta tillvägagångssätt får du det bästa av båda världarna: en localhost förhandsgranskning utan valideringsfel via MAMP och automatisk Jade-kompilering via Prepros.
Om du inte behöver skapa statiska HTML-mallar har du möjlighet att använda PHP för att dynamiskt mata ut ditt stilark i huvuddelen. Detta tillvägagångssätt kräver förmodligen lite mindre krångel, men det är bara lämpligt om dina projektkrav (och din värd) tillåter PHP.
Förresten, även om du aldrig använt PHP tidigare och bara vill skriva i rakt HTML istället för att använda Jade-syntax, kan du fortfarande använda den här tekniken.
Börja med att skapa en indexfil med standard AMP boilerplate-kod som lagts till den, men istället för att namnge filen "index.html" heter det "index.php":
Hej, AMP: er Välkommen till mobilwebben
Om du redan har arbetat med en AMP-mall kan du också bara byta namn på filen och byta tillägget till ".php", så att det konverteras till en PHP-fil. Till exempel skulle "about.htm" bytas till "about.php". (Se till att du ändrar tillägget på alla interna länkar också.)
Skapa nu ett externt stilark med namnet "style.css" i din rotmapp. Om du har en mall som du redan arbetar på, skära någon CSS du för närvarande har mellan din taggar och klistra in det i ditt externa formatark.
För att dra din externa CSS i din AMP-fils huvudavsnitt klistra du bara på den här enraden PHP-snippet mellan tags:
Om du inte är särskilt intresserad av PHP kan du lämna det genom att veta att snippet tillåter att PHP hämtar ditt stilark från servern, läser innehållet och sedan utmatar det inline. Men om du vill veta mer om snippet, låt oss bryta ner det.
Först har vi öppna och stänga PHP-taggar . Dessa låter servern veta att det som finns mellan dessa taggar är PHP och inte vanlig HTML.
Då använder vi funktionen readfile (). Den här funktionen ser på filen som anges mellan parenteserna, hämtar den från servern, läser innehållet och skickar sedan ut innehållet inline.
Mellan parentesen har vi funktionen getcwd (). Denna funktion får sökvägen till den aktuella arbetsmappen, det vill säga katalogen vår PHP-fil är in.
Därefter har vi strängen (normal text) "/style.css" som anger namnet på vårt stilark i förhållande till platsen för vår PHP-fil. Sedan mellan denna sträng och getcwd () funktion vi placerar en punkt . som sammanbindar (kopplar samman) de två tillsammans för att skapa hela vägen till vårt stilark. Till exempel i en MAMP-förhandsvisning skulle sökvägen vara något som "/Applications/MAMP/htdocs/myproject/style.css".
Du kan använda detta kod i så många av dina PHP-mallar som du behöver, och eventuella ändringar i ditt externa formatark kommer att matas ut över alla dina mallar.
Precis som med Jade-metoden använder ett bra sätt att förhandsgranska dina PHP-baserade AMP-sidor MAMP, som har fullt stöd för PHP. Installera MAMP och skapa din projektmapp i mappen "htdocs" och du kommer att kunna förhandsgranska din webbplats på en webbadress som http: // localhost: 8888 / myproject utan ytterligare setup.
Vi har nu täckt två sätt att behålla ditt externa format och normalt CSS-utvecklings arbetsflöde, men ändå överföra din AMP-validering genom att flytta din CSS inline. Låt oss snabbt summera var och en.
Accentsconagua
huvud sektion. Kompilera med Prepros och förhandsgranska med MAMP.huvud sektion. Förhandsgranska med MAMP.När det gäller vilken metod som ska väljas, beror det på specifika uppgifter i ditt projekt, men i allmänhet:
Med någon av dessa metoder kan du utveckla CSS på det sätt du är van vid, med ändringar som omedelbart återspeglas över alla mallar och tillgång till preprocessorer och optimeringsverktyg, samtidigt som du klipper in din CSS på ett kompatibelt sätt enligt AMP.
Jag hoppas det hjälper till att göra dina AMP-utvecklingsprocesser lite smidigare!
