Share
Proiectul AMP este o nouă inițiativă open source, susținută de Google, cu scopul de a contribui la creșterea rapidă a site-urilor, în special a celor care folosesc în mare măsură mijloacele de informare și / sau nevoia de generare de bani. Este, în esență, o modalitate de a lansa ceea ce altfel ar putea fi metode oarecum complexe de optimizare, cu cele mai multe procese care au avut loc în spatele scenei pentru tine.
În articolul nostru AMP Project: Va face site-urile dvs. mai rapide ?, vom ajunge în detaliu cu privire la ceea ce AMP va însemna pentru tine din punct de vedere al dezvoltatorului și vă va da câteva cifre brute despre ce fel de câștiguri de viteză AMP poate sau nu să dea tu.
În acest tutorial vom fi mai practice, cu un ghid pas cu pas pentru a crea de fapt o pagină AMP de la zero, explicând cum să facem niște sarcini comune modul AMP și să împărtășim câteva sfaturi pe măsură ce mergem.
Sa incepem!
Adăugarea codului standard al plăcii de bord este locul în care începe fiecare șablon AMP. Există un set de cod care trebuie sa să fie prezent în toate șabloanele AMP sau să nu reușească validarea.
Creați un nou fișier HTML numit index.html și adăugați următorul cod:
Faceți o pagină AMP Faceți o pagină AMP
Puteți citi o defalcare a fiecărui element al codului de mai sus la:
Puteți să previzualizați noul șablon AMP creat deschizându-l direct într-un browser. Cu toate acestea, este întotdeauna o idee bună să previzualizați într-un loc local. Această abordare simulează o gazdă web, astfel încât mediul în care vă faceți previzualizarea șablonului dvs. este cât mai aproape posibil de mediul în care va fi distribuit.
În acest scop, vă recomandăm să utilizați MAMP pentru Windows sau Mac. Dacă nu aveți deja instalat MAMP, mergeți la site-ul MAMP și descărcați o copie.
Odată ce ați instalat MAMP, găsiți-o htdocs pliant. Pe Mac, veți găsi de obicei la / Aplicații / MAMP / htdocs, și pe Windows la C: \ MAMP \ htdocs \.
În interiorul acestuia, creați un nou dosar pentru a găzdui proiectul, de ex. proiectul meu. Apoi mutați index.html fișierul pe care l-ați creat în pasul anterior în folder.
Executați MAMP și acum ar trebui să vă puteți previzualiza șablonul AMP accesând http: // localhost: 8888 / myproject / în Chrome. Chiar dacă preferați un alt browser, vă rugăm să folosiți Chrome pe măsură ce vom folosi Instrumentele de dezvoltare Chrome în pasul următor.
Pagina dvs. AMP ar trebui să arate astfel:
Dacă accesați această adresă URL și nu funcționează, este posibil ca MAMP să fie difuzat pe un număr de port diferit de 8888 pe care îl vedeți în adresa URL furnizată mai sus. Pentru a afla dacă este cazul, pe interfața MAMP faceți clic pe butonul care citește Deschideți pagina WebStart. Aceasta vă va duce la o pagină cu informații despre MAMP, iar în URL veți vedea numărul corect de port pe care îl veți folosi în schimb:
Înainte de a merge mai departe, vrem să activați modul de depanare AMP, astfel încât dacă facem din greșeală ceva ce nu trece validarea, vom afla imediat despre aceasta.
Pentru a face acest lucru, adăugați # Dezvoltare = 1 la sfârșitul adresei URL de previzualizare, de ex. http: // localhost: 8888 / myproject / # dezvoltare = 1.
Apoi deschide-te Instrumente de dezvoltare Chrome și du-te la Consolă , unde ar trebui să vedeți următoarele Realizat de AMP ⚡ HTML ... apare mesajul:
Pe măsură ce vă dezvoltați pagina, dacă ceva nu trece validarea AMP, veți vedea un mesaj de eroare în consola. În momentul de față nu avem mesaje de eroare și, în schimb, vedem "validarea AMP a reușit", informându-ne că totul funcționează așa cum ar trebui să fie.
Împreună cu codul boilerplate pe care l-ați adăugat deja, aveți opțiunea de a adăuga câteva metadate JSON la secțiunea cap în format Schema.org, cum ar fi:
Acest lucru nu este esențial pentru a trece validarea AMP, dar este esențială pentru a fi preluată de diverse locuri cum ar fi Google Search News.
Pentru a afla mai multe despre această vizită de metadate:
Una dintre cerințele AMP este că toate CSS personalizate ar trebui plasate în linie în cap secțiune, între Etichete.
În ciuda acestei cerințe, scrisul dvs. CSS direct în secțiunea capului nu este un flux de lucru ideal. Ceea ce aveți cu adevărat nevoie este să vă puteți scrie CSS-ul într-o foaie de stil existentă, așa cum ați proceda în mod normal, atunci CSS va fi mutat în locul potrivit din cap secțiuni din toate fișierele șablon ale site-ului dvs..
Nu vom acoperi pas cu pas cum să facem acest lucru aici, dar dacă doriți să știți cum să utilizați o foaie de stil externă și să treci încă validarea AMP, vă rugăm să urmați pașii din tutorialul nostru rapid de vârf Asigurați-vă că CSS-ul Inline al AMP este mai ușor prin Jade sau PHP înainte de a continua.
Acum, când aveți codul dvs. esențial, modul de dezvoltare activat și (opțional) gestionarea foilor de stil externe sunt gata de plecare, acum putem trece la adăugarea unor materiale media pe pagina dvs. Vom începe cu cel mai comun tip de suport: imagini.
În AMP nu utilizați
De aici, în tutorial, vom lucra cu un design șablon existent pentru a ajuta la accelerarea lucrurilor. Mergeți acum și luați-vă o copie a șablonului gratuit Ceevee de către StyleShout. Acest șablon include câteva imagini pe care le puteți utiliza pentru a vă încorpora în documentul AMP.
În șabloanele Ceevee imagini veți vedea o imagine mare de dune de nisip pe timp de noapte. Vom începe prin a pune acest lucru în șablonul dvs. Copiați imagini și lipiți-o în folderul proiectului.
Apoi, adăugați următorul cod pentru a încorpora imaginea, deasupra h1 tag-uri care sunt deja în HTML:
Orice formă de suport plasată într-o pagină AMP trebuie să aibă o imagine inițială lăţime și înălţime set, astfel încât, spre deosebire de utilizarea unui img tag, într-un amp-img etichetă nu puteți lăsa aceste atribute afară.
Dacă nu sunteți sigur exact cu ce dimensiune o imagine va fi în regulă, atâta timp cât valorile pe care le introduceți reprezintă cu precizie raportul de aspect. lăţime și înălţime valorile pot fi considerate ca înlocuitori, deoarece AMP poate să structureze pagina cu valorile pe care le furnizează și apoi să facă ajustări după încărcarea completă a imaginii.
schemă atributul este ceea ce permite ca AMP să ajusteze afișarea imaginii după ce este încărcată. Am stabilit valoarea lui sensibil, ceea ce înseamnă că imaginea va menține raportul de aspect derivat din valorile lățimii și înălțimii, ci se va micșora sau se va extinde pentru a umple containerul. De aceea, chiar dacă nu cunoașteți dimensiunea exactă a imaginii, atâta timp cât aveți raportul de aspect, sunteți bine să mergeți.
Salvați și actualizați previzualizarea dvs. și ar trebui să vedeți imaginea care umple imaginea dvs. de vizualizare:
Citiți mai multe despre amp-img si schemă atribut la:
Un element comun în designul de astăzi este utilizarea unei imagini de fundal care umple înălțimea și lățimea ferestrei de vizualizare, creând ceva de prezentare de intrare pentru o pagină. De obicei, acest lucru se face folosind o imagine de fundal cu CSS dimensiunea fundalului: capac; aplicată la acesta. Cu toate acestea, în site-urile AMP nu dorim cu adevărat să aducem imagini de fundal mari prin CSS, deoarece acest lucru ar ocoli optimizarea de încărcare a sistemului.
Acum, puteți face cu siguranță argumentul că încărcarea unor imagini de fundal mari nu este ideală pentru creșterea vitezei de încărcare, și din acest motiv este posibil să fiți mai bine să lăsați toate imaginile mari.
Cu toate acestea, dacă aveți nevoie în mod inevitabil de a crea un design cu o imagine largă, în întregime, puteți totuși să atingeți cel puțin prioritatea de încărcare a AMP adăugând-o prin amp-img etichetă în loc de fundal. Iată cum puteți face acest lucru, apropiindu-se de tehnica de "acoperire" a fundalului în acest proces.
Vom lua imaginea pe care tocmai ați încorporat-o și o veți transforma într-o imagine de copertă. Mai întâi, înfășurați imaginea cu un div etichetă utilizând clasa doc_header deci tu ai:
Apoi, dacă nu ați făcut-o deja, adăugați câteva tag-uri la secțiunea cap, astfel încât să putem include unele CSS personalizate. Între aceste etichete se adaugă:
.doc_header înălțime: 100vh; fundal-culoare: # 000; overflow: ascuns; poziție: relativă;
De obicei, în loc de ceea ce vedeți mai sus, atunci când creați o imagine de acoperire, un designer va seta înălţime din html și corp elemente pentru a 100% și apoi, de asemenea, setați secțiunea lor de acoperire la a înălţime de 100%, făcându-l să umple portul de vizualizare.
Cu toate acestea, această abordare nu va funcționa cu AMP deoarece CSS-ul pe care îl încarcă impune stilul înălțime: auto! important; pe corp element, prevenind o setare de înălțime: 100%; de la lucru.
Deci, dacă aveți nevoie de ceva pentru a fi înălțimea ferestrei de vizualizare pe care o puteți utiliza înălțime: 100vh;, așa cum am făcut cu noi doc_header clasă. vh unitatea reprezintă "înălțimea ferestrei de vizualizare" și o valoare de 100vh echivalează cu 100% din înălțimea ferestrei de vizualizare.
Dacă salvați și actualizați acum site-ul dvs., ar trebui să vedeți că "doc_header" div completează vizualizarea precisă.
În momentul de față, imaginea nu completează neapărat "doc_header" div. Dacă portul de vizualizare este mai înalt decât este larg, va exista o arie neagră neagră sub ea.
Pentru a rezolva aceasta adăugați clasa doc_header_bg pentru dumneavoastră amp-img eticheta de genul:
Apoi, adăugați la CSS:
.doc_header_bg min-înălțime: 100vh;
Acest cod va asigura că înălțimea imaginii nu este niciodată mai mică decât cea a ferestrei de vizualizare.
Din păcate, aceasta va fi în continuare stinsă la lățimi mai restrânse, astfel încât nu este la fel de elegant în aparență ca folosind o imagine de fundal. Cu toate acestea, este la fel de aproape o aproximare pe care o putem obține în timp ce încă mai folosim amp-img element.
Acum vom adăuga câteva șabloane web personalizate în șablonul nostru. Când faceți acest lucru cu AMP, aveți trei metode de încărcare care vor trece validarea:
Accentsconagua
@ Font-face Încărcarea unui font Google trebuie făcută printr-un element de legătură din cap, utilizând adresa URL furnizată pentru fonturile pe care le doriți la https://www.google.com/fonts.
Pentru șablonul nostru vom folosi Open Sans și Libre Baskerville.
Pentru a încărca aceste două fonturi, adăugați acest cod în secțiunea de cap:
Acum vom adăuga un text în zona de acoperire a site-ului nostru, la care vom aplica noile noastre fonturi web. În cadrul diviziei existente "doc_header" div, sub imagine, adăugați un nou div cu clasa doc_header_inner:
În interiorul acelui div adăugați următorul cod:
Simulați capacul imaginii de fundal
Aceasta este o pagină de bază creată pentru a vă arăta cum să lucrați cu Proiectul AMP. În această secțiune de acoperire, imaginea de fundal utilizează optimizarea încărcării AMP. Pictogramele sociale de mai jos utilizează încărcarea fonturilor personalizate compatibile AMP. Citiți mai departe pentru a vedea mai multe modalități de utilizare a AMP.
Acum adăugați următoarele la CSS personalizat:
corpul font-family: 'Open Sans', sans-serif; font-size: 1rem; linia-înălțime: 2; culoare: # 838C95; .doc_header_inner poziție: absolută; lățime: 85vw; max-lățime: 64rem; top: 50%; stânga: 50%; transformare: traduce (-50%, -50%); pad-bottom: 2rem; text-align: centru; h1.doc_header_title font: bold 5.625rem / 1.1em 'Open Sans', sans-serif; culoare: #fff; punct-spațiere: -0.125rem; marja: 0 auto 1rem auto; text-umbra: 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"; înălțimea liniei: 1,9; culoare: # A8A8A8; marja: 0 auto; lățime: 70%; text-umbra: 0 0.0625rem 0.125rem rgba (0, 0, 0, .5); .doc_header_text span, .doc_header_text a culoare: #fff; .doc_header_inner hr lățime: 60%; marja: 1.125rem auto 1.5rem auto; culoarea frontală: # 2F2D2E; culoare frontală: rgba (150, 150, 150, .1);
Codul de mai sus este doar CSS obișnuit pentru a stabili noul text adăugat, cu toate acestea veți observa că procesul de aplicare a Fonturilor noastre Google într-un șablon AMP nu este diferit decât de obicei. Folosiți familie de fonturi proprietate cu valoarea fontului ales, de ex. font-familie: 'Libre Baskerville';
Când salvați și actualizați site-ul dvs., ar trebui să vedeți că ambele Fonturi Google se aplică acum textului din secțiunea de copertă:
În continuare, vom adăuga un font personalizat care nu este disponibil fie din Fonturi Google, fie din Fonts.com, și asta este Font Awesome. De cele mai multe ori, dacă utilizați Font Awesome, este posibil să îl încărcați prin MaxCDN, cu toate acestea, AMP nu va permite acest lucru, deoarece CDN nu este una dintre cele două originale de fonturi aprobate. Ca atare, vom face față încărcării prin intermediul nostru @ Font-face.
Pentru a încărca singur fontul, va trebui mai întâi să descărcați fișierele de fonturi pe care le puteți face la adresa https://fortawesome.github.io/Font-Awesome/. Notați că aveți nevoie doar de "Font Awesome", nu de extra "Fort Awesome ", care sunt oferite în timpul descărcării.
Odată ce ați descărcat fișierul Zip Awesome Font, extrageți-l și copiați-l fonturi folderul pe care îl conține în dosarul proiectului.
În CSS, adăugați următorul cod:
/ * Font minunat * / @ font-face font-family: 'FontAwesome'; src: url ('fonts / fontawesome-webfont.eot? v = 4.0.3'); src: formatul url ('fonts / fontawesome-webfont.eot? #fixfix & v = 4.0.3') format (embedded-opentype), url ('fonts / fontawesome-webfont.woff? 'wif'), url ('fonts / fontawesome-webfont.ttf? v = 4.0.3') format ('truetype'), url ('fonts / fontawesome-webfont.svg? v = 4.0.3 # fontawesomeregular') format ( 'sVG'); font-weight: normal; font-style: normal; .fa display: inline-block; font-familie: FontAwesome; font-style: normal; font-weight: normal; linia-înălțime: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: tonuri de gri; .fa-facebook: înainte de content: "\ f09a"; .fa-twitter: înainte de content: "\ f099"; .fa-google-plus: înainte de content: "\ f0d5"; .fa-linkedin: înainte de content: "\ f0e1"; .fa-instagram: înainte de content: "\ f16d"; .fa-dribbble: înainte de content: "\ f17d"; .fa-skype: înainte de content: "\ f17e"; / * / Font Awesome * /Vă recomandăm să inserați codul de mai sus în partea de sus a CSS personalizat pentru a vă ajuta să păstrați lucrurile organizate. Acest cod se încarcă în fișierele noastre personalizate de fonturi și creează clase care pot fi folosite pentru a adăuga pictograme pentru un design - este standardul CSS prevăzut pentru utilizarea de către Font Awesome.
Apoi adăugați și acest CSS:
.doc_header_social marja: 1.5rem 0; umplutura: 0; dimensiune font: 1.875rem; text-umbra: 0 0.0625rem 0.125rem rgba (0, 0, 0, .8); .doc_header_social li afișare: inline-block; marja: 0 1rem; umplutura: 0; .doc_header_social li culoare: #fff; .doc_header_social li: hover culoare: # 11ABB0;
Acest CSS suplimentar adaugă un anumit stil specific șablonului nostru pe care îl vom folosi pentru a configura un rând de pictograme sociale asociate.
Adăugați acest cod HTML după
Dacă actualizați acum site-ul dvs. ar trebui să vedeți un rând de @ Font-face au alimentat icoane sociale de-a lungul fundului textului pe care l-am adăugat mai devreme:
amp-font ElementPentru a vă asigura că vizitatorii nu ajung să vadă un site rupt dacă fonturile personalizate nu se încarcă cu succes, AMP furnizează amp-font pentru a vă permite să creați rezervări.
Pentru a face acest element să funcționeze, primul lucru pe care trebuie să-l faceți este să încărcați scriptul AMP care o permite. În secțiunea cap, adăugați acest cod:
Acum cu amp-font element gata pentru utilizare, îl putem adăuga la o clasă html sau corp dacă fontul nu reușește să se încarce. Adăugați acest cod în partea de jos a șablonului, înainte de închidere
Să aruncăm o privire rapidă asupra atributelor stabilite în acest element. Am stabilit mai întâi aspect = "nodisplay" care asigură faptul că elementul este invizibil.
Apoi, atributul familie de fonturi este setat sa FontAwesome, care spune AMP că vrem să urmărim încărcarea fontului numit "FontAwesome". Asigurați-vă că această valoare corespunde exact familie de fonturi setarea în @ Font-face Cod CSS.
Atributul pauză este setat sa 3000, ceea ce înseamnă că vom permite până la trei secunde ca fontul să se încarce înainte de a trece la o rezervă. Puteți schimba acest lucru la orice valoare preferați.
În cele din urmă, am stabilit la-eroare-add-class la lipsă font-minunat-. Dacă fontul nu se încarcă după trei secunde, această clasă va fi adăugată la html sau corp element. Putem viza această clasă pentru a crea comportamentul nostru de rezervă prin adăugarea acestui cod la CSS personalizat:
.font-awesome-lipsesc .doc_header_social display: none;
Dacă fontul nu reușește să se încarce după trei secunde, CSS de mai sus va activa și ascunde întreaga bară de pictograme socială, astfel încât nu avem niciun afișaj rupt.
Acum, încercați să redenumiți temporar dosarul fonturilor proiectului, astfel încât fonturile să nu se încarce, apoi să vă reîmprospătați pagina și ar trebui să vedeți zona ascunsă a icoanelor sociale. Ar trebui să vedeți și clasa lipsă font-minunat- adăugat la html sau corp etichetă. Restabiliți dosarul de fonturi la numele corect și ar trebui să vedeți din nou pictogramele de fonturi pe care le-ați actualizat.
Citiți mai multe despre amp-font element la:
În continuare, vom învăța cum să adăugăm un videoclip pe YouTube modul AMP, dar mai întâi trebuie să adăugăm un mic cod de menaj pentru a crea o secțiune pentru ca videoclipul să stea.
După "doc_header" div, înlocuiți-le pe cele existente h1 etichete cu acest HTML:
Încorporați un videoclip YouTube
Apoi, adăugați acest lucru în CSS personalizat:
.standard_width lățime: 100%; max-lățime: 75rem; margin-stânga: auto; margin-dreapta: auto; .standard_padding box-size: border-box; umplutură: 6rem 3rem; .video_wrap background-color: # 2B2B2B;
S-ar putea să fi observat în CSS-ul de mai sus pe care l-am stabilit box-size: caseta de margine; în standard_padding clasă.
Motivul pentru aceasta este în AMP nu puteți folosi tehnica comună de includere * size-box: border-box, deoarece * selectorul este considerat prea resursa foame. Ca atare, va trebui să setați box-size: caseta de margine; pentru elementele specifice de care aveți nevoie, sau pur și simplu de manipulare de umplutură și de frontiere mod vechi modă, cu un calculator sau conta pe degetele tale.
amp-youtube ElementAcum că secțiunea este configurată și pregătită pentru conținut, vom adăuga un videoclip YouTube utilizând personalizarea AMP amp-youtube element. Folosind acest element în loc de codul standard de încorporare YouTube, putem folosi tehnici de optimizare a încărcării similare cu cele ale amp-img.
Pentru început, va trebui să adăugați JavaScript-ul AMP necesar pentru a activa noul element. În secțiunea cap, lipiți în:
Acum adăugați următorul cod HTML în divs-ul pe care tocmai l-ați adăugat, sub h2 Etichete:
Pentru a specifica videoclipul pe care doriți să-l încărcați, setați ID-ul YouTube pe atribut Date-VideoId. Altele decât acest atribut, amp-youtube element este la fel ca amp-img element.
Avem lăţime și înălţime setat la 600 și 270 respectiv. Ca și în cazul imaginilor, videoclipurile trebuie să aibă o lățime și o înălțime inițială setate.
Apoi vom folosi aspect = „receptiv“ astfel încât videoclipul să se potrivească dimensiunilor containerului său, păstrând în același timp raportul de aspect tras la setările de înălțime și lățime.
Salvați și actualizați site-ul dvs. și încercați să redimensionați fereastra de vizualizare. Ar trebui să vedeți că videoclipul dvs. YouTube se extinde sau se micșorează pentru a se potrivi, menținând raportul corect de aspect în timp ce merge.
Citiți mai multe despre amp-youtube element la:
AMP dispune de elemente personalizate suplimentare pentru încărcarea conținutului de pe anumite site-uri, cum ar fi amp-twitter, amp-instagram și câteva altele. Pentru conținut de pe site-uri terțe care nu au propriul element AMP dedicat, există amp-iframe element în loc. Acum vom folosi acest element pentru a încărca o hartă Google în pagina noastră.
Creați un container pentru hartă adăugând acest cod sub secțiunea "video_wrap" divs:
Utilizați embedding iframe, de ex. Hărți
Acum, ca și în cazul amp-font și amp-youtube elemente, va trebui să încărcați scriptul AMP care conduce amp-iframe element. Adăugați-o în secțiunea ta:
Apoi, în interiorul divului dvs. nou și sub h2 tag-uri, adăugați acest cod:
Reîncărcați site-ul dvs. și ar trebui să vedeți o hartă Google acum disponibilă.
Pe lângă optimizarea încărcării, cu ajutorul funcției amp-iframe elementul vă ajută să vă asigurați că conținutul vizualizat prin iframe nu se comportă în moduri nedorite, cum ar fi executarea JavaScript care ar putea cauza încărcarea lentă sau forțarea anunțurilor pop-up. Sandbox atributul vă permite să determinați nivelul de control pe care îl aplicați peste conținutul iframe.
Pentru detalii complete amp-iframe și controalele "sandbox", vizitați:
Unul dintre lucrurile care se pot simți limitate la lucrul cu AMP este regula că nu este permis JavaScript particularizat. Pe de altă parte, însă, există elemente personalizate incluse în AMP care vizează să vă ofere câteva funcționalități pe care le-ați putea implementa de obicei prin JavaScript personalizat.
De exemplu, în loc de a încărca un script personalizat, puteți utiliza amp-image-lightbox; element. Vom crea o galerie de imagini care utilizează acest element acum.
Începeți prin a crea un container pentru galeria dvs. prin adăugarea acestui cod chiar deasupra dvs. amp-font etichetă:
Creați o Galerie cu casete luminoase
Adăugați, de asemenea, acest lucru în CSS personalizat:
.portfolio_wrap background-color: #ebeeee; .portport_inner padding: 4rem 6rem; .portfolio_item box-size: border-box; plutește la stânga; lățime: 25%; text-align: centru; padding: 0.8rem; .clearfix: înainte, .clearfix: după content: ""; afișare: tabel; .clearfix: după clar: ambele;
Ca și ultimele noastre elemente personalizate, va trebui să încărăm un script AMP pentru a activa funcția amp-image-lightbox; element. Adăugați-o în secțiunea ta:
Acum suntem gata să începem să ne pregătim galeria noastră de casete luminoase. Începeți prin adăugarea acestui cod în noile dvs. divs, sub h2 Etichete:
Acest amp-image-lightbox; element va crea afișarea reală a casetei de lumină cu imaginile mărite din interiorul acesteia. Vrem să ascundem până când un utilizator a dat clic pe o imagine pe care dorește să o mări, așa că l-am setat aspect = "nodisplay".
Notă: am setat ID-ul acestui element la lightbox1.
Pentru a adăuga un element în galerie, adăugați această diviune de mai jos amp-image-lightbox; element:
Apoi adăugați acest lucru în interiorul lui amp-img cod:
În cea mai mare parte, acest lucru amp-image elementul este același cu cel pe care l-am adăugat mai devreme, cu toate acestea veți observa adăugarea lui on = "robinet: lightbox1". Aceasta spune AMP că, atunci când imaginea este atinsă / apăsată, versiunea mai mare ar trebui să fie deschisă într-o casetă lightbox cu id-ul lightbox1, adică amp-image-lightbox; element pe care l-am creat.
Adaugă alte șapte imagini în galeria cu acest cod:
Când salvați și actualizați, ar trebui să vedeți o galerie pe pagină care arată astfel:
Iar când faceți clic pe oricare dintre imagini, ar trebui să îl vedeți deschis într-o casetă lightbox ca aceasta:
Pentru a citi mai multe despre amp-image-lightbox; vizita:
Aveți acum o pagină AMP de bază cu unele dintre cele mai frecvente tipuri de conținut în loc și câteva trucuri puțin pentru a vă ajuta să lucrați eficient și în conformitate cu regulile AMP
