Начална » Подвижен » 10 Важни ускорени мобилни страници (AMP) Компоненти, които трябва да знаете
10 Важни ускорени мобилни страници (AMP) Компоненти, които трябва да знаете
Ускорени мобилни страници или AMP е инициативата на Google за направете мобилната мрежа по-бърза. За да постигнат тази цел, AMP стандартите ограничават как можете да използвате HTML, CSS, и JavaScript, и управлява зареждането на външни ресурси, като изображения, видеоклипове и реклами чрез собственото си изпълнение.
Това означава, че вие не може да се използва или какъвто и да е обичаен (авторски написан или трети страни) JavaScript или всякакви свързани с ресурси HTML елементи като изображения и видеоклипове в документите на AMP.
За да преодолее пропастта между нуждите на потребителите и най-добрите практики за изпълнение, AMP има специфични компоненти можеш използването на тези изключени елементи.
AMP компоненти са специфични HTML тагове. Те се държат подобно на обикновените HTML тагове: те имат отварящи и затварящи етикети, атрибути и повечето от тях могат да бъдат оформени с CSS. Те могат лесно да бъдат разпознати, както и те винаги започвайте с усилвател- префикс.
Има два вида AMP компоненти: Вграденият и продължен елементи.
Вградени AMP компоненти
Вградени модули са вградени в изпълнението на JavaScript на AMP, така че не е необходимо да ги включвате отделно.
1. усилвател-IMG
замества свободен край в HTML документи на AMP. Трябва да добавите SRC и н атрибути, точно както когато работите с редовните елемент.
също има два други атрибута: винаги трябва посочете широчина и височина атрибути в стойности на цялостен пиксел, тъй като това позволява на времето за изпълнение на AMP изчислете предварително оформлението.
Ако искаш направете образа отзивчив, добавете оформление = "отзивчиви" атрибут. Най- оформление атрибут контролира оформлението в документи на AMP и може да се добави към всички AMP компоненти (научете повече за това в AMP Layout System).
Можете да използвате и srcset атрибут на към задайте различни изображения за различни екрани и плътност на пикселите. Тя работи по същия начин, както и с изображения, които не са AMP.
2. усилвател-видео
може да се използва за директно вграждате HTML видеоклипове в HTML документи на AMP. Той заменя в AMP файлове. Най- свободен край мързеливи зарежда видеоклипове с цел оптимизиране на работата.
Източникът на видеото трябва да се обслужва чрез протокола HTTPS. Трябва да добавите широчина и височина атрибути, също както при компонент.
Най- има много допълнителни атрибути, като например автоматично изпълнение и постер които можете да укажете, за да настроите фино как да се показва вашият HTML5 видеоклип.
поддържа mp4, webm, ogg и всички други формати, поддържани от HTML5
Ако искате, можете също добавете резервни видеоклипове за потребители с браузъри, които не поддържат HTML5 видеоклипове, използвайки резервно атрибут и HTML етикет.
Вашият браузър не поддържа HTML5 видеоклипове.
3. усилвател-реклама и усилвател-вграждане
ви предоставя вградени пясъчници в който можете покажете рекламите си. Трябва да показвате рекламите си чрез протокола HTTPS.
Не можете сами да изпълнявате скриптове, предоставени от рекламната Ви мрежа. Вместо това изпълнението на AMP изпълнява JavaScript на дадена мрежа в рамките на пясъчника. Ти трябва само да посочите коя мрежа използвате, и добавете данните си.
Най- компонент изисква от вас добавете размерите на рекламата използвайки широчина и височина атрибути.
Можете да определите рекламната мрежа, която използвате с Тип атрибут. Вижте списъка с поддържани рекламни мрежи.
Всяка рекламна мрежа има своя собствена данни-* атрибути, които също трябва да добавите. За да видите кой ви трябва, кликнете върху рекламната си мрежа в горния списък.
е псевдонимът на , документацията не говори много за нея, освен за това, че може да се използва вместо когато е семантично по-точни. Тъй като Google обещава да развие свързаните с реклами AMP компоненти с течение на времето, това може да се промени в бъдеще.
4. усилвател пиксел
с , можеш добавете проследяващ пиксел към вашите AMP HTML документи броя прегледи на страниците. Тя има само един атрибут, необходим SRC атрибут, в който трябва посочете URL адреса, принадлежащ на проследяващия пиксел.
Най- позволява стандартни замествания на URL, което означава, че можете генерира произволна стойност на URL за проследяване на всяко впечатление.
Вижте Ръководство за подмяна на URL адреси на AMP, ако искате да използвате този компонент. Обърнете внимание, че не можете да стилизирате компонент.
Разширени AMP компоненти
Като разширени компоненти на AMP не са част от изпълнението на JavaScript, ти винаги трябва да ги импортирате в на страницата AMP, на която искате да ги използвате.
Забележка: версии на компонентите могат да се променят в бъдеще, така че не забравяйте проверете текущата версия в документацията.
5. усилвател аудио
замества HTML5 тагове и го прави възможно директно вграждате HTML5 аудио файлове в страниците на AMP.
За да я използвате, трябва да посочите SRC, широчина и височина атрибути и можете да добавите и три атрибута: автоматично изпълнение, контур и заглушен.
Може също да е добра идея добавете резервни аудио файлове за потребители с браузъри, които не поддържат HTML5. Можете да направите това, като използвате резервно атрибут и , както и с гореспоменатото компонент.
Най- Компонентът AMP поддържа същите аудио формати като HTML5 маркер.
Вашият браузър не поддържа аудио HTML5.
Да използвам , включва следния скрипт в. \ t раздел на вашия документ AMP:
6. усилвател-вградена рамка
показва вградена рамка в документи на AMP. е създадена да бъде по-сигурна от обикновените HTML iframes. Затова и са по подразбиране.
Има някои правила, свързани с трябва да следвате, за да преминете проверката.
Трябва да посочите широчина, височина, и пясък атрибути. Най- пясък По подразбиране атрибутът е празен, но можете да му дадете различни стойности, за да да променя поведението на вградената рамка, напримерпясък = "позволяват скриптове"позволява на iframe да изпълнява JavaScript. Можете да използвате и атрибути на стандартни iframes.
Докато размерите на са предварително зададени от широчина и височина атрибути, има начин да го преоразмерите по време на изпълнение. За да използвате компонент, добавете следния скрипт към вашата AMP страница:
7. усилвател-акордеон
Акордеони представляват чест модел на потребителския интерфейс в мобилния дизайн, тъй като те спестяват място, но все още показват съдържанието по достъпен начин. прави възможно бързо добавете акордеони на страниците на AMP.
Секциите на акордеона трябва да използват HTML5 таг и трябва да бъде директни деца от свободен край.
Всеки раздел трябва да има две директни деца:
един за заглавието
един за съдържанието (съдържанието може да бъде и изображение)
Използвай разширен атрибут във всеки раздел, който искате да се разшири по подразбиране.
Секция 1
Съдържание на раздел 1
Раздел 2
Съдържание на раздел 2
Раздел 3
Изображение за раздел 3
За да използвате компонент в документа на AMP, включете следния скрипт:
8. усилвател-лайтбокс
добавя лайтбокс към различни елементи (в повечето случаи изображения) на ускорени мобилни страници.
Когато потребителят взаимодейства с елемента, например кранове върху него, лайтбокса разширява и запълва целия екран. Ти трябва да добавете бутон или друг контрол които потребителят може да докосне.
Отбележи, че усилвател-лайтбокс може да се използва само с nodisplay оформление.
За да използвате компонент, трябва да го импортирате със следния код:
9. усилвател-карусел
Каруселите често се използват в мобилния дизайн, както им позволяват показват многобройни подобни елементи (най-често изображения) по хоризонталната ос. Резултатите от AMP се представят и в каруселен формат в Google Търсене.
Най- компонент ви позволява да добавите въртележки към сайта си. Най- директни деца от компонент ще се разглежда като елементи от въртележката. Трябва да определите размерите на въртележката с широчина и височина атрибути.
Можете да използвате опцията Тип атрибут за определяне как да покажете елементите на въртележката. Ако Тип атрибута приема "въртележка" стойностите, елементите ще бъдат показани като непрекъсната лента (това е по подразбиране), докато "пързалки" стойността ще покаже елементите във формат на слайдове.
Най- tag има и други незадължителни атрибути, които могат да ви помогнат да настроите по-добре резултата.
В примера по-долу забележете, че и въртележка и всички негови елементи използвайте същото широчина и височина стойности.
Най- компонент изисква добавянето на следния скрипт:
10. усилвател-анализ
може да се използва за събиране на аналитични данни на страниците на AMP. Понастоящем, поддържа четири вида проследяващи събития, въпреки това това може да се промени в бъдеще:
показване на страница
Кликвания на котви
часовник
Превъртане
Да използвам , ти трябва да добавете JSON конфигурационен обект вътре
Добавете следния скрипт към раздела на вашата AMP HTML страница, за да импортирате компонент:
Заключителни думи
В този пост имахме поглед върху всички вградени AMP компоненти и някои от разширените. Тъй като ускорените мобилни страници са все още нови, много неща могат да се променят в бъдеще, така че си струва да следите документацията на Github или на официалния AMP сайт.
Тъй като тези AMP компоненти са с отворен код, можете да допринесете и за развитието създаване на свой собствен компонент. Ако искате да видите как изглежда една пълна страница на AMP с различни компоненти, можете да проверите тези няколко примера за Github.
