10 Важне компоненте убрзаних мобилних страница (АМП) које требате знати
Аццелератед Мобиле Пагес или АМП је Гооглеова иницијатива за убрзајте мобилни веб. Да би се постигао овај циљ, АМП стандарди ограничавају како можете користити ХТМЛ, ЦСС, и ЈаваСцрипт, и управља учитавањем екстерних ресурса, као што су слике, видео записи и огласи преко сопственог времена извођења.
То подразумева да сте ви не може се користити било који ЈаваСцрипт (аутор или писац или треће стране) или било које ХТМЛ елементе у вези са ресурсима као што су слике и видео записи у АМП документима.
Да би премостио јаз између потреба корисника и најбољих пракси извођења, АМП има специфичне компоненте можете користити умјесто ових искључених елемената.
АМП Цомпонентс аре специфичне ХТМЛ ознаке. Они се понашају слично обичним ХТМЛ ознакама: имају ознаке за отварање и затварање, атрибуте и већина њих се може стилизовати помоћу ЦСС-а. Они се лако могу препознати, као и они увек започните са амп- префикс.
Постоје две врсте АМП компоненти: уграђени и проширено Компоненте.
Уграђене АМП компоненте
Буилт-инс уграђени су у АМП ЈаваСцрипт рунтиме, тако да их не морате засебно укључити.
1. амп-имг
замењује таг у АМП ХТМЛ документима. Морате да додате срц и алт атрибути као када радите са регуларним елемент.
такође има још два потребна атрибута: увек морате наведите видтх и хеигхт атрибути у вредностима целог пиксела, јер то дозвољава АМП рунтиме то израчунајте распоред унапријед.
Ако желиш да учините слику одговорном, Додајте лаиоут = "респонсиве" аттрибуте. Тхе лаиоут аттрибуте контролише распоред у АМП документима, и може се додати било којој АМП компоненти (сазнајте више о томе на АМП Лаиоут Систем-у).
Можете користити и срцсет атрибут на таг то одредите различите слике за различите приказе и густине пиксела. Ради на исти начин као и код слика које нису АМП.
2. амп-видео
може се користити директно уграђује ХТМЛ видео записе у АМП ХТМЛ документима. Он замењује у АМП датотекама. Тхе таг лази лоадс видеос у циљу оптимизације перформанси.
Извор видео снимка мора се послужити путем ХТТПС протокола. Морате додати видтх и хеигхт атрибута, као и са саставни део.
Тхе таг има много изборних атрибута, као што је аутоматско покретање и плакат које можете одредити за фино подешавање приказа вашег ХТМЛ5 видеа.
подржава мп4, вебм, огг и све остале формате које подржава ХТМЛ5
Ако желите, можете и ви додај резервне видео снимке за кориснике са прегледачима који не подржавају ХТМЛ5 видео снимке, користећи повући се атрибут и ХТМЛ таг.
Ваш претраживач не подржава ХТМЛ5 видео снимке.
3. амп-ад и амп-ембед
пружа вам ифраме сандбокес у којој можете прикажите своје огласе. Морате приказати своје огласе преко ХТТПС протокола.
Не можете сами да покрећете скрипте које обезбеђује ваша огласна мрежа. Уместо тога, АМП рунтиме извршава ЈаваСцрипт дате мреже унутар сандбок-а. ти Потребно је само да одредите коју мрежу користите, и додајте своје податке.
Тхе компонента захтева од вас додајте димензије огласа помоћу видтх и хеигхт атрибути.
Можете да дефинишете огласну мрежу коју користите са тип аттрибуте. Погледајте листу подржаних огласних мрежа.
Свака огласна мрежа има своју дата- * морате додати и атрибуте. Да бисте видели који вам је потребан, кликните на своју огласну мрежу на горе наведеној листи.
је псеудоним , документација не говори много о томе осим о томе да се може користити уместо када је семантички прецизнији. Како Гоогле обећава да ће временом развити АМП компоненте везане за огласе, то се може промијенити у будућности.
4. амп-пикел
Са , можете додај пиксел за праћење на ваше АМП ХТМЛ документе цоунт паге виевс. Има само један атрибут, потребан срц атрибут, у којем требате наведите УРЛ који припада пикселу за праћење.
Тхе таг омогућава стандардне замене УРЛ адреса, што значи да можеш генерише случајну вредност УРЛ-а да бисте пратили сваки утисак.
Погледајте Водич за замену УРЛ адресе за АМП ако желите да користите ову компоненту. Имајте на уму да не можете да стилизујете саставни део.
Проширене АМП компоненте
Као проширене АМП компоненте нису део ЈаваСцрипт времена извођења, ти увек их је потребно увозити у на страници АМП на којој желите да их користите.
Напомена: верзије компоненти се могу променити у будућности, тако да не заборавите проверите тренутну верзију у документацији.
5. амп-аудио
замењује ХТМЛ5 таг и омогућава директно уграђује ХТМЛ5 аудио датотеке на АМП страницама.
Да бисте га користили, морате да наведете срц, видтх и хеигхт атрибуте, а можете додати и три опционална атрибута: аутоматско покретање, лооп и мутед.
То такође може бити добра идеја додајте резервне аудио датотеке за кориснике са прегледачима који не подржавају ХТМЛ5. То можете урадити користећи повући се атрибут и као и са горе наведеним саставни део.
Тхе АМП компонента подржава исте аудио формате као и ХТМЛ5 таг.
Ваш претраживач не подржава ХТМЛ5 аудио.
Користити , укључите следећу скрипту у одељак вашег АМП документа:
6. амп-ифраме
приказује ифраме у АМП документима. је направљен тако да буде сигурнији од уобичајених ХТМЛ ифрама. Зато јесу сандбокед по подразумеваној вредности.
Постоје нека правила која се односе на морате пратити да бисте прошли провјеру ваљаности.
Морате да наведете видтх, хеигхт, и сандбок атрибути. Тхе сандбок атрибут је подразумевано празан, али му можете дати различите вредности како бисте модификовати понашање ифраме-а, на примерсандбок = "дозволи-скрипте"омогућава да ифраме покрене ЈаваСцрипт. Можете користити и атрибуте стандардних ифрама.
Док су димензије су унапред дефинисани од стране видтх и хеигхт атрибута, постоји начин да се он промени у времену извршавања. Да бисте користили компонента, додајте следећу скрипту на АМП страницу:
7. амп-хармоника
Аццордионс чине чести УИ образац у мобилном дизајну, јер штеде простор, али и даље приказују садржај на приступачан начин. омогућава брзо додајте хармонике на АМП странице.
Секције хармонике морају да користе ХТМЛ5 таг, и треба да буде директну децу од таг.
Сваки одељак морају имати два директна детета:
један за наслов
један за садржај (садржај може бити и слика)
Користити проширен атрибут на било ком делу који желите да се прошири по подразумеваној вредности.
Секција 1
Садржај Одељка 1
Одјељак 2
Садржај Одељка 2
Одељак 3
Слика за секцију 3
Да бисте користили компонента у вашем АМП документу, укључите следећу скрипту:
8. амп-лигхтбок
додаје лигхтбок на различите елементе (у већини случајева, слике) на убрзаним мобилним страницама.
Када корисник комуницира са елементом, на пример, славине на њему, лигхтбок проширује и попуњава цео приказ. Морате да додајте дугме или неку другу контролу које корисник може да додирне.
Напоменути да амп-лигхтбок може се користити само са нодисплаи лаиоут.
Да бисте користили компонента, морате да је увезете са следећим кодом:
9. амп-цароусел
Карусели се често користе у мобилном дизајну, како то дозвољавају приказати бројне сличне елементе (најчешће слике) дуж хоризонталне осе. АМП резултати су такође представљени у карусел формату у Гоогле претраживању.
Тхе компонента вам омогућава да додате каруселе на ваш сајт. Тхе директну децу од компонента ће се сматрати ставке карусела. Морате дефинисати димензије карусела са видтх и хеигхт атрибути.
Можете користити опционално тип одредити како приказати ставке карусела. Ако је тип аттрибуте такес тхе "вртуљак" ставке ће бити приказане као континуирана трака (ово је подразумевано), док је "слајдови" вредност ће приказати ставке у формату слајдова.
Тхе таг такође има и друге опционе атрибуте који вам могу помоћи да фино подесите резултат.
У доле наведеном примјеру примијетите да су и вртуљак и све његове ставке користити исто видтх и хеигхт вредности.
Тхе компонента захтева додавање следеће скрипте:
10. амп-аналитицс
може се користити прикупљање аналитичких података на АМП страницама. Тренутно, подржава четири врсте догађаја праћења, међутим, то се може променити у будућности:
Страна поглед
Анцхор Цлицкс
Тимер
Померање
Користити , морате да додајте ЈСОН конфигурациони објекат унутра а
Додајте следећу скрипту у на вашој АМП ХТМЛ страници да бисте увезли саставни део:
Финал Вордс
У овом посту, имали смо поглед на све уграђене АМП компоненте, а неке на проширене. Како су убрзане мобилне странице још увијек нове, многе ствари се могу промијенити у будућности, тако да је вриједно пратити документацију на Гитхубу или на службеној АМП страници.
Како су ове АМП компоненте отвореног кода, можете допринети и развоју креирате сопствену компоненту. Ако желите да видите како изгледа комплетна АМП страница са различитим компонентама, можете погледати ових неколико примера на Гитхуб-у.
