Google AMP - แอตทริบิวต์

บทนี้จะกล่าวถึงคุณลักษณะทั่วไปทั้งหมดที่ใช้โดยส่วนประกอบแอมป์

รายการคุณสมบัติทั่วไปมีดังนี้ -

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>

เอาต์พุต

คุณสมบัติความสูง

แอตทริบิวต์นี้ได้รับการสนับสนุนโดยทั่วไปสำหรับรูปแบบที่ตอบสนอง คุณสามารถใช้นิพจน์สื่อกับแอตทริบิวต์ heights และใช้กับความสูงขององค์ประกอบ นอกจากนี้ยังใช้ค่าเปอร์เซ็นต์ดังนั้นความสูงจะถูกคำนวณตามเปอร์เซ็นต์ความกว้างที่กำหนด

ตัวอย่าง

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

เอาต์พุต

คุณสมบัติสื่อ

แอตทริบิวต์นี้สามารถใช้ได้กับส่วนประกอบแอมป์ส่วนใหญ่ ต้องใช้แบบสอบถามสื่อและหากค่าไม่ตรงกับองค์ประกอบจะไม่แสดงผล

ให้เราเข้าใจการทำงานของแอตทริบิวต์สื่อด้วยความช่วยเหลือของตัวอย่าง -

ตัวอย่าง

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

เราใช้แอตทริบิวต์สื่อบนแท็ก <amp-img> ดังที่แสดงด้านล่าง -

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

โปรดทราบว่ารูปภาพจะไม่แสดงหากความกว้างของหน้าจอน้อยกว่า 600px เราจะใช้โหมดมือถือจำลอง Google เพื่อทดสอบตัวอย่าง

เอาต์พุตบนสมาร์ทโฟน

เราตรวจสอบบนอุปกรณ์แล้วไม่สามารถมองเห็นภาพได้เนื่องจากความกว้างของอุปกรณ์น้อยกว่า 600px หากเราตรวจสอบแท็บเล็ตเราจะได้ผลลัพธ์ตามที่แสดงด้านล่าง -

เอาต์พุตบน IPAD

แอตทริบิวต์ Noloading

ส่วนประกอบของแอมป์เช่น <amp-img>, <amp-video>, <amp-facebook> แสดงตัวบ่งชี้การโหลดก่อนที่เนื้อหาจริงจะโหลดและแสดงให้ผู้ใช้เห็น

หากต้องการหยุดแสดงตัวบ่งชี้การโหลดเราสามารถใช้แอตทริบิวต์ noloading ได้ดังนี้ -

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

ใน Attribute

แอตทริบิวต์ 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 คือรหัสขององค์ประกอบที่จะต้องดำเนินการ

แอมป์มีเหตุการณ์และการกระทำที่กำหนดทั่วโลกซึ่งสามารถใช้กับส่วนประกอบแอมป์ใดก็ได้และเป็นเช่นนั้น tap events และการกระทำคือ hide, show และ togglevisibility.

Note - หากคุณต้องการซ่อน / แสดงหรือใช้การสลับการมองเห็นในองค์ประกอบ html หรือ amp คุณสามารถใช้ได้ on=”tap:elementid.[hide/show/togglevisibility]”

แอตทริบิวต์ตัวยึดตำแหน่ง

แอตทริบิวต์ตัวยึดตำแหน่งสามารถใช้กับองค์ประกอบ html ใด ๆ เช่นองค์ประกอบอินพุตและยังสามารถใช้กับองค์ประกอบแอมป์ตัวยึดตำแหน่งเป็นสิ่งแรกที่จะแสดงบนเพจและเมื่อโหลดเนื้อหาแล้วตัวยึดจะถูกลบออกและ ทำให้มองไม่เห็น

ตัวยึดตำแหน่งในองค์ประกอบอินพุต

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

ตัวยึดตำแหน่งในองค์ประกอบแอมป์

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

ขนาดแอตทริบิวต์

ใช้เช่นเดียวกับแอตทริบิวต์ heights ค่าเป็นนิพจน์ดังแสดงด้านล่าง -

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

แอตทริบิวต์ความกว้างและความสูง

ใช้กับองค์ประกอบ html และส่วนประกอบแอมป์เกือบทั้งหมด ความกว้างและความสูงใช้เพื่อระบุพื้นที่ที่องค์ประกอบแอมป์ครอบครองบนหน้า

ตัวอย่าง

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive">
</amp-img>