Google AMP - Thuộc tính

Chương này sẽ thảo luận về tất cả các thuộc tính chung được sử dụng bởi các thành phần amp.

Danh sách các thuộc tính chung như sau:

  • fallback
  • heights
  • layout
  • media
  • noloading
  • on
  • placeholder
  • sizes
  • chiều rộng và chiều cao

thuộc tính dự phòng

Thuộc tính dự phòng chủ yếu được sử dụng khi trình duyệt không hỗ trợ phần tử được sử dụng hoặc có vấn đề với việc tải tệp hoặc có lỗi với tệp được sử dụng.

Ví dụ: bạn đang sử dụng amp-video và tệp phương tiện đang gặp sự cố trên trình duyệt, vì vậy trong những trường hợp như vậy, chúng tôi có thể chỉ định thuộc tính dự phòng và hiển thị thông báo rằng tệp phương tiện không thể phát hoặc không được trình duyệt hỗ trợ, thay vì hiển thị thông báo lỗi trên trang.

Dự phòng được sử dụng trên 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>

Hãy cho chúng tôi hiểu dự phòng hệ điều hành đang hoạt động bằng cách sử dụng một ví dụ:

Thí dụ

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

Đầu ra

Thuộc tính Heights

Thuộc tính này về cơ bản được hỗ trợ cho một bố cục đáp ứng. Bạn có thể sử dụng biểu thức phương tiện cho thuộc tính heights và nó áp dụng cho chiều cao của phần tử. Nó cũng lấy các giá trị phần trăm, vì vậy chiều cao được tính dựa trên phần trăm chiều rộng đã cho.

Thí dụ

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

Đầu ra

thuộc tính bố cục

AMP-Layout là một trong những tính năng quan trọng có sẵn trong google-amp. Amp Layout đảm bảo các thành phần amp được hiển thị đúng cách khi trang được tải mà không gây ra bất kỳ sự cố cuộn hoặc nhấp nháy nào. Nó cũng kiểm tra kết xuất trang trước khi bất kỳ tài nguyên từ xa nào khác như yêu cầu http cho hình ảnh, cuộc gọi dữ liệu được thực hiện.

Danh sách bố cục được hỗ trợ bởi amp như sau:

  • Không hiện diện
  • Container
  • fill
  • fixed
  • fixed-height
  • flex-item
  • intrinsic
  • nodisplay
  • Responsive

Bạn sẽ tìm hiểu chi tiết về điều tương tự trong chương Google AMP − Layout của hướng dẫn này.

Hãy hiểu hoạt động của layout = ”responsive” với sự trợ giúp của một ví dụ như minh họa -

Thí dụ

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

Đầu ra

Thuộc tính phương tiện

Thuộc tính này có thể được sử dụng trên hầu hết các thành phần amp. Nó cần một truy vấn phương tiện và nếu giá trị không khớp với thành phần sẽ không được hiển thị.

Hãy để chúng tôi hiểu hoạt động của thuộc tính media với sự trợ giúp của một ví dụ -

Thí dụ

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

Chúng tôi đã sử dụng thuộc tính media trên thẻ <amp-img> như hình dưới đây -

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

Lưu ý rằng hình ảnh sẽ không được hiển thị nếu chiều rộng của màn hình nhỏ hơn 600px. Chúng tôi sẽ sử dụng chế độ di động giả lập Google để kiểm tra ví dụ.

Đầu ra trên điện thoại thông minh

Chúng tôi đã kiểm tra trên thiết bị, hình ảnh không hiển thị vì chiều rộng của thiết bị nhỏ hơn 600px. Nếu chúng ta kiểm tra trên máy tính bảng, chúng ta nhận được kết quả như hình dưới đây:

Đầu ra trên IPAD

Thuộc tính Noloading

Các thành phần khuếch đại như <amp-img>, <amp-video>, <amp-facebook> hiển thị chỉ báo tải trước khi nội dung thực được tải và hiển thị cho người dùng.

Để ngừng hiển thị chỉ báo đang tải, chúng ta có thể sử dụng thuộc tính không tải như sau:

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

Trên thuộc tính

Thuộc tính on được sử dụng trên các phần tử để xử lý sự kiện và các hành động trên thành phần amp. Cú pháp để sử dụng trên thuộc tính như sau:

Cú pháp -

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

Các chi tiết được chuyển đến on thuộc tính như sau:

  • eventName- Điều này lấy tên của sự kiện có sẵn cho thành phần amp. Ví dụ: đối với các biểu mẫu, chúng tôi có thể sử dụng eventNames gửi thành công, gửi lỗi.

  • elementId- Điều này lấy id của phần tử mà sự kiện cần được gọi. Nó có thể là id của biểu mẫu mà chúng tôi muốn biết về thành công hay lỗi.

  • methodName - Điều này lấy tên của phương thức được gọi khi sự kiện xảy ra.

  • arg=value - Điều này nhận các đối số có dạng key = value được truyền vào phương thức.

Cũng có thể chuyển nhiều sự kiện cho thuộc tính On như sau:

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

Note - Nếu có nhiều sự kiện, chúng được chuyển cho thuộc tính on và được phân tách bằng dấu chấm phẩy (;).

Thuộc tính hành động

Về cơ bản, các hành động được sử dụng với thuộc tính on và cú pháp như sau:

on = "tab:elementid.hide;"

Chúng ta có thể chuyển nhiều hành động như sau:

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

Elementid là id của phần tử mà hành động sẽ được thực hiện.

Amp có một số sự kiện và hành động được xác định toàn cầu có thể được sử dụng trên bất kỳ thành phần amp nào và chúng tap events và các hành động là hide, show và togglevisibility.

Note - Nếu bạn muốn ẩn / hiện hoặc sử dụng chế độ ẩn trên bất kỳ thành phần html hoặc amp nào, bạn có thể sử dụng on=”tap:elementid.[hide/show/togglevisibility]”

Thuộc tính trình giữ chỗ

Thuộc tính trình giữ chỗ có thể được sử dụng trên bất kỳ phần tử html nào chẳng hạn như phần tử đầu vào và cũng có thể được sử dụng trên thành phần amp. Trình giữ chỗ là thứ đầu tiên sẽ được hiển thị trên trang và khi nội dung được tải, trình giữ chỗ sẽ bị xóa và được làm cho vô hình.

Trình giữ chỗ trên phần tử đầu vào

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

Trình giữ chỗ trên 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>

Thuộc tính kích thước

Điều này được sử dụng giống như thuộc tính heights. Giá trị là một biểu thức như hình dưới đây -

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

Thuộc tính Chiều rộng và Chiều cao

Chúng được sử dụng trên hầu hết các phần tử html và các thành phần amp. Chiều rộng và chiều cao được sử dụng để đề cập đến không gian mà phần tử amp chiếm trên trang.

Thí dụ

<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