Pagrindinis » Mobilus » 10 Svarbių pagreitintų mobiliųjų puslapių (AMP) komponentų, kuriuos turėtumėte žinoti
10 Svarbių pagreitintų mobiliųjų puslapių (AMP) komponentų, kuriuos turėtumėte žinoti
Pagreitinti mobilieji puslapiai arba AMP yra „Google“ iniciatyva kad mobilusis internetas taptų greitesnis. Norint pasiekti šį tikslą, AMP standartai riboja, kaip galite naudoti HTML, CSS ir JavaScript valdo išorinių išteklių pakrovimą, pavyzdžiui, atvaizdus, vaizdo įrašus ir skelbimus per savo darbo laiką.
Tai reiškia, kad jūs negali naudoti AMP dokumentuose yra bet koks pasirinktinis (autoriaus arba trečiosios šalies) „JavaScript“ arba bet koks su ištekliais susijęs HTML elementas, pvz., vaizdai ir vaizdo įrašai.
Siekiant panaikinti atotrūkį tarp vartotojų poreikių ir geriausios veiklos praktikos, AMP turi konkrečius komponentus tu gali vietoj šių neįtrauktų elementų.
AMP komponentai yra konkrečių HTML žymių. Jie elgiasi panašiai kaip įprasta HTML žyma: jie turi atidarymo ir uždarymo žymes, atributus, ir dauguma jų gali būti suformuoti su CSS. Jie gali būti lengvai atpažįstami, kaip jie visada pradėkite nuo stiprint- priešdėlis.
Yra dviejų tipų AMP komponentai: įmontuota ir pratęstas Komponentai.
Integruoti AMP komponentai
Įtaisai yra įmontuoti į „AMP“ „JavaScript“ vykdymo laiką, taigi jūs neturite atskirai įtraukti jų.
1. amp-img
pakeičia žyma AMP HTML dokumentuose. Jums reikia pridėti src ir alt atributai lygiai taip pat, kai dirbate su įprastu elementas.
taip pat turi du kitus privalomus atributus: visada reikia nurodykite plotis ir aukštis atributai sveikų skaičių pikselių vertėmis, nes tai leidžia AMP vykdymo laiką apskaičiuoti išdėstymą iš anksto.
Jeigu nori kad vaizdas būtų jautrus, pridėkite layout = "reaguoja" atributas. The išdėstymas atributas valdo išdėstymą AMP dokumentuose, ir jį galima pridėti prie bet kokių AMP komponentų (sužinokite daugiau apie tai AMP išdėstymo sistemoje).
Taip pat galite naudoti srcset atributas žyma į nurodykite skirtingus vaizdus skirtingoms peržiūros sritims ir pikselių tankiui. Jis veikia taip pat, kaip ir ne AMP vaizduose.
2. vaizdo įrašą
gali būti naudojamas tiesiogiai įdėti HTML vaizdo įrašus AMP HTML dokumentuose. Jis pakeičia AMP rinkmenose. The žyma tingus įkelia vaizdo įrašus siekiant optimizuoti našumą.
Vaizdo įrašo šaltinis turi būti įteiktas per HTTPS protokolą. Privalote pridėti plotis ir aukštis atributai, kaip ir komponentas.
The žyma turi daug neprivalomų atributų, pvz automatinis paleidimas ir plakatas kurį galite nurodyti norėdami tiksliai nustatyti, kaip rodomas HTML5 vaizdo įrašas.
palaiko mp4, webm, ogg ir visus kitus HTML5 palaikomus formatus
Jei norite, taip pat galite pridėkite atsarginių vaizdo įrašų naudotojams, turintiems naršyklių, kurios nepalaiko HTML5 vaizdo įrašų, naudodami atsitraukti atributas ir HTML žyma.
Jūsų naršyklė nepalaiko HTML5 vaizdo įrašų.
3. papildomas skelbimas ir stiprinimas
suteikia jums iframe smėlio dėžės kurioje galite rodyti skelbimus. Turite aptarnauti skelbimus naudojant HTTPS protokolą.
Negalite paleisti skelbimų tinklo pateiktų scenarijų. Vietoj to, AMP vykdymo laikas atlieka atitinkamo tinklo „JavaScript“ smėlio dėžėje. Tu reikia nurodyti tik tai, kurį tinklą naudoti, ir pridėkite savo duomenis.
The komponentas reikalauja pridėti skelbimo matmenis naudojant plotis ir aukštis atributai.
Galite nustatyti skelbimų tinklą, kurį naudojate tipas atributas. Žr. Palaikomų skelbimų tinklų sąrašą.
Kiekvienas skelbimų tinklas turi savo duomenų * atributai, kuriuos taip pat turite pridėti. Jei norite pamatyti, kuriam reikia, pirmiau pateiktame sąraše spustelėkite skelbimų tinklą.
yra , dokumentuose nėra daug informacijos apie tai, išskyrus tai, kad jis gali būti naudojamas vietoj kai tai semantiškai tikslesnis. Kadangi „Google“ žada plėtoti su reklama susijusius AMP komponentus, tai gali pasikeisti ateityje.
4. amp-pixel
Su , tu gali pridėti stebėjimo tašką į savo AMP HTML dokumentus skaičiuoti puslapių peržiūrą. Ji turi tik vieną atributą, reikalingą src atributas, kuriame reikia nurodykite stebėjimo taškui priklausantį URL.
The žyma leidžia standartiniai URL pakeitimai, tai reiškia, kad galite generuoti atsitiktinę URL vertę stebėti kiekvieną įspūdį.
Jei norite naudoti šį komponentą, žr. AMP URL pakeitimo vadovą. Atkreipkite dėmesį, kad negalite stiliaus komponentas.
Išplėstinė AMP komponentai
Kaip išplėstiniai AMP komponentai nėra „JavaScript“ vykdymo laiko dalis, tu visada reikia juos importuoti viduje konors AMP puslapio, kuriame norite juos naudoti, skyrių.
Pastaba: komponentų versijos ateityje gali keistis, todėl nepamirškite patikrinkite dabartinę versiją dokumentuose.
5. stiprintuvo garsas
pakeičia HTML5 žyma ir leidžia tiesiogiai įterpti HTML5 garso failus AMP puslapiuose.
Jei norite ją naudoti, turite nurodyti src, plotis ir aukštis atributai, taip pat galite pridėti tris pasirinktinius atributus: automatinis paleidimas, kilpa ir nutildytas.
Tai taip pat gali būti gera idėja pridėti atsarginių garso failų naudotojams, turintiems naršyklių, kurios nepalaiko HTML5. Tai galite padaryti naudodami atsitraukti atributas ir žyma, kaip ir anksčiau komponentas.
The AMP komponentas palaiko tuos pačius garso formatus kaip ir HTML5 žyma.
Jūsų naršyklė nepalaiko HTML5 garso.
Naudoti , įtraukti šį scenarijų į AMP dokumento skyrius:
6. amp-iframe
rodo iframe AMP dokumentuose. buvo padarytas saugesnis nei įprastas HTML iframes. Todėl jie yra pagal nutylėjimą yra sandboxed.
Yra keletas taisyklių, susijusių su turite laikytis patvirtinimo.
Turite nurodyti plotis, aukštis, ir smėlio dėžė atributai. The smėlio dėžė pagal nutylėjimą atributas yra tuščias, tačiau galite suteikti jam skirtingas vertes modifikuoti iframe elgesį, pavyzdžiuisandbox = "sall-scripts"leidžia „iframe“ paleisti „JavaScript“. Taip pat galite naudoti standartinių iframes atributus.
Nors matmenys yra iš anksto nustatyti plotis ir aukštis atributai, tai yra būdas pakeisti dydį vykdymo metu. Norėdami naudoti pridėkite šį scenarijų į AMP puslapį:
7. amp-akordeonas
Akordeonai judriojo dizaino dažnai naudoja UI modelį, nes jie taupo erdvę, tačiau vis tiek rodo turinį prieinamu būdu. leidžia greitai pridėkite akordeonus į AMP puslapius.
Akordeono skyriai turi naudoti HTML5 žyma ir turi būti tiesioginiai vaikai iš žyma.
Kiekvienas skyrius turi turėti du tiesioginius vaikus:
viena antraštei
vienas turiniui (turinys taip pat gali būti vaizdas)
Naudoti išplėstas atributas bet kurioje skiltyje, kurią norite išplėsti pagal numatytuosius nustatymus.
1 skirsnis
1 skirsnio turinys
2 skirsnis
2 skirsnio turinys
3 skirsnis
3 skirsnio vaizdas
Norėdami naudoti AMP dokumente, įtraukite šį scenarijų:
8. amp-lightbox
prideda „Lightbox“ į įvairius elementus (daugeliu atvejų vaizdus) spartintuose mobiliuosiuose puslapiuose.
Kai vartotojas sąveikauja su elementu, pvz., Čiaupais, švieslentė plečiasi ir užpildo visą peržiūros sritį. Tau reikia pridėti mygtuką arba kitą valdiklį kurį naudotojas gali paliesti.
Prisimink tai amp-lightbox galima naudoti tik su pavaizduoti išdėstymas.
Norėdami naudoti komponentą, turite jį importuoti su šiuo kodu:
9. amp-karuselė
Karuselės dažnai naudojamos judriojo dizaino reikmėms rodyti daug panašių elementų (dažniausiai vaizdai) išilgai horizontalios ašies. AMP rezultatai taip pat pateikiami „Google“ paieškoje karuseliniu formatu.
The komponentas leidžia pridėti karuseles į savo svetainę. The tiesioginiai vaikai iš komponentas bus laikomas karuselės elementai. Turite apibrėžti karuselės matmenis su plotis ir aukštis atributai.
Galite naudoti pasirinktinį tipas atributas kaip rodyti karuselinį elementą. Jei tipas atributas užima „karuselė“ reikšmė, elementai bus rodomi kaip nuolatinė juostelė (tai yra numatytasis), o „skaidrės“ reikšmė parodys elementus skaidrių formatu.
The žyma taip pat turi kitų neprivalomų atributų, kurie gali padėti jums tiksliai sureguliuoti rezultatą.
Toliau pateiktame pavyzdyje pastebėkite, kad ir karuselė, ir visi jos elementai naudoti tą patį plotis ir aukštis vertės.
The komponentui reikia pridėti šį scenarijų:
10. amp-analitika
gali būti naudojamas rinkti analizės duomenis AMP puslapiuose. Šiuo metu, palaiko keturių tipų stebėjimo įvykius, tačiau tai gali pasikeisti ateityje:
Puslapio peržiūra
Inkaro paspaudimai
Laikmatis
Slinkimas
Naudoti , tau reikia pridėti JSON konfigūracijos objektą viduje
Pridėti šį scenarijų į AMP HTML puslapio skiltyje importuoti komponentas:
Galutiniai žodžiai
Šiame pranešime mes peržiūrėjome visus integruotus AMP komponentus ir kai kuriuos išplėstinius. Kadangi spartinti mobilieji puslapiai vis dar yra nauji, daugelis dalykų gali pasikeisti ateityje, todėl verta stebėti dokumentaciją Github arba oficialioje AMP svetainėje.
Kadangi šie AMP komponentai yra atviro kodo, taip pat galite prisidėti prie kūrimo sukurti savo komponentą. Jei norite pamatyti, kaip išsamus AMP puslapis atrodo su skirtingais komponentais, galite peržiūrėti šiuos kelis Github pavyzdžius.
