Google AMP - รายการ

Amp-list เป็นส่วนประกอบของแอมป์ที่เรียกจุดสิ้นสุด CORS json และแสดงข้อมูลในรูปแบบของไฟล์ json ภายในเทมเพลต ให้เราเข้าใจสิ่งนี้ด้วยความช่วยเหลือของตัวอย่างการทำงาน

ในการทำงานกับ amp-list เราจำเป็นต้องรวมสคริปต์ต่อไปนี้ -

<script async custom-element = "amp-list" 
   src = "https://cdn.ampproject.org/v0/amp-list-0.1.js">
</script>

นี่คือรูปแบบของ amp-list tag -

<amp-list width = "auto" height = "100" 
layout = "fixed-height" src = "amplist.json" class = "m1">
   <template type = "amp-mustache">
      <div class = "images_for_display">
         <amp-img width = "150"
            height = "100"
            alt = "{{title}}"
            src = "{{url}}">
         </amp-img>
      </div>
   </template>
</amp-list>

src ที่ใช้สำหรับ amp-list คือไฟล์ json ซึ่งมีรายละเอียดที่จะแสดงรายการ เราสามารถใช้แท็ก html ปกติหรือ amp-components ภายใน amp-list เพื่อแสดงข้อมูลจากไฟล์ json ชนิดแม่แบบ amp-mustache ใช้สำหรับการผูกข้อมูลที่จะแสดงข้อมูล

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

ตัวอย่าง

<!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 List</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-list" 
         src = "https://cdn.ampproject.org/v0/amp-list-0.1.js">
      </script>
      
      <script async custom-template = "amp-mustache" 
         src ="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
      </script>
      
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp List</h3>
      <amp-list width = "auto" height = "100" 
         layout = "fixed-height" src = "amplist.json" class = "m1">
         <template type = "amp-mustache">
            <div class = "images_for_display">
               <amp-img width = "150"
                  height = "100"
                  alt = "{{title}}"
                  src = "{{url}}">
               </amp-img>
            </div>
         </template>
      </amp-list>
   </body>
</html>

เอาต์พุต

ผลลัพธ์ของตัวอย่างการทำงานที่แสดงด้านบนเป็นดังที่แสดงด้านล่าง -

ไฟล์ json ที่ใช้ในตัวอย่างการทำงานที่ระบุข้างต้นแสดงไว้ที่นี่ -

{
   "items": [
      {
         "title": "Christmas Image 1",
         "url": "images/christmas1.jpg"
      },
      {
         "title": "Christmas Image 2",
         "url": "images/christmas2.jpg"
      },
      {
         "title": "Christmas Image 3",
         "url": "images/christmas3.jpg"
      },
      {
         "title": "Christmas Image 4",
         "url": "images/christmas4.jpg"
      }
   ]
}

เราสามารถรีเฟรชรายการโดยใช้เหตุการณ์ในรายการแอมป์ดังที่แสดงในรหัสที่ระบุด้านล่าง -

ตัวอย่าง

<!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 List</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-list" 
         src = "https://cdn.ampproject.org/v0/amp-list-0.1.js">
      </script>
   
      <script async custom-template = "amp-mustache" 
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
      </script>
   
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: right;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp List</h3>
      <button on = "tap:amplist.refresh">Refresh Images</button>
      
      <amp-list id = "amplist" width = "auto" height = "100" 
         layout = "fixed-height" src = "amplist.json" class = "m1">
      <template type = "amp-mustache">
         <div class = "images_for_display">
            <amp-img width = "150"
               height = "100"
               alt = "{{title}}"
               src = "{{url}}"></amp-img>
         </div>
      </template>
      </amp-list>
   </body>
</html>

เอาต์พุต

ผลลัพธ์สำหรับตัวอย่างการทำงานที่ให้ไว้ข้างต้นเป็นดังที่แสดงไว้ที่นี่ -

มีการเพิ่มปุ่มซึ่งเมื่อคลิกเรียกการดำเนินการรีเฟรชโดยใช้เหตุการณ์ที่แสดงด้านล่าง -

<button on = "tap:amplist.refresh">
   Refresh Images
</button> 
//amplist is the id used for amp-list

คลิกที่ปุ่มไฟล์ json จะถูกเรียกอีกครั้งและโหลดเนื้อหา หากมีภาพที่โหลดแล้วภาพเหล่านั้นจะถูกแคช