Share
Het AMP-project is een nieuw ingezet open source-initiatief dat wordt ondersteund door Google, met als doel websites sneller te maken, met name die met veel mediagebruik en / of met het genereren van inkomsten. Het is in wezen een "geen gedoe" manier om uit te rollen wat anders enigszins gecompliceerde optimalisatiemethoden zou kunnen zijn, waarbij de meeste processen voor de hele wereld achter de schermen worden uitgevoerd.
In ons artikel AMP-project: zal het uw sites sneller maken ?, worden we gedetailleerd beschreven over wat AMP voor u betekent vanuit het oogpunt van ontwikkelaars en geven u enkele onbewerkte nummers op wat voor soort snelheidswinsten AMP al dan niet kan geven u.
In deze zelfstudie zullen we praktischer zijn, met een stapsgewijze handleiding voor het daadwerkelijk helemaal opnieuw maken van een AMP-pagina, uitleg over het uitvoeren van enkele algemene taken op de AMP-manier en het delen van enkele tips terwijl we gaan.
Laten we beginnen!
Het toevoegen van standaard boilerplate-code is waar elk AMP-sjabloon begint. Er is een code die dat is moet aanwezig zijn in elke AMP-sjabloon, anders mislukt de validatie.
Maak een nieuw HTML-bestand met de naam index.html en voeg de volgende code eraan toe:
Maak een AMP-pagina Maak een AMP-pagina
U kunt een overzicht van elk element van de bovenstaande code lezen op:
U kunt (als u ervoor kiest) een voorbeeld van uw nieuw gemaakte AMP-sjabloon bekijken door deze rechtstreeks in een browser te openen. Het is echter altijd een goed idee om in plaats daarvan een voorbeeld van een lokale host te bekijken. Deze aanpak simuleert een webhost, dus de omgeving waarin u een voorbeeld van uw sjabloon bekijkt, ligt zo dicht mogelijk bij de live-omgeving waarin deze wordt geïmplementeerd.
Voor dit doel raad ik aan MAMP voor Windows of Mac te gebruiken. Als u MAMP nog niet hebt geïnstalleerd, gaat u naar de MAMP-website en downloadt u een exemplaar.
Als je MAMP eenmaal hebt geïnstalleerd, vind je het htdocs map. Op Mac zul je dit meestal tegenkomen / Applications / MAMP / htdocs, en op Windows op C: \ MAMP \ htdocs \.
Maak daarbinnen een nieuwe map om uw project te huisvesten, bijvoorbeeld. mijn project. Verplaats vervolgens de index.html bestand dat u in de vorige stap in de map hebt gemaakt.
Voer MAMP uit en u kunt nu een voorbeeld van uw AMP-sjabloon bekijken door naar de URL http: // localhost: 8888 / myproject / in Chrome te gaan. Zelfs als u de voorkeur geeft aan een andere browser, gebruikt u Chrome, omdat we in de volgende stap Chrome-ontwikkelaarstools gebruiken.
Uw AMP-pagina ziet er momenteel als volgt uit:
Als u naar deze URL gaat en het werkt niet, is het mogelijk dat MAMP op een ander poortnummer werkt dan de 8888 die u in de bovenstaande URL ziet. Om erachter te komen of dit het geval is, klikt u in de MAMP-interface op de knop die luidt Open de WebStart-pagina. Hiermee gaat u naar een pagina met informatie over MAMP en in de URL ziet u het juiste poortnummer dat moet worden gebruikt:
Voordat we verder gaan, willen we de foutopsporingsmodus van AMP inschakelen, dus als we per ongeluk iets doen dat niet door de validatie gaat, weten we het meteen.
Om dit te doen, toevoegen # Ontwikkeling = 1 aan het einde van uw voorbeeld-URL, bijvoorbeeld http: // localhost: 8888 / myproject / # ontwikkeling = 1.
Open dan Chrome-ontwikkelaarstools en ga naar de Troosten tab, waar u het volgende zou moeten zien Mogelijk gemaakt door AMP ⚡ HTML ... bericht verschijnt:
Wanneer u uw pagina ontwikkelt en er iets niet door de AMP-validatie komt, ziet u een foutmelding in de console. Op dit moment hebben we geen foutmeldingen en zien we in plaats daarvan "AMP-validatie geslaagd", zodat we weten dat alles werkt zoals het zou moeten zijn.
Samen met de standaardcode die je al hebt toegevoegd, heb je de mogelijkheid om enkele JSON-metadata toe te voegen aan de head-sectie in Schema.org-indeling, zoals:
Dit is niet essentieel om AMP-validatie door te geven, maar het is van essentieel belang om te worden opgepikt door verschillende plaatsen, zoals Google Search News.
Ga voor meer informatie over dit bezoek aan metadata:
Een van de vereisten van AMP is dat alle aangepaste CSS inline moet worden geplaatst in de hoofd sectie, tussen labels.
Ondanks deze vereiste is het feit dat je CSS rechtstreeks in de kopsectie schrijft, geen ideale workflow. Wat je echt nodig hebt, is dat je je CSS in een externe stylesheet kunt schrijven, zoals je normaal zou doen, en vervolgens die CSS naar de juiste plaats in de hoofd secties van alle sjabloonbestanden van uw site.
We zullen hier niet stap voor stap bespreken hoe je dit hier kunt doen, maar als je wilt weten hoe je een externe stylesheet kunt gebruiken en toch AMP-validatie kunt doorstaan, volg dan de stappen in onze quick-tip-handleiding Maak AMP's Inline CSS gemakkelijker via Jade of PHP voordat je verder gaat.
Nu u uw essentiële code op zijn plaats hebt, de ontwikkelmodus geactiveerd en (optioneel) extern stylesheetbeheer klaar om te gaan, kunnen we nu doorgaan met het toevoegen van wat media aan uw pagina. We beginnen met het meest gebruikelijke type media: afbeeldingen.
In AMP gebruikt u de
Vanaf hier in de zelfstudie werken we met een bestaand sjabloonontwerp om dingen sneller te laten verlopen. Ga je gang en pak een kopie van de gratis Ceevee-sjabloon van StyleShout. Deze sjabloon bevat enkele afbeeldingen die u kunt gebruiken om inbedden in uw AMP-document te oefenen.
In de Ceevee-sjablonen afbeeldingen map zie je 's nachts een grote afbeelding van zandduinen. We gaan beginnen door dit in je sjabloon te plaatsen. afbeeldingen map en plak deze in uw projectmap.
Voeg vervolgens de volgende code toe om de afbeelding in te sluiten, boven de h1 tags die al in de HTML staan:
Elke vorm van media die op een AMP-pagina wordt geplaatst, moet een begin hebben breedte en hoogte ingesteld, dus in tegenstelling tot het gebruik van een img tag, in een amp-img tag kun je deze attributen niet weglaten.
Als je niet precies weet welke maat een afbeelding zal hebben, is het goed, zolang de waarden die je invoert nauwkeurig de beeldverhouding weergeven. De breedte en hoogte waarden kunnen worden beschouwd als tijdelijke aanduidingen, omdat AMP de pagina kan indelen met de waarden die u opgeeft en vervolgens aanpassingen kan aanbrengen nadat de afbeelding volledig is geladen.
De lay-out attribuut is wat het mogelijk maakt dat AMP de weergave van de afbeelding aanpast nadat deze is geladen. Daar hebben we zijn waarde aan gegeven sympathiek, wat betekent dat de afbeelding de beeldverhouding behoudt die is afgeleid van de waarden voor breedte en hoogte, maar krimpt of expandeert om de container te vullen. Dit is de reden waarom je, zelfs als je de exacte grootte van een afbeelding niet kent, zolang je de beeldverhouding hebt, goed bent.
Sla uw voorbeeld op en vernieuw deze en u zou de afbeelding moeten zien die uw viewport opvult:
Lees meer over amp-img en de lay-out attribuut bij:
Een veelvoorkomend element in webontwerp van vandaag is het gebruik van een achtergrondafbeelding die de hoogte en breedte van het kijkvenster vult, waardoor iets van een invoerpresentatie voor een pagina wordt gemaakt. Meestal gebeurt dit met behulp van een achtergrondafbeelding met de CSS achtergrondformaat: omslag; erop toegepast. Op AMP-sites willen we echter niet echt grote achtergrondafbeeldingen via CSS binnenhalen, omdat dit de laadoptimalisatie van het systeem zou omzeilen.
Nu zou je zeker het argument kunnen aanvoeren dat het laden van grote achtergrondafbeeldingen niet ideaal is om de laadsnelheid te verhogen, en om die reden kun je beter af zijn om grote afbeeldingen allemaal samen te laten.
Als u echter onvermijdelijk een ontwerp met een grote, volledige viewportafbeelding moet maken, kunt u toch op zijn minst gebruikmaken van de prioriteiten voor het laden van AMP door deze toe te voegen via de amp-img tag in plaats van als achtergrond. Hier leest u hoe u dit kunt doen door de achtergronddekkingstechniek in het proces te benaderen.
We gaan de afbeelding die u zojuist hebt ingesloten omzetten in een omslagafbeelding. Wikkel de afbeelding eerst met een div tag met behulp van de klasse doc_header dus jij hebt:
Voeg vervolgens wat toe als u dat nog niet hebt gedaan tags aan het hoofdgedeelte zodat we enkele aangepaste CSS kunnen opnemen. Voeg tussen deze tags toe:
.doc_header height: 100vh; achtergrondkleur: # 000; overloop verborgen; positie: relatief;
Meestal, in plaats van wat u hierboven ziet, zal een ontwerper bij het maken van een omslagafbeelding de hoogte van de html en lichaam elementen om 100% en zet dan ook hun dekseldeel op a hoogte van 100%, waardoor het de viewport vult.
Deze aanpak werkt echter niet met AMP omdat de CSS die wordt geladen de stijl afdwingt hoogte: auto! belangrijk; op de lichaam element, waardoor een instelling wordt voorkomen hoogte: 100%; van werken.
Dus in plaats daarvan, als je echt iets nodig hebt om de hoogte te zijn van de viewport die je kunt gebruiken hoogte: 100vh;, zoals we gedaan hebben met onze doc_header klasse. De vh eenheid staat voor "kijkvensterhoogte", en een waarde van 100vh komt overeen met 100% van de kijkvensterhoogte.
Als u nu uw site opslaat en vernieuwt, zou u moeten zien dat de "doc_header" div het kijkvenster precies vult.
Op dit moment vult de afbeelding echter niet noodzakelijk de div "doc_header". Als het kijkvenster groter is dan breed, staat er een leeg zwart gebied eronder.
Om dit op te lossen, voeg de klas toe doc_header_bg aan jouw amp-img label zoals dit:
Voeg vervolgens toe aan uw CSS:
.doc_header_bg min-height: 100vh;
Deze code zorgt ervoor dat de beeldhoogte nooit minder is dan die van de viewport.
Helaas wordt het nog steeds geplet op smallere breedtes, zodat het niet zo elegant lijkt als een achtergrondafbeelding. Het is echter een benadering die we zo dicht mogelijk benaderen terwijl we de amp-img element.
Nu gaan we enkele aangepaste weblettertypen aan onze sjabloon toevoegen. Wanneer u dit met AMP doet, heeft u drie laadmethoden die de validatie zullen passeren:
Accentsconagua
@ Font-face Het laden van een Google-lettertype moet gebeuren via een linkelement in het hoofd, met behulp van de URL die u krijgt voor het / de gewenste lettertype (ken) op https://www.google.com/fonts.
Voor onze sjabloon gebruiken we Open Sans en Libre Baskerville.
Om deze twee lettertypen te laden, voegt u deze code toe aan uw hoofdgedeelte:
We gaan nu wat tekst toevoegen aan het covergebied van onze site, waarop we onze nieuwe weblettertypen zullen toepassen. Voeg in de bestaande "doc_header" div onder de afbeelding een nieuwe div toe met de klas doc_header_inner:
Voeg binnen dat div de volgende code toe:
Simuleer achtergrondafbeelding omslag
Dit is een basispagina die is gemaakt om u te laten zien hoe u met het AMP-project kunt werken. In dit hoesgedeelte gebruikt de achtergrondafbeelding AMP-laadoptimalisatie. De onderstaande sociale pictogrammen gebruiken aangepaste AMP-invoer van lettertypen. Lees verder voor meer manieren om AMP te gebruiken.
Voeg nu het volgende toe aan uw aangepaste CSS:
body font-family: 'Open Sans', sans-serif; lettergrootte: 1rem; regelhoogte: 2; kleur: # 838C95; .doc_header_inner positie: absoluut; breedte: 85vw; maximale breedte: 64rem; top: 50%; links: 50%; transformeren: vertalen (-50%, -50%); padding-bottom: 2rem; text-align: center; h1.doc_header_title font: bold 5.625rem / 1.1em 'Open Sans', sans-serif; kleur: #fff; letter-spacing: -0.125rem; marge: 0 auto 1rem auto; text-shadow: 0 0.0625rem 0.1875rem rgba (0, 0, 0, .8); @media (max-width: 35rem) h1.doc_header_title font-size: 12vw; p.doc_header_text font-family: 'Libre Baskerville'; regelhoogte: 1,9; kleur: # A8A8A8; marge: 0 auto; breedte: 70%; text-shadow: 0 0.0625rem 0.125rem rgba (0, 0, 0, .5); .doc_header_text span, .doc_header_text a color: #fff; .doc_header_inner uur breedte: 60%; marge: 1.125rem auto 1.5rem auto; randkleur: # 2F2D2E; grenskleur: rgba (150, 150, 150, .1);
De bovenstaande code is slechts gewone CSS voor het ontwerpen van onze nieuw toegevoegde tekst, maar u zult merken dat het toepassen van onze Google-lettertypen in een AMP-sjabloon niet anders is dan gebruikelijk. U gebruikt de font-family eigenschap met de waarde van het door u gekozen lettertype, bijvoorbeeld. lettertype-familie: 'Libre Baskerville';
Bij het opslaan en vernieuwen van uw site moet u beide Google-lettertypen nu zien op de tekst in het hoesgedeelte:
Vervolgens gaan we een aangepast lettertype toevoegen dat niet beschikbaar is via Google Fonts of Fonts.com, en dat is Font Awesome. Als u Font Awesome gebruikt, kunt u het vaak laden via MaxCDN, maar AMP staat dit niet toe, omdat het CDN niet een van de twee goedgekeurde lettertypen is. Als zodanig gaan we zelf laden via @ Font-face.
Als u het lettertype zelf wilt laden, moet u eerst de lettertypebestanden downloaden. Dit kunt u doen op https://fortawesome.github.io/Font-Awesome/. Merk op dat je alleen "Font Awesome" nodig hebt, niet de extra "Fort Geweldige "hulpmiddelen die tijdens het downloaden worden aangeboden.
Zodra je het Zip-bestand Font Awesome hebt gedownload, pak je het uit en kopieer je het fonts map die het bevat in uw projectmap.
Voeg de volgende code toe aan uw CSS:
/ * Font Awesome * / @ font-face font-family: 'FontAwesome'; src: url ('fonts / fontawesome-webfont.eot? v = 4.0.3'); src: url ('fonts / fontawesome-webfont.eot? # iefix & v = 4.0.3') formaat ('embedded-opentype'), url ('fonts / fontawesome-webfont.woff? v = 4.0.3') formaat ( 'woff'), url ('fonts / fontawesome-webfont.ttf? v = 4.0.3') formaat ('truetype'), url ('fonts / fontawesome-webfont.svg? v = 4.0.3 # fontawesomeregular') format ( 'svg'); font-gewicht: normaal; lettertype: normaal; .fa display: inline-block; font-family: FontAwesome; lettertype: normaal; font-gewicht: normaal; regelhoogte: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grijswaarden; .fa-facebook: before content: "\ f09a"; .fa-twitter: before content: "\ f099"; .fa-google-plus: before content: "\ f0d5"; .fa-linkedin: vóór content: "\ f0e1"; .fa-instagram: before content: "\ f16d"; .fa-dribbble: before content: "\ f17d"; .fa-skype: before content: "\ f17e"; / * / Font Awesome * /Ik raad aan om de bovenstaande code boven aan uw aangepaste CSS in te voegen om dingen overzichtelijk te houden. Deze code wordt in onze aangepaste lettertypebestanden geladen en maakt klassen die kunnen worden gebruikt om lettertypepictogrammen aan een ontwerp toe te voegen - dit is de standaard-CSS die is bedoeld voor gebruik door Font Awesome.
Voeg vervolgens deze CSS toe:
.doc_header_social margin: 1.5rem 0; opvulling: 0; font-size: 1.875rem; text-shadow: 0 0.0625rem 0.125rem rgba (0, 0, 0, .8); .doc_header_social li display: inline-block; marge: 0 1rem; opvulling: 0; .doc_header_social li a color: #fff; .doc_header_social li a: hover color: # 11ABB0;
Deze extra CSS voegt een specifieke stijl toe aan onze sjabloon die we zullen gebruiken om een rij gekoppelde sociale pictogrammen in te stellen.
Voeg deze HTML toe na de
Als u uw site nu vernieuwt, ziet u een rij met @ Font-face actieve sociale pictogrammen langs de onderkant van de tekst die we eerder hebben toegevoegd:
amp-font ElementOm ervoor te zorgen dat bezoekers geen kapotte site zien als aangepaste lettertypen niet correct worden geladen, biedt AMP de amp-font element om fallbacks te maken.
Om dit element te laten werken, moet u eerst het AMP-script laden waarmee dit mogelijk is. Voeg in je hoofdgedeelte deze code toe:
Nu met de amp-font element klaar voor gebruik, we kunnen het een klasse laten toevoegen aan de html of lichaam label als ons lettertype niet kan worden geladen. Voeg deze code toe aan de onderkant van uw sjabloon, vóór het sluiten
Laten we even kijken naar de kenmerken die in dit element zijn ingesteld. We zijn eerst begonnen layout = "NODisplay" wat ervoor zorgt dat het element onzichtbaar is.
Vervolgens het attribuut font-family ingesteld op FontAwesome, waarmee AMP wordt verteld dat we het laden van het lettertype "FontAwesome" willen volgen. Zorg ervoor dat deze waarde exact overeenkomt met de font-family instellen in uw @ Font-face CSS-code.
Het kenmerk time-out ingesteld op 3000, wat betekent dat we maximaal drie seconden toestaan om het lettertype te laden voordat we naar een fallback gaan. U kunt dit wijzigen naar de waarde die u verkiest.
Eindelijk, we gaan zitten on-error-add-klasse naar font-awesome-missing. Als het lettertype na drie seconden niet wordt geladen, wordt deze klasse toegevoegd aan de html of lichaam element. We kunnen deze klasse targeten om ons fallback-gedrag te creëren door deze code toe te voegen aan onze aangepaste CSS:
.font-awesome-missing .doc_header_social display: none;
Als het lettertype na drie seconden niet wordt geladen, wordt de bovenstaande CSS geactiveerd en wordt de hele sociale pictogrambalk verborgen, zodat we geen weergave hebben die er niet goed uitziet.
Probeer nu tijdelijk de map met lettertypen van uw project te hernoemen zodat de lettertypen niet kunnen worden geladen, ververs uw pagina en u zou moeten zien dat het gedeelte met de sociale pictogrammen verborgen raakt. Je zou ook de klas moeten zien font-awesome-missing toegevoegd aan de html of lichaam label. Herstel de map met lettertypen naar de juiste naam en je lettertypepictogrammen moeten opnieuw worden weergegeven bij het vernieuwen.
Lees meer over de amp-font element bij:
Vervolgens gaan we leren hoe we een YouTube-video op de AMP-manier kunnen toevoegen, maar eerst moeten we een kleine huishoudcode toevoegen om een sectie te maken waarin de video kan worden geplaatst.
Na de div "doc_header" vervangt u de bestaande h1 tags met deze HTML:
Sluit een YouTube-video in
Voeg dit dan toe aan uw aangepaste CSS:
.standaard_breedte breedte: 100%; maximale breedte: 75rem; marge links: auto; marge-rechts: auto; .standard_padding box-sizing: border-box; opvulling: 6rem 3rem; .video_wrap background-colour: # 2B2B2B;
Je hebt misschien gemerkt in de bovenstaande CSS die we hebben ingesteld box-sizing: border-box; in de standard_padding klasse.
De reden hiervoor is dat je bij AMP de gebruikelijke techniek van opnemen niet kunt gebruiken * box-sizing: border-box, omdat de * selector wordt geacht te veel middelen te hebben. Als zodanig moet je instellen box-sizing: border-box; voor de specifieke elementen waar je het op nodig hebt, of pak gewoon padding en grenst aan de ouderwetse manier - met een rekenmachine of op je vingers tellen.
amp-youtube ElementNu de sectie is ingesteld en klaar is voor inhoud, gaan we een YouTube-video toevoegen met AMP's eigen gebruik amp-youtube element. Door dit element te gebruiken in plaats van de standaard YouTube-embedcode, kunnen we gebruikmaken van laadoptimalisatietechnieken die vergelijkbaar zijn met die van amp-img.
Om te beginnen moet u de vereiste AMP JavaScript toevoegen om het nieuwe element in te schakelen. Plak in het hoofdgedeelte:
Voeg nu de volgende HTML toe aan de divs die u zojuist hebt toegevoegd, onder de h2 tags:
Als je de video wilt opgeven die je wilt laden, stel je de YouTube-ID in op het kenmerk data-VideoId. Anders dan dit kenmerk, is de amp-youtube element is veel hetzelfde als de amp-img element.
We hebben de breedte en hoogte ingesteld op 600 en 270 respectievelijk. Net als bij afbeeldingen, moeten video's een aanvankelijke breedte en hoogte hebben.
We gebruiken dan layout = "reageert" zodat de video past op de grootte van de container, terwijl de hoogte-breedteverhouding wordt aangepast aan de hoogte- en breedte-instellingen.
Sla uw site op en vernieuw deze, en probeer het formaat van de viewport aan te passen. Je zou moeten zien dat je YouTube-video uitzet of krimpt om te passen, terwijl de juiste beeldverhouding behouden blijft.
Lees meer over de amp-youtube element bij:
AMP heeft aanvullende aangepaste elementen voor het laden van inhoud van specifieke sites, zoals amp-twitter, amp-instagram en nog een paar meer. Voor inhoud van sites van derden die geen eigen speciaal AMP-element hebben, is er de amp-iframe element in plaats daarvan. We gaan dit element nu gebruiken om een Google Map in onze pagina te laden.
Maak een container voor de kaart door deze code onder je "video_wrap" divs toe te voegen:
Gebruik iframe Inbedden, bijvoorbeeld Kaarten
Nu, zoals met de amp-font en amp-youtube elementen, moeten we het AMP-script laden dat de amp-iframe element. Voeg dit toe aan je hoofdgedeelte:
Vervolgens, binnen je nieuwe div en onder de h2 tags, voeg deze code toe:
Herlaad uw site en u zou nu een Google Map moeten zien te vinden.
Evenals het optimaliseren van het laden, met behulp van de amp-iframe element helpt ervoor te zorgen dat de inhoud die via het iframe wordt bekeken zich niet op ongewenste manieren gedraagt, zoals het uitvoeren van JavaScript dat langzaam laden of pop-upadvertenties kan veroorzaken. De zandbak kenmerk stelt u in staat te bepalen welk niveau van controle u toepast op iframe-inhoud.
Voor volledige informatie over amp-iframe en zijn "sandbox" -besturing, bezoek:
Een van de dingen die beperkend kunnen zijn bij het werken met AMP is de regel dat geen aangepast JavaScript is toegestaan. Aan de andere kant zijn er echter aangepaste elementen opgenomen in AMP die als doel hebben u een deel van de functionaliteit te bieden die u normaal gesproken via aangepaste JavaScripts zou implementeren..
In plaats van een aangepast lightbox-script te laden, kunt u bijvoorbeeld de amp-image-lichttafel element. We gaan een afbeeldingengalerij maken die dit element nu gebruikt.
Begin met het maken van een container voor je galerij door deze code direct boven je toe te voegen amp-font label:
Maak een galerij met lichtbakken
Voeg dit ook toe aan uw aangepaste CSS:
.portfolio_wrap background-color: #ebeeee; .portfolio_inner opvulling: 4rem 6rem; .portfolio_item box-sizing: border-box; zweven: links; breedte: 25%; text-align: center; opvulling: 0.8rem; .clearfix: before, .clearfix: after content: ""; weergave: tafel; .clearfix: na duidelijk: beide;
Net als onze laatste paar aangepaste elementen, moeten we een AMP-script laden om de amp-image-lichttafel element. Voeg dit toe aan je hoofdgedeelte:
Nu zijn we klaar om te beginnen met het opzetten van onze lightbox-galerij. Begin door deze code toe te voegen aan je nieuwe divs, onder de h2 tags:
Deze amp-image-lichttafel element maakt de daadwerkelijke lightbox-weergave met de vergrote afbeeldingen erin. We willen het verbergen totdat een gebruiker op een afbeelding heeft geklikt die hij wil vergroten, dus we hebben hem ingesteld layout = "NODisplay".
Notitie: we hebben de ID van dit element ingesteld op lightbox1.
Om een item toe te voegen aan de galerij, voeg deze div toe onder de amp-image-lichttafel element:
Voeg dan dit toe amp-img code:
Voor het grootste deel, dit amp-image element is hetzelfde als degene die we eerder hebben toegevoegd, maar je zult de toevoeging van zien op = "tap: lightbox1". Dit vertelt AMP dat wanneer de afbeelding wordt aangeraakt / geklikt, de grotere versie moet worden geopend in een lightbox met de id lightbox1, dat wil zeggen de amp-image-lichttafel element dat we zojuist hebben gemaakt.
Voeg nog zeven foto's toe aan de galerij met deze code:
Wanneer u opslaat en vernieuwt, ziet u een galerij op uw pagina die er als volgt uitziet:
En wanneer u op een van de afbeeldingen klikt, zou u deze in een lightbox zoals deze moeten openen:
Om meer te lezen over amp-image-lichttafel bezoek:
U beschikt nu over een standaard AMP-pagina met enkele van de meest voorkomende soorten inhoud en een paar kleine trucs om u te helpen efficiënt te werken en i
