Google AMP - atrybuty

W tym rozdziale omówimy wszystkie typowe atrybuty używane przez komponenty wzmacniacza.

Lista wspólnych atrybutów jest następująca -

  • fallback
  • heights
  • layout
  • media
  • noloading
  • on
  • placeholder
  • sizes
  • Szerokość i wysokość

atrybut rezerwowy

Atrybut fallback jest najczęściej używany, gdy przeglądarka nie obsługuje używanego elementu lub ma problemy z ładowaniem pliku lub ma błędy w używanym pliku.

Na przykład, używasz amp-video i plik multimedialny ma problemy z przeglądarką, więc w takich przypadkach możemy określić atrybut rezerwowy i wyświetlić komunikat, że plik multimedialny nie może być odtworzony lub nie jest obsługiwany przez przeglądarkę, zamiast wyświetlać komunikat o błędzie na stronie.

Powrót używany w 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>

Zrozummy działanie awaryjnego systemu operacyjnego na przykładzie -

Przykład

<!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>

Wynik

Atrybut wysokości

Ten atrybut jest zasadniczo obsługiwany w przypadku układu responsywnego. Możesz użyć wyrażenia medialnego do atrybutu heights i dotyczy to wysokości elementu. Przyjmuje również wartości procentowe, więc wysokość jest obliczana na podstawie podanej procentowej szerokości.

Przykład

<!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>

Wynik

atrybut układu

Układ AMP to jedna z ważnych funkcji dostępnych w Google-amp. Układ Amp zapewnia, że ​​komponenty wzmacniacza są poprawnie renderowane po załadowaniu strony, nie powodując migotania ani problemów z przewijaniem. Sprawdza również renderowanie strony przed wykonaniem jakichkolwiek innych zdalnych zasobów, takich jak żądanie http dla obrazów, połączenia danych.

Lista układów obsługiwanych przez wzmacniacz jest następująca -

  • Nieobecny
  • Container
  • fill
  • fixed
  • fixed-height
  • flex-item
  • intrinsic
  • nodisplay
  • Responsive

O tym samym szczegółowo dowiesz się z rozdziału Google AMP − Layout tego samouczka.

Zrozummy działanie układu = „responsive” na przykładzie pokazanym na rysunku -

Przykład

<!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>

Wynik

Atrybut mediów

Ten atrybut może być używany w większości komponentów wzmacniacza. Pobiera zapytanie o media i jeśli wartość nie pasuje, komponent nie zostanie wyrenderowany.

Zrozummy działanie atrybutu media na przykładzie -

Przykład

<!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>

Użyliśmy atrybutu media w tagu <amp-img>, jak pokazano poniżej -

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

Zwróć uwagę, że obraz nie zostanie wyświetlony, jeśli szerokość ekranu jest mniejsza niż 600 pikseli. Do przetestowania przykładu użyjemy trybu mobilnego emulatora Google.

Wyjście na smartfon

Sprawdziliśmy na urządzeniu, że obraz nie jest widoczny, ponieważ szerokość urządzenia jest mniejsza niż 600 pikseli. Jeśli sprawdzimy na tablecie, otrzymamy wyjście, jak pokazano poniżej -

Wyjście na iPada

Atrybut braku ładowania

Komponenty Amp, takie jak <amp-img>, <amp-video>, <amp-facebook>, pokazują wskaźnik ładowania przed załadowaniem i wyświetleniem rzeczywistej zawartości użytkownikowi.

Aby przestać wyświetlać wskaźnik ładowania, możemy użyć atrybutu noloading w następujący sposób -

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

Attribute

Atrybut on jest używany w elementach do obsługi zdarzeń i działań na komponentach wzmacniacza. Składnia używana w atrybucie jest następująca -

Składnia -

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

Szczegóły przekazane do on atrybut jest następujący -

  • eventName- To przyjmuje nazwę zdarzenia, które jest dostępne dla komponentu wzmacniacza. Na przykład, w przypadku formularzy możemy użyć nazwy zakończonych powodzeniem, przesłanych błędów, nazw zdarzeń.

  • elementId- Pobiera identyfikator elementu, w którym zdarzenie ma zostać wywołane. Może to być identyfikator formularza, dla którego chcemy wiedzieć o sukcesie lub błędzie.

  • methodName - To przyjmuje nazwę metody, która ma zostać wywołana w przypadku wystąpienia zdarzenia.

  • arg=value - Pobiera argumenty w postaci klucz = wartość przekazane do metody.

Możliwe jest również przekazanie wielu zdarzeń do atrybutu On w następujący sposób -

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

Note - Jeśli występuje wiele zdarzeń, są one przekazywane do atrybutu on i rozdzielane średnikiem (;).

Atrybut akcji

Akcje są zasadniczo używane z atrybutem on, a składnia jest następująca -

on = "tab:elementid.hide;"

Możemy przekazać wiele akcji w następujący sposób -

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

Elementid jest identyfikatorem elementu, na którym ma zostać wykonana akcja.

Amp ma pewne globalnie zdefiniowane zdarzenia i akcje, które mogą być użyte na dowolnym komponencie wzmacniacza i są tap events i działania są hide, show i togglevisibility.

Note - Jeśli chcesz ukryć / pokazać lub użyć przełącznika widoczności na dowolnym komponencie HTML lub wzmacniacza, możesz użyć on=”tap:elementid.[hide/show/togglevisibility]”

Atrybut zastępczy

Atrybut zastępczy może być używany w dowolnym elemencie HTML, takim jak element wejściowy, a także może być używany w komponencie wzmacniacza. niewidoczne.

Symbol zastępczy elementu wejściowego

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

Symbol zastępczy komponentu wzmacniacza

<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>

Atrybut rozmiarów

Jest używany tak jak atrybut wysokości. Wartość jest wyrażeniem, jak pokazano poniżej -

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

Atrybuty szerokości i wysokości

Są używane w prawie wszystkich elementach HTML i komponentach wzmacniacza. Szerokość i wysokość służą do określenia miejsca zajmowanego przez element amp na stronie.

Przykład

<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