Share
AMP-prosjektet er et nylig distribuert open source-initiativ støttet av Google, med sikte på å bidra til å gjøre nettsteder raskere, spesielt de med stor bruk av media og / eller behov for inntektsgenerering. Det er egentlig en "ikke oppstyr" måte å rulle ut hva ellers kunne være noe komplekse optimaliseringsmetoder, med de fleste prosessene tatt vare på bak kulissene for deg.
I vår artikkel AMP Project: Vil det gjøre nettstedene dine raskere? Vi kommer inn i detaljer om hva AMP vil bety for deg fra et utviklerperspektiv, og gi deg noen rånumre på hva slags hastighetsgevinster AMP kan eller ikke kan gi du.
I denne opplæringen vil vi være mer praktiske, med en trinnvis veiledning for å faktisk lage en AMP-side fra grunnen, forklarer hvordan du gjør noen vanlige oppgaver på AMP-måten og deler noen tips når vi går.
La oss begynne!
Ved å legge til standard boilerplate-kode er hvor hver AMP-mal starter. Det er et sett med kode som må være tilstede i hver AMP-mal, eller det vil mislykkes validering.
Opprett en ny HTML-fil kalt index.html og legg til følgende kode for det:
Lag en AMP-side Lag en AMP-side
Du kan lese en oversikt over hvert element av den ovennevnte koden på:
Du kan (hvis du velger å) forhåndsvise din nyopprettede AMP-mal ved å åpne den opp direkte i en nettleser. Men det er alltid en god ide å forhåndsvise på et lokalhoste i stedet. Denne tilnærmingen simulerer en webverten, slik at miljøet du forhåndsviser malen din, er så nært som mulig for det levende miljøet det vil bli distribuert til.
Til dette formål anbefaler jeg at du bruker MAMP for Windows eller Mac. Hvis du ikke allerede har MAMP installert, gå til MAMP nettsiden og last ned en kopi.
Når du har installert MAMP, finn den htdocs mappe. På Mac finner du det vanligvis på / Programmer / MAMP / htdocs, og på Windows på C: \ MAMP \ htdocs \.
Inne i det, opprett en ny mappe for å huske prosjektet ditt, f.eks. mitt prosjekt. Flytt deretter index.html fil du opprettet i forrige trinn i mappen.
Kjør MAMP, og du bør nå kunne forhåndsvise din AMP-mal ved å gå til URL http: // localhost: 8888 / myproject / i Chrome. Selv om du foretrekker en annen nettleser, kan du bruke Chrome, da vi bruker Chrome Developer Tools i neste trinn.
AMP-siden din bør nå se slik ut:
Hvis du går til denne nettadressen og det ikke virker, er det mulig at MAMP kan kjøre på et annet portnummer til 8888 du ser i nettadressen som er angitt ovenfor. For å finne ut om dette er tilfelle, klikk på knappen som leser på MAMP-grensesnittet Åpne WebStart-siden. Dette tar deg til en side med informasjon om MAMP, og i URL-adressen ser du riktig portnummer som skal brukes i stedet:
Før vi går videre, vil vi slå på AMPs feilsøkingsmodus, så hvis vi ved et uhell gjør noe som ikke bestått validering, vet vi det med en gang.
For å gjøre dette, legg til # Utvikling = 1 til slutten av forhåndsvisningsadressen din, f.eks. http: // localhost: 8888 / mittprosjekt / # utvikling = 1.
Åpne deretter opp Utviklerverktøy for Chrome og gå til Console fanen, der du bør se følgende Drevet av AMP ⚡ HTML ... meldingen vises:
Når du utvikler siden din, hvis noe ikke overgår AMP-validering, ser du en feilmelding i konsollen. Akkurat nå har vi ingen feilmeldinger og i stedet ser "AMP validering vellykket", og lar oss få vite alt fungerer som det skal være.
Sammen med boilerplate-koden du allerede har lagt til, har du muligheten til å legge til noen JSON-metadata til hovedenheten i Schema.org-format slik:
Dette er ikke viktig for å passere AMP-validering, men det er viktig for å bli hentet av forskjellige steder, for eksempel Google Search News.
For å lese mer om dette metadata-besøket:
En av kravene til AMP er at alle tilpassede CSS skal plasseres inline i hode seksjon, mellom tags.
Til tross for dette kravet er det faktisk ikke en ideell arbeidsflyt å skrive CSS rett inn i hoveden. Det du virkelig trenger er å kunne skrive CSS i et eksternt stilark, som du vanligvis ville, da har det CSS flyttet til riktig sted i hode deler av alle nettstedets malfiler.
Vi vil ikke dekke trinnvis for hvordan du gjør dette her, men hvis du vil vite hvordan du bruker et eksternt stilark og fortsatt bestiller AMP-validering, må du følge trinnene i vår hurtige tipsveiledning. Lag AMPs Inline CSS-enklere via Jade eller PHP før du fortsetter.
Nå som du har den nødvendige koden på plass, utviklingsmodus aktivert og (valgfritt) ekstern stilarkbehandling klar til å gå, kan vi nå fortsette å legge til noen medier på siden din. Vi starter med den vanligste typen media: bilder.
I AMP bruker du ikke
Fra og med i opplæringen, skal vi jobbe med en eksisterende maldesign for å hjelpe fartene med seg. Fortsett nå og ta deg en kopi av den frie Ceevee-malen fra StyleShout. Denne malen inneholder noen bilder du kan bruke til å øve inn i ditt AMP-dokument.
I Ceevee-malene Bilder mappe du vil se et stort bilde av sanddyner om natten. Vi skal begynne med å plassere dette i malen. Kopier Bilder mappe og lim den inn i prosjektmappen din.
Deretter legger du til følgende kode for å legge inn bildet, over h1 koder som allerede finnes i HTML:
Enhver form for media som er plassert i en AMP-side, må ha en innledende bredde og høyde sett, så ulikt å bruke en img tag, i en amp-img tag du kan ikke la disse attributene ut.
Hvis du ikke er sikker på nøyaktig hvilken størrelse et bilde vil være, er det greit, så lenge verdiene du angir nøyaktig representerer aspektforholdet. De bredde og høyde verdier kan betraktes som plassholdere, da AMP kan sette opp siden med verdiene du gir, og deretter foreta justeringer etter at bildet er fullt lastet.
De oppsett Attributt er det som tillater AMP å justere bildens display etter at det er lastet. Vi har satt sin verdi til mottakelig, noe som betyr at bildet vil opprettholde aspektforholdet avledet fra bredde- og høydeverdiene, men krympe eller utvide for å fylle beholderen. Derfor, selv om du ikke kjenner et eksakt størrelse på bildet, så lenge du har aspektforholdet, er det godt å gå.
Lagre og oppdatere forhåndsvisningen din, og du bør se bildet fylle opp visningsporten din:
Les mer om amp-img og oppsett attributt på:
Et vanlig element i webdesign i dag er bruken av et bakgrunnsbilde som fyller høyden og bredden på visningsporten, og skaper noe av en oppføringspresentasjon for en side. Vanligvis gjøres dette ved hjelp av et bakgrunnsbilde med CSS bakgrunnsstørrelse: deksel; anvendt på den. Men i AMP-områder ønsker vi egentlig ikke å ta med store bakgrunnsbilder via CSS, da dette ville omgå systemets lasteoptimalisering.
Nå kan du sikkert gjøre argumentet om at lasting av store bakgrunnsbilder ikke er ideelt for å øke lasthastigheten, og derfor kan du være bedre å legge store bilder ut alle sammen.
Men hvis du uunngåelig trenger å lage et design med et stort, fullvisningsbilde, kan du likevel i det minste trykke på AMPs lasteprioritet ved å legge det inn via amp-img tag i stedet for som bakgrunn. Slik kan du gjøre det, tilnærming til bakgrunnsdekningsteknikken i prosessen.
Vi skal ta bildet som du bare har innebygd og gjør det til et omslagsbilde. Først pakker du bildet med en div tag bruke klassen doc_header så du har:
Så, hvis du ikke allerede har, legg til noen koder til hodeseksjonen, slik at vi kan inkludere noen tilpassede CSS. I mellom disse merkene legger du til:
.doc_header høyde: 100vh; bakgrunnsfarge: # 000; overløp: skjult; stilling: relativ;
Vanligvis, i stedet for hva du ser over, når du lager et omslagsbilde, vil en designer sette inn høyde av html og kropp elementer til 100% og sett deretter dekselet til en høyde av 100%, gjør det fylle visningsporten.
Men denne tilnærmingen vil ikke fungere med AMP da CSS den laster styrker stilen høyde: auto! viktig; på kropp element, forhindrer en innstilling av høyde: 100%; fra å jobbe.
Så i stedet, hvis du virkelig trenger noe for å være høyden på visningsporten du kan bruke høyde: 100vh;, som vi har gjort med vår doc_header klasse. De vh enheten representerer "visningshøyde", og en verdi på 100vh tilsvarer 100% av visningshøyden.
Hvis du lagrer og oppdaterer nettstedet ditt nå, bør du se at "doc_header" div fyller visningsporten nøyaktig.
For øyeblikket skjønner bildet ikke nødvendigvis "doc_header" div. Hvis visningsporten er høyere enn den er bred, vil det være et tomt svart område under det.
For å fikse dette legger du til klassen doc_header_bg til din amp-img merk som dette:
Legg deretter til i CSS:
.doc_header_bg min-høyde: 100vh;
Denne koden vil sikre at bildehøyden aldri er noe mindre enn visningsporten.
Dessverre blir det fortsatt squashed på smalere bredder, så det er ikke så elegant i utseende som å bruke et bakgrunnsbilde. Det er imidlertid like nær en tilnærming som vi kan få mens du fortsatt bruker amp-img element.
Nå skal vi legge til noen egendefinerte webfonter i vår mal. Når du gjør dette med AMP, har du tre innlastingsmetoder som vil bestå validering:
Accentsconagua
@ Font-face Lasting av en Google-skrifttype skal gjøres via et koblingselement i hodet, ved hjelp av nettadressen som er oppgitt til deg for skrifttypene du vil ha på https://www.google.com/fonts.
For vår mal bruker vi Open Sans og Libre Baskerville.
For å laste disse to skriftene, legg til denne koden i hodet delen din:
Vi skal nå legge til litt tekst på vårt dekningsområde, som vi skal bruke våre nye webfonter på. I den eksisterende "doc_header" div, under bildet, legger du til en ny div med klassen doc_header_inner:
Inside den div legger til følgende kode:
Simuler bakgrunnsbildedekselet
Dette er en grunnleggende side som er laget for å vise deg hvordan du arbeider med AMP-prosjektet. I dette dekselet bruker bakgrunnsbildet AMP last optimalisering. De sosiale ikonene nedenfor bruker AMP-kompatibel tilpasset skriftlasting. Les videre for å se flere måter å bruke AMP på.
Legg nå følgende til din egendefinerte CSS:
kropp font-family: 'Open Sans', sans-serif; skriftstørrelse: 1rem; linjehøyde: 2; farge: # 838C95; .doc_header_inner posisjon: absolutt; bredde: 85vw; maksimal bredde: 64rem; topp: 50%; venstre: 50%; transformere: translate (-50%, -50%); polstring-bunn: 2rem; tekst-align: center; h1.doc_header_title font: bold 5.625rem / 1.1em 'Open Sans', sans-serif; farge: #fff; brevavstand: -0.125rem; margin: 0 auto 1rem auto; tekstskygge: 0 0.0625rem 0.1875rem rgba (0, 0, 0, .8); @media (maksimal bredde: 35rem) h1.doc_header_title font-size: 12vw; p.doc_header_text font-family: 'Libre Baskerville'; linjehøyde: 1,9; farge: # A8A8A8; margin: 0 auto; bredde: 70%; tekstskygge: 0 0.0625rem 0.125rem rgba (0, 0, 0, .5); .doc_header_text span, .doc_header_text a color: #fff; .doc_header_inner hr bredde: 60%; margin: 1.125rem auto 1.5rem auto; border-farge: # 2F2D2E; border-farge: rgba (150, 150, 150, .1);
Koden ovenfor er bare vanlig CSS for å legge ut vår nylig lagt til tekst, men du vil legge merke til at prosessen med å bruke vår Google Fonts i en AMP-mal, er ikke annerledes enn vanlig. Du bruker font-family eiendom med verdien av den valgte fonten, f.eks. font-familie: 'Libre Baskerville';
Når du lagrer og oppdaterer nettstedet ditt, bør du se at begge Google Fonts nå er brukt på teksten i dekselet:
Deretter skal vi legge til en egendefinert skrift som ikke er tilgjengelig fra enten Google Fonts eller Fonts.com, og det er Font Awesome. Ofte, hvis du bruker Font Awesome, kan du laste den opp via MaxCDN, men AMP vil ikke tillate dette fordi CDN ikke er en av de to godkjente skriftstørrelsene. Som sådan skal vi håndtere laste oss selv via @ Font-face.
For å laste inn skriften selv må du først laste ned fontfiler, som du kan gjøre på https://fortawesome.github.io/Font-Awesome/. Merk at du bare trenger "Font Awesome", ikke den ekstra "Fort Awesome "verktøy som tilbys under nedlasting.
Når du har lastet ned Font Awesome zip-filen, kan du trekke den ut og kopiere fonter mappen den inneholder i prosjektmappen din.
Til din CSS, legg til følgende kode:
/ * Font Awesome * / @ font-face font-family: 'FontAwesome'; src: url ('fonter / fontawesome-webfont.eot? v = 4.0.3'); src: url ('fonter / fontawesome-webfont.eot? # iefix & v = 4.0.3') format ('embedded-opentype'), url ('fonter / fontawesome-webfont.woff? v = 4.0.3') format 'woff'), url ('fonter / fontawesome-webfont.ttf? v = 4.0.3') format ('truetype'), url ('skrifter / fontawesome-webfont.svg? v = 4.0.3 # fontawesomeregular') formatet (svg '); font-weight: normal; font-style: normal; .fa display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; linjehøyde: 1; -webkit-font-utjevning: antialiased; -moz-osx-font-utjevning: gråtoner; .fa-facebook: før innhold: "\ f09a"; .fa-twitter: før innhold: "\ f099"; .fa-google-plus: før innhold: "\ f0d5"; .fa-linkedin: før innhold: "\ f0e1"; .fa-instagram: før innhold: "\ f16d"; .fa-dribble: før innhold: "\ f17d"; .fa-skype: før innhold: "\ f17e"; / * / Font Awesome * /Jeg anbefaler at du legger inn koden ovenfor øverst i din egendefinerte CSS for å holde orden på organisasjonen. Denne koden laster i våre egendefinerte skrifttypefiler og lager klasser som kan brukes til å legge til skrifttyper i et design-det er standard CSS som er gitt for bruk av Font Awesome.
Legg deretter også til dette CSS:
.doc_header_social margin: 1.5rem 0; polstring: 0; fontstørrelse: 1,875rem; tekstskygge: 0 0.0625rem 0.125rem rgba (0, 0, 0, .8); .doc_header_social li display: inline-block; margin: 0 1rem; polstring: 0; .doc_header_social li a color: #fff; .doc_header_social li a: hover color: # 11ABB0;
Denne ekstra CSS legger til noen stiler som er spesifikke for vår mal som vi skal bruke til å sette opp en rad med tilknyttede sosiale ikoner.
Legg til denne html etter
Hvis du oppdaterer nettstedet ditt nå, bør du se en rad av @ Font-face drevne sosiale ikoner langs bunnen av teksten vi la til tidligere:
amp-skrift ElementFor å sikre at besøkende ikke ender med å se et ødelagt nettsted hvis tilpassede skrifttyper ikke lastes inn, gir AMP amp-skrift element som lar deg lage fallbacks.
For å gjøre dette elementet det første du må gjøre er å laste AMP-skriptet som gjør det mulig. I hoveddelen din legger du til denne koden:
Nå med amp-skrift element klar til bruk, kan vi få det til å legge til en klasse til html eller kropp merk hvis fonten ikke laster inn. Legg denne koden til bunnen av malen din, før avslutningen
La oss ta en rask titt på attributter angitt i dette elementet. Vi satte oss først layout = "nodisplay" som sikrer at elementet er usynlig.
Neste, attributtet font-family er satt til FontAwesome, som forteller AMP vi vil spore lastingen av fonten heter "FontAwesome". Pass på at denne verdien akkurat samsvarer med font-family innstilling i din @ Font-face CSS-kode.
Attributtet pause er satt til 3000, som betyr at vi tillater opptil tre sekunder for skrifttypen skal lastes før du går til en tilbakebetaling. Du kan endre dette til hvilken verdi du helst foretrekker.
Til slutt setter vi på-feil-add-klasse til font-awesome-mangler. Hvis skrifttypen ikke lastes inn etter tre sekunder, blir denne klassen lagt til i html eller kropp element. Vi kan målrette mot denne klassen for å opprette vår tilbakevendende oppførsel ved å legge til denne koden i vår egendefinerte CSS:
.font-awesome-missing .doc_header_social display: none;
Hvis skrifttypen mislykkes i belastning etter tre sekunder, vil CSS'en ovenfor aktivere og gjemme hele sosial ikonlinjen, slik at vi ikke har noen ødelagte ser display.
Prøv nå å omdøpe prosjektets fonter-mappe midlertidig, slik at fonter ikke laster inn, oppdater deretter siden, og du bør se at området for sosiale ikoner blir skjult. Du bør også se klassen font-awesome-mangler lagt til html eller kropp stikkord. Gjenopprett fontsmappen til riktig navn, og du bør se skrifttypikonene dine igjen på oppdatering.
Les mer om amp-skrift element på:
Deretter skal vi lære å legge til en YouTube-video på AMP-måten, men først må vi legge til en liten housekeeping-kode for å lage en seksjon for videoen å sitte i.
Etter at "doc_header" div, erstatt eksisterende h1 koder med denne HTML:
Legge til en YouTube-video
Legg deretter til dette i ditt egendefinerte CSS:
.standard_width bredde: 100%; maksimal bredde: 75rem; margin-left: auto; margin-høyre: auto; .standard_padding box-size: border-box; polstring: 6rem 3rem; .video_wrap bakgrunnsfarge: # 2B2B2B;
Du har kanskje lagt merke til i det ovennevnte CSS vi satte boks-størrelse: border-box; i standard_padding klasse.
Årsaken til dette er i AMP, du kan ikke bruke den vanlige teknikken til å inkludere * box-size: border-box, fordi det * selector er ansett for ressurs sulten. Som sådan må du sette boks-størrelse: border-box; for de spesifikke elementene du trenger den på, eller bare håndtere polstring og grenser den gammeldags måten - med en kalkulator eller teller på fingrene.
amp-youtube ElementNå som seksjonen er satt opp og klar for innhold, skal vi legge til en YouTube-video ved hjelp av AMPs tilpassede amp-youtube element. Ved å bruke dette elementet i stedet for standard YouTube-integreringskode, kan vi hente inn optimaliseringsteknikker som ligner på amp-img.
Til å begynne med må du legge til AMP JavaScript som kreves for å aktivere det nye elementet. I hovedenheten limer du inn:
Legg nå følgende HTML i divene du nettopp har lagt til, under h2 tags:
For å angi videoen du vil laste inn, sett inn YouTube-ID-en på attributten data-videoid. Annet enn dette attributtet, amp-youtube elementet er mye det samme som amp-img element.
Vi har bredde og høyde satt til 600 og 270 henholdsvis. På samme måte som med bilder, må videoene ha en innledende bredde og høyde.
Vi bruker da Oppsettet = "mottakelig" slik at videoen passer til størrelsen på beholderen, samtidig som aspektforholdet trekkes ut fra innstillingene for høyde og bredde.
Lagre og oppdatere nettstedet ditt, og prøv å endre størrelsen på visningsporten. Du bør se at YouTube-videoen din utvides eller krymper for å passe, og holder det riktige aspektforholdet slik det går.
Les mer om amp-youtube element på:
AMP har tilleggsdefinerte elementer for å laste inn innhold fra bestemte nettsteder, som amp-twitter, amp-instagram og noen flere. For innhold fra tredjeparts nettsteder som ikke har eget dedikert AMP element, er det amp-iframe element i stedet. Vi skal nå bruke dette elementet for å laste inn et Google Map til vår side.
Opprett en beholder for kartet ved å legge til denne koden under dine "video_wrap" divs:
Bruk iframe Embedding, f.eks. Maps
Nå, som med amp-skrift og amp-youtube elementer, må vi laste AMP-skriptet som kjører amp-iframe element. Legg dette til hodet delen din:
Deretter inne i din nye div og under h2 koder, legg til denne koden:
Oppdater siden din, og du bør se et Google Map nå på plass.
I tillegg til å optimalisere lasting, bruker du amp-iframe elementet bidrar til å sikre at innholdet som vises gjennom iframe, ikke oppfører seg på uønskede måter, for eksempel å utføre JavaScript som kan føre til langsom lasting eller tvinging av popup-annonser. De sandkasse Attributt lar deg bestemme hvilket nivå av kontroll du bruker over iframe-innhold.
For full detaljer på amp-iframe og dens "sandbox" kontroller, besøk:
En av de tingene som kan føle seg begrensende når du arbeider med AMP, er regelen om at ingen tilpasset JavaScript er tillatt. På baksiden er det imidlertid egendefinerte elementer inkludert i AMP som tar sikte på å gi deg noen av funksjonaliteten du vanligvis kan implementere via tilpasset JavaScript.
For eksempel, i stedet for å laste inn et tilpasset lightbox-skript, kan du bruke amp-image-lysbord element. Vi skal lage et bildegalleri som bruker dette elementet nå.
Start med å lage en container for galleriet ditt ved å legge til denne koden rett over din amp-skrift stikkord:
Lag et galleri med lysbokser
Legg også til dette på egendefinert CSS:
.portfolio_wrap bakgrunnsfarge: #ebeeee; .portfolio_inner padding: 4rem 6rem; .portfolio_item box-size: border-box; flyte: venstre; bredde: 25%; tekst-align: center; polstring: 0.8rem; .clearfix: før, .clearfix: etter innhold: ""; skjerm: bord; .clearfix: etter clear: both;
Som våre siste få egendefinerte elementer må vi laste inn et AMP-skript for å aktivere amp-image-lysbord element. Legg dette til hodet delen din:
Nå er vi klare til å begynne å sette opp vår lightbox galleri. Begynn med å legge til denne koden i de nye divene, under h2 tags:
Dette amp-image-lysbord elementet vil skape den faktiske lightbox-skjermen med de forstørrede bildene i den. Vi ønsker å gjemme det til en bruker har klikket et bilde de vil forstørre, så vi legger det til layout = "nodisplay".
Merk: Vi har satt IDen til dette elementet til lightbox1.
For å legge til et element i galleriet, legg til denne diven under amp-image-lysbord element:
Deretter legger du til dette amp-img kode:
For det meste, dette amp-bilde elementet er det samme som det vi la til tidligere, men du vil legge merke til tillegg av på = "trykk: lightbox1". Dette forteller AMP at når bildet er tappet / klikket, skal den større versjonen åpnes i en lightbox med id lightbox1, dvs. amp-image-lysbord elementet vi nettopp opprettet.
Legg til ytterligere syv bilder til galleriet med denne koden:
Når du lagrer og oppdaterer, bør du se et galleri på siden din som ser slik ut:
Og når du klikker på et av bildene, bør du se det åpne i en lightbox som dette:
For å lese mer om amp-image-lysbord besøk:
Du har nå en grunnleggende AMP-side med noen av de vanligste innholdstyper på plass, og noen få triks som hjelper deg med å jobbe effektivt og i tråd med AMPs regler for validering.
La oss trekke opp hovedpunktene til hva vi dekket:
# Utvikling = 1 til forhåndsvisningsadressen din og se konsolverktøyet for utviklere i Chrome@ Font-face, bruker amp-skrift element for å skape fallbacksamp-image-lysbord i stedet for et lightbox-skriptJeg håper alt dette bidro til å avklare prosessen med å lage AMP-sider, slik at du føler deg trygg på å bygge live-sider fra bunnen av. Nå kom deg ut og ha det gøy å lage AMP-akselererte nettsteder!
Ta en titt på noen av disse målsidene for destinasjonssider hvis du vil øve på noe annet enn det i denne opplæringen:
