Google AMP - Атрибуты

В этой главе будут обсуждаться все общие атрибуты, используемые amp-components.

Список общих атрибутов следующий -

  • fallback
  • heights
  • layout
  • media
  • noloading
  • on
  • placeholder
  • sizes
  • ширина и высота

резервный атрибут

Атрибут резервного копирования в основном используется, когда браузер не поддерживает используемый элемент, имеет проблемы с загрузкой файла или ошибки с используемым файлом.

Например, вы используете amp-video, и с медиафайлом возникают проблемы в браузере, поэтому в таких случаях мы можем указать резервный атрибут и отобразить сообщение о том, что медиафайл не может быть воспроизведен или не поддерживается браузером, вместо отображения сообщение об ошибке на странице.

Резервный вариант, используемый в amp-video

<amp-video controls
   width = "640"
   height = "360"
   layout = "responsive"
   poster = "images/videoposter.png">
   <source src = "video/bunny.webm" type = "video/webm" />
   <source src = "video/samplevideo.mp4" type = "video/mp4" />
   <div fallback>
      <p>This browser does not support the video element.</p>
   </div> 
</amp-video>

Давайте разберемся с резервным вариантом рабочей ОС на примере -

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "      http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
   
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;-moz-animation:none;
               -ms-animation:none;animation:none
            }
         </style>
      </noscript>
   
      <script async custom-element = "amp-video" 
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png">
         <source src = "video/bunny.webm"type="video/webm" />
         <source src = "video/samplevideo.mp4"type = "video/mp4" />
         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

Вывод

Атрибут высоты

Этот атрибут в основном поддерживается для адаптивного макета. Вы можете использовать мультимедийное выражение для атрибута высоты, и оно применяется к высоте элемента. Он также принимает значения в процентах, поэтому высота рассчитывается на основе заданной ширины в процентах.

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - heights attribute</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width=device-width,minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;-moz-animation:none;
               -ms-animation:none;animation:none
            }
         </style>
      </noscript>
      
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - heights attribute</h1>
      <amp-img src = "images/christmas1.jpg"
         width = "320" height = "256"
         heights = "(min-width:500px) 200px, 80%">
      </amp-img>
   </body>
</html>

Вывод

атрибут макета

AMP-Layout - одна из важных функций, доступных в google-amp. Компоновка усилителя обеспечивает правильную визуализацию компонентов усилителя при загрузке страницы, не вызывая мерцания или проблем с прокруткой. Он также проверяет рендеринг страницы перед выполнением любых других удаленных ресурсов, таких как HTTP-запрос изображений, вызовы данных.

Список макетов, поддерживаемых усилителем, выглядит следующим образом:

  • Нет
  • Container
  • fill
  • fixed
  • fixed-height
  • flex-item
  • intrinsic
  • nodisplay
  • Responsive

Подробнее об этом вы узнаете в главе Google AMP − Layout этого учебника.

Давайте разберемся в работе layout = "responsive" с помощью примера, как показано -

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image>/title>
      <link rel = "canonical" href = "      http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body {
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;-moz-animation:none;
               -ms-animation:none;animation:none
            }
         </style>
      </noscript>
      
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         displayitem {
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe 
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = responsive Image Example>/h1>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

Вывод

Атрибут СМИ

Этот атрибут можно использовать на большинстве компонентов усилителя. Требуется медиа-запрос, и если значение не соответствует, компонент не будет отображаться.

Давайте разберемся с работой атрибута media на примере -

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</title>
      <link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;-moz-animation:none;
               -ms-animation:none;animation:none
            }
         </style>
      </noscript>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe 
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Media Attribute</h1>
      <div class = "displayitem">
         <amp-img
            media = "(min-width: 600px)"
            src = "images/christmas1.jpg"
            width = "466"
            height = "355"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

Мы использовали атрибут media в теге <amp-img>, как показано ниже -

<amp-img
   media = "(min-width: 600px)"
   src = "images/christmas1.jpg"
   width = "466"
   height = "355"
   layout = "responsive">
</amp-img>

Обратите внимание, что изображение не будет отображаться, если ширина экрана меньше 600 пикселей. Мы будем использовать мобильный режим эмулятора Google для тестирования примера.

Выход на смартфон

Мы проверили на устройстве изображение не видно, так как ширина устройства меньше 600 пикселей. Если мы проверим на планшете, мы получим результат, как показано ниже -

Вывод на IPAD

Атрибут загрузки

Компоненты усилителя, такие как <amp-img>, <amp-video>, <amp-facebook>, показывают индикатор загрузки до того, как фактический контент будет загружен и показан пользователю.

Чтобы перестать показывать индикатор загрузки, мы можем использовать атрибут noloading следующим образом:

<amp-img src = "images/christmas1.jpg"
   noloading
   height = "300"
   width = "250"
   layout = "responsive">
</amp-img>

По атрибуту

Атрибут on используется в элементах для обработки событий и действий в amp-components. Синтаксис для использования атрибута следующий:

Синтаксис -

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

Подробности переданы в on атрибут следующие -

  • eventName- принимает имя события, доступного для amp-component. Например, для форм мы можем использовать submit-success, submit-error eventNames.

  • elementId- Принимает идентификатор элемента, для которого необходимо вызвать событие. Это может быть идентификатор формы, для которой мы хотим знать об успехе или ошибке.

  • methodName - Это принимает имя метода, который будет вызван при возникновении события.

  • arg=value - Это принимает аргументы с формой ключ = значение, переданные методу.

Также можно передать несколько событий в атрибут On следующим образом:

on = "submit-success:lightbox;submit-error:lightbox1"

Note - Если событий несколько, они передаются в атрибут on и разделяются точкой с запятой (;).

Атрибут Действия

Действия в основном используются с атрибутом on, а синтаксис следующий:

on = "tab:elementid.hide;"

Мы можем передать несколько действий следующим образом -

on = "tab:elementid.open;tab:elementid.hide;”

Elementid - это идентификатор элемента, над которым должно быть выполнено действие.

Amp имеет несколько глобально определенных событий и действий, которые можно использовать с любым компонентом amp, и они tap events и действия hide, show и togglevisibility.

Note - Если вы хотите скрыть / показать или использовать togglevisibility для любого компонента html или amp, вы можете использовать on=”tap:elementid.[hide/show/togglevisibility]”

Атрибут заполнителя

Атрибут заполнителя можно использовать в любом элементе html, таком как элемент ввода, а также в amp-компоненте. Заполнитель - это первое, что будет отображаться на странице, и после загрузки содержимого заполнитель удаляется и удаляется. сделал невидимым.

Заполнитель в элементе ввода

<input type = "text" id = "date" name = "date" placeholder = "Start Date">

Заполнитель на amp-component

<amp-anim src = "images/loreal.gif" width = "300" height = "250" layout = "responsive">
   <amp-img placeholder src = "images/flower.jpg" 
   layout = "fill">
   </amp-img>
</amp-anim>

Атрибут размеров

Используется так же, как атрибут высоты. Значение представляет собой выражение, как показано ниже -

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive"
   sizes = "(min-width: 250px) 250px, 100vw">
</amp-img>

Атрибуты ширины и высоты

Они используются почти во всех элементах html и компонентах amp. Ширина и высота используются для обозначения места, которое элемент amp-element занимает на странице.

пример

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive">
</amp-img>
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved