Domača » Mobile » 10 Pomembne komponente za hitrejše mobilne strani (AMP), ki jih morate poznati
10 Pomembne komponente za hitrejše mobilne strani (AMP), ki jih morate poznati
Pospešene mobilne strani ali AMP je Googlova pobuda za hitrejšo mobilno spletno stran. Da bi dosegli ta cilj, standardi AMP omejujejo, kako lahko uporabljate HTML, CSS in JavaScript in upravlja nalaganje zunanjih virov, slike, videoposnetke in oglase preko lastnega izvajalnega okolja.
To pomeni, da ste vi ne more uporabljati bodisi JavaScript (po meri avtorja ali tretje osebe) ali kakršne koli elemente HTML, povezane z viri, kot so slike in videoposnetki v dokumentih AMP.
AMP je premostil vrzel med potrebami uporabnikov in najboljšimi praksami posebne komponente ti lahko namesto teh izključenih elementov.
Komponente AMP so posebne oznake HTML. Obnašajo se podobno kot običajne oznake HTML: imajo odprtje in zaprtje oznak, atribute in večina od njih je lahko oblikovana s CSS. Zlahka jih je mogoče prepoznati, kot so vedno začnite z amp- predpona.
Obstajata dve vrsti komponent AMP: vgrajeno in podaljšan Komponente.
Vgrajene komponente AMP
Vgrajeni elementi so vgrajeni v izvajalno okolje JavaScripta AMP, zato jih ni treba ločeno vključiti.
1. amp-img
nadomesti oznaka v dokumentih AMP HTML. Dodati morate src in alt atributi, tako kot pri delu z rednim element.
ima tudi dva druga potrebna atributa: vedno morate določite premer in višine lastnosti v vrednostih celega števila slikovnih pik, saj to omogoča čas izvajanja AMP vnaprej izračunajte postavitev.
Če želiš sliko prilagodite, dodajte layout = "responsive" atribut. The postavitev atribut nadzoruje postavitev v dokumentih AMP in se lahko doda katerikoli komponenti AMP (več o tem v sistemu za postavitev AMP).
Uporabite lahko tudi srcset atribut oznako določite različne slike za različne vidike in gostote slikovnih pik. Deluje na enak način kot pri slikah, ki niso AMP.
2. amp-video
lahko uporabite neposredno vdelali videoposnetke HTML v dokumentih AMP HTML. Nadomešča v datotekah AMP. The oznaka leni naloži video posnetke za optimizacijo delovanja.
Vir videoposnetka mora biti posredovan prek protokola HTTPS. Dodati morate premer in višine kot pri. \ t komponento.
The ima veliko izbirnih atributov, kot je samodejno predvajanje in plakata ki jih lahko določite za natančno nastavitev prikaza videoposnetka HTML5.
podpira mp4, webm, ogg in vse druge oblike, ki jih podpira HTML5
Če želite, lahko tudi dodajte rezervne videoposnetke za uporabnike z brskalniki, ki ne podpirajo videoposnetkov HTML5, z uporabo pasti nazaj atribut in Oznaka HTML.
Vaš brskalnik ne podpira videoposnetkov HTML5.
3. amp-ad in amp-embed
vam zagotavlja vmesni predal za iframe v katerem lahko prikaže svoje oglase. Oglasi morate prikazati prek protokola HTTPS.
Skriptov, ki jih ponuja vaše oglasno omrežje, ne morete zagnati sami. Namesto tega izvajalno okolje AMP izvrši JavaScript dane mreže znotraj peskovnika. Ti samo morate določiti, katero omrežje uporabljate, in dodajte svoje podatke.
The komponenta zahteva dodajte dimenzije oglasa uporabljati premer in višine lastnosti.
Določite lahko oglaševalsko omrežje, ki ga uporabljate z vrsto atribut. Oglejte si seznam podprtih oglasnih omrežij.
Vsako oglaševalsko omrežje ima svoje podatki- * morate dodati tudi atribute. Če želite videti, kateri od njih potrebujete, kliknite oglasno omrežje na zgornjem seznamu.
je vzdevek , dokumentacija ne govori veliko o njem, razen da se lahko uporablja namesto kdaj je semantično natančnejši. Ker Google obljublja, da bo sčasoma razvil komponente AMP, povezane z oglasi, se lahko to v prihodnosti spremeni.
4. amp-pixel
S , ti lahko dodajte slikovno sliko do vaših dokumentov AMP HTML število ogledov strani. Ima samo en atribut, zahtevan src atribut, v katerem morate določite URL, ki pripada slikovni plošči za sledenje.
The oznaka omogoča standardne zamenjave URL-jev, kar pomeni, da lahko ustvari naključno vrednost URL-ja slediti vsakemu prikazu.
Če želite uporabljati to komponento, glejte Navodila za zamenjavo URL-jev za AMP. Upoštevajte, da ne morete oblikovati komponento.
Razširjene komponente AMP
Kot razširjene komponente AMP niso del izvajalnega okolja JavaScript, vas vedno jih morate uvoziti v strani AMP, na kateri jih želite uporabiti.
Opomba: različice komponent se lahko v prihodnosti spremenijo, zato ne pozabite preverite trenutno različico v dokumentaciji.
5. amp-audio
nadomesti HTML5 in omogoča neposredno vdelajo avdio datoteke HTML5 na straneh AMP.
Če ga želite uporabiti, morate določiti src, premer in višine atribute in lahko dodate tudi tri izbirne atribute: samodejno predvajanje, zanke in utišan.
Lahko je tudi dobra ideja dodajte nadomestne zvočne datoteke za uporabnike z brskalniki, ki ne podpirajo HTML5. To lahko storite z uporabo pasti nazaj atribut in kot pri prej omenjenem komponento.
The Komponenta AMP podpira iste avdio formate kot Oznaka HTML5.
Vaš brskalnik ne podpira zvoka HTML5.
Uporabiti , v skriptu vključite naslednji skript v dokumentu AMP:
6. amp-iframe
prikaže iframe v dokumentih AMP. je varnejši od običajnih vmesnih datotek HTML. Zato so privzeto je vstavljen v pesek.
Obstajajo nekatera pravila, povezana s za potrditev morate slediti.
Določiti morate premer, višine, in peskovnik lastnosti. The peskovnik atribut je privzeto prazen, vendar mu lahko podate različne vrednosti spremenite obnašanje iframe, na primersandbox = "allow-scripts"omogoča, da iframe izvaja JavaScript. Uporabite lahko tudi atribute standardnih iframeov.
Medtem ko so dimenzije so vnaprej določeni z premer in višine atributov, obstaja način, da ga spremenite v času izvajanja. Za uporabo komponento, dodajte naslednji skript na svojo stran AMP:
7. amp-harmonika
Harmonike predstavljajo pogost vzorec uporabniškega vmesnika v mobilnem oblikovanju, saj prihranijo prostor, vendar vsebino še vedno prikazujejo na dostopen način. omogoča hitro dodajte harmonike strani AMP.
Odseki harmonike morajo uporabiti Oznaka HTML5 in mora biti neposredne otroke od oznaka.
Vsak odsek imeti dva neposredna otroka:
enega za naslov
eno za vsebino (vsebina je lahko tudi slika)
Uporabi razširili atribut na katerem koli razdelku, ki ga želite privzeto razširiti.
Oddelek 1
Vsebina oddelka 1. \ T
Oddelek 2
Vsebina oddelka 2. \ T
Oddelek 3
Slika za 3. poglavje
Za uporabo v dokumentu AMP, vključite ta skript:
8. amp-lightbox
doda lightbox na različne elemente (v večini primerov slike) na hitrih mobilnih straneh.
Ko uporabnik komunicira z elementom, na primer pipami na njem, bo lightbox razširi in zapolni celoten prikaz. Moraš dodajte gumb ali drug nadzor ki jih uporabnik lahko dotakne.
Upoštevajte, da amp-lightbox lahko uporabite samo s nodisplay postavitev.
Za uporabo komponento, jo morate uvoziti z naslednjo kodo:
9. amp-vrtiljak
V mobilnem oblikovanju se pogosto uporabljajo vrtiljaki prikazati številne podobne elemente (najpogosteje slike) vzdolž vodoravne osi. Rezultati storitve AMP so predstavljeni tudi v obliki vrtiljaka v iskalniku Google.
The komponenta omogoča dodajanje vrtiljakov na vaše spletno mesto. The neposredne otroke od komponenta bo obravnavana kot elemente vrtiljaka. Določite dimenzije vrtiljaka z premer in višine lastnosti.
Uporabite lahko izbirno vrsto določiti kako prikazati elemente vrtiljaka. Če je vrsto atribut prevzame "vrtiljak" vrednosti, bodo prikazane postavke kot neprekinjen trak (to je privzeto), medtem ko "diapozitivi" vrednost bo prikazala elemente v obliki diapozitivov.
The ima tudi druge neobvezne atribute, ki vam lahko pomagajo pri natančni nastavitvi rezultata.
V spodnjem primeru opazite, da tako vrtiljak kot vsi njegovi elementi uporabite enako premer in višine vrednosti.
The komponenta zahteva dodajanje naslednjega skripta:
10. amp-analytics
lahko uporabite zbiranje analitičnih podatkov na straneh AMP. Trenutno, podpira štiri vrste sledenja dogodkom, vendar se to lahko v prihodnosti spremeni:
Pogled strani
Sidrni kliki
Časovnik
Pomikanje
Uporabiti , moraš dodaj konfiguracijski objekt JSON znotraj
Dodajte naslednjo skripto v strani AMP HTML za uvoz komponenta:
Končne besede
V tem delu smo si ogledali vse vgrajene komponente AMP in nekatere razširjene. Ker je hitra mobilna spletna stran še vedno nova, se lahko veliko stvari v prihodnosti spremeni, zato je vredno paziti na dokumentacijo na Githubu ali na uradnem mestu AMP.
Ker so te komponente AMP odprte kode, lahko tudi vi prispevate k razvoju ustvarjanje lastne komponente. Če želite videti, kako izgleda celotna stran AMP z različnimi komponentami, si lahko ogledate teh nekaj primerov v Githubu.
