Mājas lapa » Mobilais » 10 Svarīgi paātrināti mobilās lapas (AMP) komponenti, kas jums jāzina
10 Svarīgi paātrināti mobilās lapas (AMP) komponenti, kas jums jāzina
Paātrinātas mobilās lapas vai AMP ir Google iniciatīva padarīt mobilo tīmekli ātrāku. Lai sasniegtu šo mērķi, AMP standarti ierobežo, kā jūs varat izmantot HTML, CSS un JavaScript, un pārvalda ārējo resursu iekraušanu, piemēram, attēlus, videoklipus un reklāmas izmantojot savu darbības laiku.
Tas nozīmē, ka jūs nevar izmantot vai nu jebkurš pielāgots (autora vai trešās puses) JavaScript vai jebkurš ar resursiem saistīts HTML elements, piemēram, attēli un videoklipi jūsu AMP dokumentos.
Lai pārvarētu plaisu starp lietotāju vajadzībām un labāko darbības praksi, AMP ir īpašas sastāvdaļas jūs varat šo izslēgto elementu vietā.
AMP komponenti ir konkrēti HTML tagi. Tie darbojas tāpat kā parastie HTML tagi: tiem ir atvēršanas un aizvēršanas tagi, atribūti, un lielākā daļa no tiem var būt veidoti ar CSS. Tos var viegli atpazīt, kā viņi vienmēr sākt ar amp- priedēklis.
Ir divu veidu AMP komponenti: iebūvēts un pagarināts Sastāvdaļas.
Iebūvētie AMP komponenti
Built-ins ir iebūvēti AMP JavaScript darbības laikā, tāpēc jums nav atsevišķi jāiekļauj tās.
1. amp-img
aizstāj tag AMP HTML dokumentos. Jums jāpievieno src un alt atribūti tāpat kā tad, kad strādājat ar parasto elementu.
tam ir arī divi citi nepieciešamie atribūti: jums vienmēr ir nepieciešams norādiet platums un augstums atribūti veselu skaitļu pikseļu vērtībās, jo tas ļauj AMP izpildīšanas laiku aprēķināt izkārtojumu iepriekš.
Ja Tu gribi padarīt attēlu atsaucīgu, pievienojiet izkārtojums = "atsaucīgs" atribūts. The izkārtojums atribūts kontrolē izkārtojumu AMP dokumentos, un to var pievienot jebkuram AMP komponentam (uzziniet vairāk par AMP izkārtojuma sistēmu).
Varat arī izmantot srcset atribūts uz atzīmēt norādiet dažādus attēlus dažādiem skatu logiem un pikseļu blīvumiem. Tas darbojas tāpat kā bez AMP attēliem.
2. amp-video
var izmantot tieši iegultus HTML videoklipus AMP HTML dokumentos. Tā aizstāj AMP failos. The tag slinks ielādē video lai optimizētu veiktspēju.
Video avots jāizsniedz, izmantojot HTTPS protokolu. Jums ir jāpievieno platums un augstums atribūti, tāpat kā ar komponents.
The tagam ir daudz izvēles atribūtu, piemēram, automātiskā atskaņošana un plakāts kuru varat norādīt, lai precizētu, kā tiek rādīts HTML5 video.
atbalsta mp4, webm, ogg un visus citus formātus, ko atbalsta HTML5
Ja vēlaties, varat arī pievienojiet rezerves videoklipus lietotājiem ar pārlūkprogrammām, kas neatbalsta HTML5 videoklipus, izmantojot atkāpties atribūtu un HTML tag.
sniedz jums iframe smilšu kastes kurā jūs varat rādīt savas reklāmas. Jums ir jāiesniedz jūsu reklāmas izmantojot HTTPS protokolu.
Jūs nevarat palaist jūsu reklāmas tīkla piedāvātos skriptus. Tā vietā AMP izpildlaiks izpilda attiecīgā tīkla JavaScript smilšu kastē. Jūs tikai jānorāda, kuru tīklu lietojat, un pievienojiet savus datus.
The sastāvdaļa prasa pievienojiet reklāmas izmērus izmantojot platums un augstums atribūti.
Varat definēt reklāmu tīklu, ko izmantojat veids atribūts. Skatiet atbalstīto reklāmu tīklu sarakstu.
Katram reklāmu tīklam ir savs datu- * atribūti, kas jums jāpievieno. Lai redzētu, kas jums nepieciešams, noklikšķiniet uz jūsu reklāmas tīkla iepriekš minētajā sarakstā.
ir. \ t , dokumentācijā nav daudz par to, kā to var izmantot nevis kad tas ir semantiski precīzāka. Tā kā Google laika gaitā sola attīstīt ar reklāmu saistītus AMP komponentus, tas nākotnē var mainīties.
4. amp-pixel
Ar , jūs varat pievienojiet izsekošanas pikseļu jūsu AMP HTML dokumentiem skaita lapu skatījumus. Tam ir tikai viens atribūts, vajadzīgais src atribūts, kurā jums ir nepieciešams norādiet izsekošanas pikseļa URL.
The atļauj standarta URL nomaiņas, tas nozīmē, ka jūs varat ģenerēt nejaušu URL vērtību sekot katram iespaidam.
Ja vēlaties izmantot šo komponentu, skatiet AMP URL aizvietošanas rokasgrāmatu. Ņemiet vērā, ka komponents.
Paplašināti AMP komponenti
Kā pagarināts AMP komponents nav daļa no JavaScript darbības ilguma, jums vienmēr importējiet tos iekš sadaļā AMP, kurā vēlaties tos izmantot.
Piezīme: komponentu versijas nākotnē var mainīties, tāpēc neaizmirstiet pārbaudiet pašreizējo versiju dokumentācijā.
5. amp-audio
aizstāj HTML5 tagu un ļauj to tieši iegult HTML5 audio failus AMP lapās.
Lai to izmantotu, jums ir jānorāda src, platums un augstums atribūtus, kā arī varat pievienot trīs izvēles atribūtus: automātiskā atskaņošana, cilpa un izslēgts.
Tā var būt arī laba ideja pievienot rezerves audio failus lietotājiem ar pārlūkprogrammām, kas neatbalsta HTML5. To var izdarīt, izmantojot atkāpties atribūtu un , tāpat kā ar iepriekš minēto komponents.
The AMP komponents atbalsta tādus pašus audio formātus kā HTML5 tag.
Jūsu pārlūkprogramma neatbalsta HTML5 audio.
Izmantot , iekļaut šādu skriptu jūsu AMP dokumenta sadaļa:
6. amp-iframe
parāda iframe AMP dokumentos. ir padarīts drošāks nekā parastie HTML iframes. Tāpēc viņi ir pēc noklusējuma ir smilšu kaste.
Ir daži noteikumi, kas saistīti ar jums jāievēro, lai saņemtu apstiprinājumu.
Jums jānorāda platums, augstums, un smilšu kaste atribūti. The smilšu kaste pēc noklusējuma atribūts ir tukšs, bet, lai to varētu piešķirt, tas var būt atšķirīgs modificēt iframe darbību, piemēramsandbox = "atļaut-skripti"ļauj iframe palaist JavaScript. Varat izmantot arī standarta iframes atribūtus.
Lai gan izmēri ir iepriekš definēti platums un augstums atribūti, tas ir veids, kā to mainīt runtime. Lai izmantotu komponentu, pievienojiet šādu skriptu savai AMP lapai:
7. amp-akordeons
Akordeoni mobilais dizains ir biežs lietotāja interfeisa modelis, jo tie ietaupa vietu, bet joprojām satur saturu pieejamā veidā. ļauj ātri pievienojiet akordeonus uz AMP lapām.
Akordeona sadaļās jāizmanto HTML5 tag, un tai jābūt tiešos bērnus no tag.
Katra sadaļa jābūt diviem tiešiem bērniem:
vienu pozīcijai
viens saturam (saturs var būt arī attēls)
Izmantojiet paplašināta atribūts jebkurā sadaļā, kuru vēlaties paplašināt pēc noklusējuma.
1. iedaļa
1. iedaļas saturs
2. iedaļa
2. iedaļas saturs
3. iedaļa
Attēls 3. sadaļai
Lai izmantotu AMP dokumentā ietveriet šādu skriptu:
8. amp-lightbox
pievieno gaismas kastīti pa dažādiem elementiem (vairumā gadījumu attēliem) paātrinātajās mobilajās lapās.
Kad lietotājs mijiedarbojas ar elementu, piemēram, pieskaras tai, gaismas kaste paplašina un aizpilda visu skatu portu. Tev vajag pievienot pogu vai citu kontroli kuru lietotājs var izmantot.
Pieraksti to amp-lightbox var izmantot tikai ar nodisplay izkārtojums.
Lai izmantotu sastāvdaļa, jums ir nepieciešams importēt to ar šādu kodu:
9. amp-karuselis
Karuseļi bieži tiek izmantoti mobilajā dizainā, kā to ļauj attēlot daudzus līdzīgus elementus (visbiežāk attēli) gar horizontālo asi. AMP rezultāti tiek rādīti arī karuseļveida formātā Google meklēšanā.
The sastāvdaļa ļauj jums pievienot karuseļus savai vietnei. The tiešos bērnus no sastāvdaļa tiks uzskatīta par karuseļa priekšmeti. Jums ir jānosaka karuseļa izmēri ar platums un augstums atribūti.
Varat izmantot izvēles veids atribūts kā attēlot karuseļveida vienumus. Ja veids atribūts "karuselis" vērtība, vienumi tiks parādīti kā nepārtrauktu sloksni (tas ir noklusējums), kamēr "slaidi" vērtība parādīs vienumus slaidu formātā.
The tagam ir arī citi neobligātie atribūti, kas var palīdzēt jums precizēt rezultātu.
Tālāk redzamajā piemērā ievērojiet, ka gan karuselis, gan visi tā priekšmeti izmantot to pašu platums un augstums vērtības.
The komponentam ir nepieciešams pievienot šādu skriptu:
10. amp-analītika
var izmantot vāc analītiskos datus AMP lapās. Pašlaik, atbalsta četrus izsekošanas notikumu veidus, tomēr tas var mainīties nākotnē:
Lapu skatījums
Enkuru klikšķi
Taimeris
Ritināšana
Izmantot , tev vajag pievienojiet JSON konfigurācijas objektu iekšpusē a
Pievienojiet šādu skriptu jūsu AMP HTML lapas sadaļā, lai importētu komponents:
Galīgie vārdi
Šajā ziņojumā mēs apskatījām visus iebūvētos AMP komponentus un dažus paplašinātos. Tā kā paātrinātās mobilās lapas joprojām ir jaunas, daudzas lietas nākotnē var mainīties, tāpēc ir vērts ievērot dokumentāciju Github vai oficiālajā AMP vietnē.
Tā kā šie AMP komponenti ir atvērtā koda, jūs varat arī veicināt attīstību izveidot savu komponentu. Ja vēlaties redzēt, kā pilnīga AMP lapa izskatās ar dažādiem komponentiem, varat apskatīt šos dažus Github piemērus.
