Share
AMP-prosjektet gir en relativt håndfri måte å implementere flere forskjellige typer nettsideoptimalisering på. Du kan lese vår fullstendige gjennomgang av nøyaktig hva prosjektet er og hva det gjør i AMP Project: Vil det gjøre webområdene raskere?.
For å oppsummere hvordan AMP er implementert, vil du:
Når du har gjort de ovennevnte tre tingene, håndteres resten av optimaliseringsprosessen for deg bak kulissene. I tillegg må AMP-sider bestå en valideringstest, og for å bestå denne testen må alle sine beste praksisregler overholdes.
En av AMPs regler kan imidlertid være litt uhåndterlig under utviklingen, og det er kravet om at alle tilpassede CSS lastes inn i linjen hode seksjon mellom et sett av tags.
Hvis du manuelt skriver CSS direkte inn i sidene dine ' hode Deler du møter problemer og begrensninger. Skulle du trenge å endre CSS på flere nettsider, vil det være arbeidskrevende, og du vil ikke ha muligheten til å bruke CSS-forbedringsverktøy som forprosessorer eller minifiers.
Av denne grunn, hvis du ser deg selv som gjør mer enn én AMP-mal, vil du finne en måte å skrive CSS på i et eksternt stilark slik at den vanlige arbeidsflyten din opprettholdes, men likevel passerer AMP-validering ved å flytte alt ditt CSS i hodet seksjon etter faktum.
I dette raske tipset lærer du to måter du kan gjøre nettopp det.
Jade er et språk du kan tenke på like mye som en preprosessor for HTML. Den gir deg mulighet til å skrive HTML i en terskel, shorthandform som kompilerer til vanlig HTML, men viktigst for emnet ved hånden, kan du også importere CSS-filer og få fullstendig innholdsutgang hvor som helst du liker.
I denne metoden skriver du AMP-maler ved hjelp av Jade-syntaks, og importerer en ekstern CSS-fil til hovedenheten i hver av maler. Dette er en av de beste metodene du kan bruke til å lage AMP-sider hvis du trenger å sende ut statisk HTML. Slik går du til det.
Det første du må gjøre er å sette opp det eksterne stilarket du vil importere til AMP-maler. Opprett en mappe for å huse prosjektet ditt, og inn i det lage et nytt stilark og navnet det "style.css".
Legg til noen grunnleggende CSS i stilarket ditt, alt du har å velge så lenge filen fortsatt ikke er større enn 50kb, i samsvar med AMPs valideringsregler.
Hvis du bare vil ha noen test CSS for å komme i gang, legg til følgende:
kropp bakgrunn: # 3498db; farge: #fff
Det neste trinnet er å legge til i AMPs boilerplate-kode, men med to signifikante forskjeller. En, vi bruker Jade syntaks istedenfor rett HTML, og to, vi importerer vår eksterne "style.css" -fil.
Opprett en ny fil i prosjektmappen din med navnet "index.jade" og legg til følgende kode for det:
doktype html (amp, lang = "en") hodet meta (charset = "utf-8") tittel AMP via Jade-kobling (rel = "canonical", href = "/ index.html") meta , content = "width = device-width, minimumskala = 1, initialskala = 1") skript (type = "application / ld + json"). "@context": "http://schema.org", "@type": "NewsArticle", "overskrift": "Open-source rammeverk for publisering av innhold", "datePublished": "2015-10-07T12: 02: 41Z "," bilde ": [" logo.jpg "] | | skript (async, src = "https://cdn.ampproject.org/v0.js") stil (amp-custom) inkluderer style.css body h1 Dette er en Jade-basert AMP-side.
Koden ovenfor er den samme som du finner i AMP-dokumentene, bare konvertert til Jade-syntaks.
Du vil legge merke til bunnen av denne koden vi har:
stil (amp-custom) inkluderer style.css
Linjelesningen style (amp-tilpasset) vil sende det nødvendige tags. Indrykket på den følgende linjen vil du se inkludere style.css. Denne leveransen Jade inneholder funksjonalitet, og vil importere alt innholdet i "style.css" -filen din og skrive den ut mellom stilarkene.
Du har nå satt opp all nødvendig kode for denne metoden, og du trenger bare å kompilere Jade-malen. Du kan gjøre dette enten gjennom en oppgaveløper som Gulp eller Grunt, eller gjennom en kompileringsapp.
For relativt raske prosjekter hvor du bare vil få filer samlet, anbefaler jeg at du bruker en app som heter Prepros. Du trenger bare gratis / prøveversjonen for denne metoden.
Når du har installert og kjører Prepros, er alt du trenger å gjøre, dra din prosjektmappe til grensesnittet, og den vil finne din Jade-fil. Det vil automatisk begynne å se prosjektet ditt for endringer, så bare lagre enten Jade eller CSS-filen, og det vil utløse Prepros for å kompilere mal.
Du bør nå se en ny fil vises i prosjektet ditt med navnet "index.html", og inne i det bør du se din kompilerte HTML boilerplate kode komplett med inline tilpasset CSS:
AMP via Jade Dette er en Jade-basert AMP-side.
Det neste du vil ønske å gjøre er å sjekke ut en forhåndsvisning av nettstedet ditt. Mens det er mulig å bare se din AMP-fil i en nettleser lastet rett fra harddisken, er det god praksis å forhåndsvise nettstedene dine med en lokalhost, dvs. å simulere en webverten på datamaskinen din.
Prepros kommer med en inkludert lokalhost forhåndsvisning som automatisk oppdateres når endringer gjøres i prosjektet. Du vil imidlertid ikke kunne bruke den med AMP (dessverre). Årsaken til Prepros laster litt JavaScript inn i forhåndsvisningen for å aktivere live reload, men på grunn av det er ingen tilpasset JavaScript tillatt i AMP-sider, vil validatoren oppdage dette skriptet og deretter kaste en feil.
Av denne grunn er tilnærmingen jeg anbefaler å sette opp nettstedet ditt forhåndsvisning localhost ved hjelp av MAMP for Mac eller Windows. Du følger den samme prosessen vi gikk gjennom ovenfor. Den eneste forskjellen er at du skal lage prosjektmappen din i mappen "htdocs" -mappen før du drar den på Prepros-grensesnittet. Når MAMP kjører, kan dette forhåndsvise det på en URL som http: // localhost: 8888 / myproject.
Med denne tilnærmingen får du det beste fra begge verdener: en localhost forhåndsvisning uten valideringsfeil via MAMP, og automatisk Jade-kompilering via Prepros.
Hvis du ikke trenger å generere statiske HTML-maler, har du muligheten til å bruke PHP for å dynamisk utføre stilarket i hodet. Denne tilnærmingen krever sannsynligvis litt mindre oppstyr, men er bare hensiktsmessig dersom prosjektkravene dine (og verten din) tillater PHP.
For øvrig, selv om du aldri har brukt PHP før og bare vil skrive i rett HTML i stedet for å bruke Jade syntaks, kan du fortsatt bruke denne teknikken.
Start med å opprette en indeksfil med standard AMP boilerplate-kode som er lagt til den, men i stedet for å navngi filen "index.html" heter den "index.php":
Hei, AMPer Velkommen til mobilnett
Hvis du allerede har jobbet på en AMP-mal, kan du også bare omdøpe filen, endre utvidelsen til ".php", og konvertere den til en PHP-fil. For eksempel vil "about.htm" bli omdøpt til "about.php". (Bare vær sikker på at du endrer utvidelsen på noen interne linker også.)
Nå opprett et eksternt stilark som heter "style.css" i rotmappen din. Hvis du har en mal du allerede jobber med, kutte noen CSS du har mellom deg merker og lim det inn i ditt eksterne stilark.
For å trekke din eksterne CSS i AMP-filens hodeparti, lim inn denne ene linjens PHP-kode i mellom tags:
Hvis du ikke er spesielt interessert i PHP, kan du forlate det ved å vite at koden vil tillate PHP å hente stilarket fra serveren, lese innholdet og deretter skrive det inn i linjen. Men hvis du vil vite mer om utdraget, la oss slå det ned.
Først har vi åpne og lukke PHP-koder . Disse lar serveren vite at det som er mellom disse kodene er PHP og ikke vanlig HTML.
Så bruker vi funksjonen Readfile (). Denne funksjonen ser på filen som er angitt mellom parentesene, henter den fra serveren, leser innholdet og utgiver det innholdet inline.
I mellom parentesene har vi funksjonen getcwd (). Denne funksjonen får banen til den nåværende arbeidskatalogen, det vil si katalogen vår PHP-fil er i.
Deretter har vi strengen (vanlig tekst) "/style.css" som spesifiserer navnet på stilarket, i forhold til plasseringen av PHP-filen. Deretter mellom denne strengen og getcwd () funksjon vi plasserer en prikk . som sammenkobler de to sammen for å lage hele banen til stilarket. For eksempel, i en MAMP forhåndsvisning ville banen være noe som "/Applications/MAMP/htdocs/myproject/style.css".
Du kan bruke denne brikken i så mange av dine PHP-maler som du trenger, og eventuelle endringer i ditt eksterne stilark vil bli sendt ut på alle maler.
Som med Jade-metoden, bruker en god måte å forhåndsvise dine PHP-baserte AMP-sider, MAMP, som har full støtte for PHP. Installer MAMP og opprett prosjektmappen i mappen "htdocs", og du vil kunne forhåndsvise nettstedet ditt på en nettadresse som http: // localhost: 8888 / myproject uten tilleggsoppsett.
Vi har nå dekket to måter du kan beholde ditt eksterne stilark og normal CSS-utviklings arbeidsflyt, men passerer fortsatt AMP-validering ved å flytte CSS-inline. La oss raskt oppsummere hverandre.
Accentsconagua
hode seksjon. Kompilere med Prepros og forhåndsvise med MAMP.hode seksjon. Forhåndsvisning med MAMP.Når det gjelder hvilken metode du vil velge, vil det avhenge av detaljene i prosjektet, men generelt:
Med en av disse metodene kan du utvikle CSS på samme måte som du er vant til, med endringer som umiddelbart reflekteres over alle maler og tilgang til preprosessorer og optimaliseringsverktøy, samtidig som du legger inn CSS på en kompatibel måte.
Jeg håper det hjelper til med å gjøre AMP utviklingsprosessene litt jevnere!
