Share
AMP-projektet är ett nyligen distribuerat open source-initiativ som stöds av Google, med målet att hjälpa till att göra webbplatser snabbare, särskilt de som har stor användning av media och / eller behov av monetisering. Det är i grund och botten ett "inget krångel" sätt att rulla ut vad som annars skulle kunna vara något komplext optimeringsmetoder, med de flesta processerna som tas hand om bakom kulisserna för dig.
I vår artikel AMP Project: Kommer det att göra dina webbplatser snabbare? Vi kommer in i detalj om vad AMP kommer att betyda för dig från utvecklarens synvinkel och ger dig några rånummer på vilken typ av hastighetsvinster som AMP kan eller kanske inte ger du.
I den här handledningen kommer vi att vara mer praktiska, med en stegvis guide för att faktiskt skapa en AMP-sida från början och förklara hur du gör några vanliga uppgifter AMP-sättet och dela några tips när vi går.
Låt oss börja!
Lägga till standard kedjeplattkod är var varje AMP-mall börjar. Det finns en uppsättning kod som måste vara närvarande i varje AMP-mall, eller det kommer att misslyckas validering.
Skapa en ny HTML-fil som heter index.html och lägg till följande kod till den:
Gör en AMP-sida Gör en AMP-sida
Du kan läsa en sammanfattning av varje element i ovanstående kod på:
Du kan (om du väljer) förhandsgranska din nyskapade AMP-mall genom att öppna den direkt i en webbläsare. Men det är alltid en bra idé att förhandsgranska på ett lokalt värd istället. Detta tillvägagångssätt simulerar en webbhotell, så miljön du förhandsgranskar din mall i är så nära som möjligt för den levande miljö som den kommer att distribueras till.
För detta ändamål rekommenderar jag att du använder MAMP för Windows eller Mac. Om du inte redan har MAMP installerat, gå till MAMP webbplatsen och hämta en kopia.
När du har installerat MAMP, hitta dess htdocs mapp. På Mac hittar du det typiskt på / Program / MAMP / htdocs, och på Windows på C: \ MAMP \ htdocs \.
Inuti det, skapa en ny mapp för att hysa ditt projekt, t.ex.. mitt projekt. Flytta sedan index.html fil du skapade i föregående steg i mappen.
Kör MAMP och du ska nu kunna förhandsgranska din AMP-mall genom att gå till webbadressen http: // localhost: 8888 / myproject / i Chrome. Även om du föredrar en annan webbläsare, använd Chrome eftersom vi använder Chrome Developer Tools i nästa steg.
Din AMP-sida borde för närvarande se ut så här:
Om du går till den här webbadressen och det inte fungerar kan det hända att MAMP körs på ett annat portnummer till 8888 som du ser i webbadressen ovan. För att ta reda på om så är fallet, klicka på knappen som läser på MAMP-gränssnittet Öppna WebStart-sidan. Detta tar dig till en sida med information om MAMP, och i URL: n ser du rätt portnummer som ska användas istället:
Innan vi går längre vill vi aktivera AMP: s debug-läge, så om vi av misstag gör något som inte passerar validering så vet vi omedelbart det.
För att göra detta, lägg till # Utveckling = 1 till slutet av förhandsgranskningsadressen, t.ex. http: // localhost: 8888 / myproject / # utveckling = 1.
Öppna sedan upp Utvecklarverktyg för Chrome och gå till Trösta flik, där du ska se följande Drivs av AMP ⚡ HTML… Meddelandet visas:
När du utvecklar din sida, om något inte överensstämmer med AMP-validering så får du se ett felmeddelande i konsolen. Just nu har vi inga felmeddelanden och ser istället "AMP-validering framgångsrik", så att vi vet att allt fungerar som det borde vara.
Tillsammans med kedjekodskoden du redan har lagt till, har du möjlighet att lägga till några JSON-metadata till huvuddelen i Schema.org-format som så:
Detta är inte nödvändigt för att klara AMP-validering, men det är viktigt för att kunna hämtas av olika platser, som Google Search News.
För att läsa mer om detta metadata besök:
En av kraven i AMP är att alla anpassade CSS ska placeras inline i huvud sektion, mellan taggar.
Trots det här kravet är det faktiskt inte att skriva din CSS direkt i huvuddelen, det är inte ett perfekt arbetsflöde. Vad du verkligen behöver är att kunna skriva din CSS i ett externt stilark, som du normalt skulle ha, då har den CSS flyttats till lämplig plats i huvud delar av alla dina webbplatsens mallfiler.
Vi kommer inte att täcka steg för steg om hur du gör det här, men om du vill veta hur du använder ett externt stilark och fortfarande passerar AMP-validering, följ stegen i vår snabba tips-handledning. Gör AMPs Inline CSS-enklare via Jade eller PHP innan du fortsätter.
Nu när du har din väsentliga kod på plats, aktiverat utvecklingsläge och (valfritt) extern stilhanteringshantering, kan vi nu fortsätta lägga till lite media på din sida. Vi börjar med den vanligaste typen av media: bilder.
I AMP använder du inte
Härifrån i handledningen kommer vi att arbeta med en befintlig mallkonstruktion för att hjälpa till att snabba på saker längs. Fortsätt nu och ta tag i dig en kopia av den fria Ceevee-mallen av StyleShout. Den här mallen innehåller några bilder du kan använda för att träna in i ditt AMP-dokument.
I Ceevee-mallarna bilder mapp du får se en stor bild av sanddyner på natten. Vi börjar med att placera detta i din mall. Kopiera bilder mapp och klistra in den i din projektmapp.
Lägg sedan till följande kod för att bädda in bilden ovanför h1 taggar som redan finns i HTML:
Vilken form av media som placeras i en AMP-sida måste ha en början bredd och höjd set, så olikt med att använda en img tagg, i en amp-img tagg kan du inte lämna dessa attribut ut.
Om du inte är exakt vilken storlek en bild blir är det okej, så länge som värdena du anger korrekt representerar bildförhållandet. De bredd och höjd värden kan betraktas som platshållare, eftersom AMP kan layoutera sidan med de värden du anger och sedan göra justeringar efter att bilden är fullt laddad.
De layout Attribut är det som gör att AMP kan justera bildens bildskärm efter det att den har laddats. Vi har satt sitt värde till mottaglig, vilket innebär att bilden kommer att bibehålla aspektförhållandet som härrör från bredden och höjdsvärdena, men krympa eller expandera för att fylla dess behållare. Det är därför även om du inte känner till en bilds exakta storlek, så länge du har bildformatet är du bra att gå.
Spara och uppdatera förhandsgranskningen och du ska se bilden fylla i ditt visningsport:
Läs mer om amp-img och den layout attribut på:
Ett vanligt element i webbdesign idag är användningen av en bakgrundsbild som fyller höjd och bredd på visningsporten, skapar något av en postpresentation för en sida. Vanligtvis görs detta med hjälp av en bakgrundsbild med CSS bakgrundsstorlek: omslag; tillämpas på den. Men på AMP-webbplatser vill vi inte verkligen ta in stora bakgrundsbilder via CSS eftersom detta skulle kringgå systemets laddningsoptimering.
Nu kan du säkert göra argumentet att att ladda en stor bakgrundsbild inte är idealisk för att öka lasthastigheten, och därför kan du vara bättre att lämna stora bilder ut tillsammans.
Om du emellertid oundvikligen behöver skapa en design med en stor, fullvärdig bild kan du ändå åtminstone dra in AMPs laddningsprioritering genom att lägga till den via amp-img taggen istället för som bakgrund. Så här kan du göra det, vilket approximerar bakgrunden "täck" -tekniken i processen.
Vi ska ta bilden som du bara inbäddade och förvandla den till en omslagsbild. Först, wrap bilden med en div tagg med klassen doc_header så du har:
Sedan, om du inte redan har lagt till, lägg till några taggar till huvuddelen så att vi kan inkludera några anpassade CSS. Mellan dessa taggar lägg till:
.doc_header höjd: 100vh; bakgrundsfärg: # 000; överflöde: gömd; position: relativ;
Vanligen istället för vad du ser ovan, när du skapar en omslagsbild kommer en designer att ställa in höjd av html och kropp element till 100% och sätt sedan in deras omslagssektion till en höjd av 100%, gör att den fyller visningsporten.
Men detta tillvägagångssätt kommer inte att fungera med AMP, eftersom CSS den laddar styrker stilen höjd: auto! viktigt; på kropp element, förhindrar en inställning av höjd: 100%; från att arbeta.
Så i stället, om du verkligen behöver något för att vara höjden på visningsporten du kan använda höjd: 100vh;, som vi har gjort med vårt doc_header klass. De vh enheten representerar "viewport height" och ett värde på 100vh motsvarar 100% av viewporthöjden.
Om du sparar och uppdaterar din webbplats nu bör du se att "doc_header" -fältet fyller visningsporten exakt.
För närvarande fyller bilden inte nödvändigtvis "doc_header" div. Om visningsporten är längre än den är bred, kommer det att finnas ett tomt svart område under det.
För att fixa detta lägg till klassen doc_header_bg till din amp-img tagg så här:
Lägg sedan till i din CSS:
.doc_header_bg minhöjd: 100vh;
Den här koden säkerställer att bildhöjden aldrig är mindre än den för visningsporten.
Tyvärr kommer det fortfarande att bli squashed på smalare bredder så det är inte lika elegant i utseende som att använda en bakgrundsbild. Det är dock lika nära en approximation som vi kan få medan vi fortfarande använder amp-img element.
Nu ska vi lägga till några anpassade webbfonter i vår mall. När du gör det med AMP har du tre laddningsmetoder som passerar validering:
Accentsconagua
@ Font-face Att ladda en Google-teckensnitt ska ske via ett länkelement i huvudet, med den webbadress du har angett för de teckensnitt du vill ha på https://www.google.com/fonts.
För vår mall använder vi Open Sans och Libre Baskerville.
För att ladda dessa två teckensnitt lägger du till den här koden i huvuddelen:
Vi lägger nu till lite text på vårt områdesomslag, där vi ska tillämpa våra nya webbfonter. Inne i den befintliga "doc_header" diven, under bilden, lägg till en ny div med klassen doc_header_inner:
Innehåll som div lägger till följande kod:
Simulera bakgrundsbildsöverdrag
Detta är en grundläggande sida som skapats för att visa dig hur du arbetar med AMP-projektet. I den här omslagsavdelningen använder bakgrundsbilden AMP-laddningsoptimering. De sociala ikonerna nedan använder AMP-kompatibel anpassad typsnittsladdning. Läs vidare för att se fler sätt att använda AMP.
Lägg nu till följande i din anpassade CSS:
kropp font-family: 'Open Sans', sans-serif; fontstorlek: 1rem; linjehöjd: 2; färg: # 838C95; .doc_header_inner position: absolute; bredd: 85vw; maxbredd: 64rem; topp: 50%; vänster: 50%; transformera: translate (-50%, -50%); padding-bottom: 2rem; text-align: center; h1.doc_header_title font: bold 5.625rem / 1.1em 'Open Sans', sans-serif; färg: #fff; brevavstånd: -0.125rem; marginal: 0 auto 1rem auto; textskugga: 0 0,0625rem 0,1875rem rgba (0, 0, 0, .8); @media (maxbredd: 35rem) h1.doc_header_title font-size: 12vw; p.doc_header_text font-family: 'Libre Baskerville'; linjehöjd: 1,9; färg: # A8A8A8; marginal: 0 auto; bredd: 70%; text-skugga: 0 0.0625rem 0.125rem rgba (0, 0, 0, .5); .doc_header_text span, .doc_header_text a färg: #fff; .doc_header_inner hr bredd: 60%; marginal: 1.125rem auto 1.5rem auto; kantfärg: # 2F2D2E; kantfärg: rgba (150, 150, 150, .1);
Koden ovan är bara vanlig CSS för att lägga ut vår nyligen tillagda text, men du märker att processen med att applicera våra Google-teckensnitt i en AMP-mall är inte annorlunda än vanligt. Du använder typsnittsfamilj egendom med värdet av ditt valda teckensnitt, t.ex.. font-family: "Libre Baskerville";
När du sparar och uppdaterar din webbplats borde du se att båda Google-teckensnittet nu applicerats på texten i omslagssektionen:
Därefter kommer vi lägga till en anpassad typsnitt som inte är tillgänglig från antingen Google Fonts eller Fonts.com, och det är Font Awesome. Ofta, om du använder Font Awesome kan du ladda upp det via MaxCDN, men AMP tillåter inte detta eftersom CDN inte är ett av de två godkända teckensnittet. Som sådan kommer vi att hantera att ladda oss via @ Font-face.
För att ladda in teckensnittet måste du först ladda ner fontfilerna, som du kan göra på https://fortawesome.github.io/Font-Awesome/. Observera att du bara behöver "Font Awesome", inte extra "Fort Fantastiska "verktyg som erbjuds under nedladdning.
När du har hämtat Font Awesome zip-filen hämtad, extrahera den och kopiera typsnitt mapp den innehåller i din projektmapp.
Till din CSS lägger du till följande kod:
/ * Font Awesome * / @ font-face font-family: 'FontAwesome'; src: url ("typsnitt / fontawesome-webfont.eot? v = 4.0.3 '); src: url ('fonter / fontawesome-webfont.eot? # iefix & v = 4.0.3') format ('inbäddad opentype'), url ('fonter / fontawesome-webfont.woff? v = 4.0.3') format "woff"), url ('teckensnitt / fontawesome-webfont.ttf? v = 4.0.3') format ('truetype'), url ('teckensnitt / fontawesome-webfont.svg? v = 4.0.3 # fontawesomeregular') format ( 'svg'); typsnitt: normal; typsnittstyp: normal; .fa display: inline-block; font-family: FontAwesome; typsnittstyp: normal; typsnitt: normal; linjehöjd: 1; -webkit-typsnitt-utjämning: antialiased; -moz-osx-font-utjämning: gråskala; .fa-facebook: före innehåll: "\ f09a"; .fa-twitter: före innehåll: "\ f099"; .fa-google-plus: före innehåll: "\ f0d5"; .fa-linkedin: före innehåll: "\ f0e1"; .fa-instagram: före innehåll: "\ f16d"; .fa-dribbble: före innehåll: "\ f17d"; .fa-skype: före innehåll: "\ f17e"; / * / Font Awesome * /Jag rekommenderar att du lägger in ovanstående kod längst upp i din anpassade CSS för att hålla orden på sakerna. Denna kod laddas i våra anpassade typfiler och skapar klasser som kan användas för att lägga till teckensnittsikoner till en design-det är standard CSS som används av Font Awesome.
Lägg sedan till den här CSS:
.doc_header_social margin: 1.5rem 0; vaddering: 0; fontstorlek: 1,875rem; textskugga: 0 0.0625rem 0.125rem rgba (0, 0, 0, .8); .doc_header_social li display: inline-block; marginal: 0 1rem; vaddering: 0; .doc_header_social li a color: #fff; .doc_header_social li a: hover color: # 11ABB0;
Denna extra CSS lägger till några stylingar som är specifika för vår mall som vi ska använda för att konfigurera en rad med länkade sociala ikoner.
Lägg till den här HTML-filen efter
Om du uppdaterar din webbplats nu borde du se en rad av @ Font-face drivna sociala ikoner längst ner i texten som vi lagt till tidigare:
amp-font ElementFör att säkerställa att besökare inte slutar se en trasig plats om anpassade teckensnitt inte laddas framgångsrikt, tillhandahåller AMP amp-font element så att du kan skapa nedgångar.
För att göra detta element fungerar är det första du behöver göra att ladda AMP-skriptet som gör det möjligt. Lägg till den här koden i huvudavsnittet:
Nu med amp-font element redo för användning, kan vi få det att lägga till en klass till html eller kropp tagg om vårt teckensnitt inte laddas. Lägg till den här koden i botten av din mall innan stängningen
Låt oss ta en snabb titt på attributen som anges i det här elementet. Vi ställde in första gången layout = "nodisplay" vilket säkerställer att elementet är osynligt.
Därefter attributet typsnittsfamilj är satt till FontAwesome, som berättar AMP vill vi spåra laddningen av typsnittet "FontAwesome". Se till att det här värdet exakt matchar typsnittsfamilj inställning i din @ Font-face CSS-kod.
Attributet Paus är satt till 3000, vilket innebär att vi tillåter upp till tre sekunder för teckensnittet att laddas innan vi flyttar till en backning. Du kan ändra detta till det värde du föredrar.
Slutligen ställer vi in on-error-add-klass till font-awesome-missing. Om teckensnittet inte laddas efter tre sekunder läggs den här klassen till html eller kropp element. Vi kan rikta oss mot den här klassen för att skapa vårt fallback beteende genom att lägga till den här koden i vår anpassade CSS:
.font-awesome-missing. doc_header_social display: none;
Om teckensnittet misslyckas laddas efter tre sekunder aktiveras ovanstående CSS och döljer hela sociala ikonfältet så att vi inte har någon trasig visning.
Försök nu att byta namn på ditt projekts typsnitt mapp så att teckensnittet inte laddas, uppdatera sedan din sida och du ska se området Sociala ikoner blir dolda. Du bör också se klassen font-awesome-missing läggas till html eller kropp märka. Återställ fontsmappen till rätt namn och du ska se dina teckensnittikoner igen på uppdatering.
Läs mer om amp-font element på:
Därefter kommer vi lära oss hur du lägger till en YouTube-video på AMP-sättet, men först måste vi lägga till en liten hushållskod för att skapa en sektion för att videon ska sitta i.
Efter "doc_header" div, ersätt den befintliga h1 taggar med denna HTML:
Bädda in en YouTube-video
Lägg sedan till detta i din anpassade CSS:
.standard_width bredd: 100%; maxbredd: 75rem; marginal-vänster: auto; marginal-höger: auto; .standard_padding box-size: border-box; padding: 6rem 3rem; .video_wrap bakgrundsfärg: # 2B2B2B;
Du kanske har märkt i ovanstående CSS vi ställer in box-dimensionering: gränsvärde; i standard_padding klass.
Anledningen till detta är i AMP kan du inte använda den vanliga tekniken att inkludera * box-size: border-box, eftersom det * väljare anses vara för resurs hungrig. Som sådan måste du ställa in box-dimensionering: gränsvärde; för de specifika elementen du behöver den på, eller bara hantera vaddering och gränsar det gammaldags sättet - med en miniräknare eller räknar med fingrarna.
amp-youtube ElementNu när avsnittet är upprättat och redo för innehåll, ska vi lägga till en YouTube-video med hjälp av AMPs anpassade amp-youtube element. Genom att använda det här elementet istället för standard YouTube-inbäddningskod kan vi utnyttja optimeringstekniker som liknar dem för amp-img.
Till att börja med måste du lägga till den AMP JavaScript som krävs för att aktivera det nya elementet. I huvuddelen klistra in i:
Lägg nu till följande HTML i de divs du just lagt till, under h2 tags:
För att ange den video du vill ladda, ställ in dess YouTube-ID på attributet data VideoId. Annat än detta attribut, amp-youtube elementet är mycket detsamma som amp-img element.
Vi har bredd och höjd satt till 600 och 270 respektive. Precis som med bilder måste videon ha en initial bredd och en höjdinställning.
Vi använder sedan layout = "mottaglig" så att videon kommer att passa storleken på dess behållare, samtidigt som bildförhållandet hämtas från dess inställningar för höjd och bredd.
Spara och uppdatera din webbplats och försök att ändra storlek på visningsporten. Du bör se att din YouTube-video expanderar eller krymper för att passa, och håller rätt bildformat i takt med det.
Läs mer om amp-youtube element på:
AMP har ytterligare anpassade element för att ladda innehåll från specifika webbplatser, som amp-twitter, amp-instagram och några fler. För innehåll från tredje parts webbplatser som inte har sitt eget dedikerade AMP-element finns det amp-iframe element istället. Vi ska nu använda det här elementet för att ladda en Google Map till vår sida.
Skapa en behållare för kartan genom att lägga till den här koden under dina "video_wrap" -avsnitt:
Använd iframe-inbäddning, t.ex. Kartor
Nu, som med amp-font och amp-youtube element måste vi ladda AMP-skriptet som driver amp-iframe element. Lägg till detta i ditt huvud avsnitt:
Därefter inuti din nya div och under h2 taggar, lägg till den här koden:
Ladda om din webbplats och du bör se en Google Map nu på plats.
Förutom att optimera laddning, använder du amp-iframe elementet bidrar till att se till att innehållet som ses via iframe inte beter sig på oönskade sätt, till exempel att utföra JavaScript som kan orsaka långsam laddning eller tvinga popup-annonser. De sandlåda attributet kan du bestämma vilken kontrollnivå du tillämpar om iframeinnehållet.
För fullständiga detaljer på amp-iframe och dess "sandbox" kontroller, besök:
En av de saker som kan känna sig begränsande när man arbetar med AMP är regeln att ingen anpassad JavaScript är tillåten. På flipsidan finns det dock anpassade element som ingår i AMP som syftar till att ge dig en del av den funktion som du vanligtvis kan implementera via anpassad JavaScript.
Till exempel, istället för att ladda upp ett anpassat lightbox-skript kan du använda amp-image-ljus element. Vi ska skapa ett bildgalleri som använder det här elementet nu.
Börja med att skapa en behållare till ditt galleri genom att lägga till den här koden precis ovanför din amp-font märka:
Skapa ett galleri med ljuslampor
Lägg även till detta i din anpassade CSS:
.portfolio_wrap bakgrundsfärg: #ebeeee; .portfolio_inner padding: 4rem 6rem; .portfolio_item box-size: border-box; flyta till vänster; bredd: 25%; text-align: center; vaddering: 0,8rem; .clearfix: före, .clearfix: efter innehåll: ""; display: bord; .clearfix: efter clear: both;
Liksom våra senaste anpassade element måste vi ladda ett AMP-skript för att aktivera amp-image-ljus element. Lägg till detta i ditt huvud avsnitt:
Nu är vi redo att börja installera vårt ljusbox galleri. Börja med att lägga till den här koden i dina nya div, under h2 tags:
Detta amp-image-ljus elementet kommer att skapa den faktiska ljusboxen med de förstorade bilderna inuti den. Vi vill gömma det tills en användare har klickat på en bild som de vill förstora, så vi ställer in den layout = "nodisplay".
Notera: Vi har satt ID för detta element till lightbox1.
För att lägga till ett objekt i galleriet, lägg till den här diven nedanför amp-image-ljus element:
Lägg sedan till det här inuti det amp-img koda:
För det mesta, detta amp-bild elementet är detsamma som det vi lagt till tidigare, men du märker tillägget av på = "tap: lightbox1". Detta berättar AMP att när bilden tappas / klickas, bör den större versionen öppnas i en ljuskälla med id lightbox1, d.v.s. amp-image-ljus element som vi just skapat.
Lägg till ytterligare sju bilder i galleriet med den här koden:
När du sparar och uppdaterar bör du se ett galleri på din sida som ser ut så här:
Och när du klickar på någon av bilderna borde du se den öppna i en lightbox så här:
Att läsa mer om amp-image-ljus besök:
Du har nu en grundläggande AMP-sida med några av de vanligaste typerna av innehåll på plats och några lilla tricks som hjälper dig att arbeta effektivt och i enlighet med AMP: s regler för validering.
Låt oss sammanfatta de viktigaste punkterna i vad vi täckte:
# Utveckling = 1 till förhandsgranskningsadressen och titta på konsolverktyget för Chrome Developer Tools@ Font-face, använda amp-font element för att skapa fallbacksamp-image-ljus istället för ett lightbox-skriptJag hoppas att allting bidrog till att klargöra processen med att skapa AMP-sidor så att du känner dig säker på att bygga upp livewebbplatser från början. Nu komma dit ute och ha kul att göra AMP-accelererade webbplatser!
Ta en titt på några av dessa målsidor för målsidor om du vill öva på något annat än det som finns i denna handledning:
