Google AMP - หน้าถัดไป

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

ในการทำงานกับคอมโพเนนต์ amp-next-page เราต้องเพิ่มสคริปต์ต่อไปนี้ -

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

นอกจากนี้ amp-next-page ยังไม่เปิดใช้งานอย่างสมบูรณ์ดังนั้นเพื่อให้หน้าทดสอบใช้งานได้ให้เพิ่มเมตาแท็กต่อไปนี้ -

<meta name = "amp-experiments-opt-in" content = "amp-next-page">

ในการโหลดหน้าเว็บแบบไดนามิกเราต้องให้ page-urls แก่แท็ก script ประเภท =” application / json” ดังที่แสดงด้านล่าง -

<amp-next-page>
   <script type = "application/json">
      {

         "pages": [
            {
            "title": "Page 2",
            "image": "images/christmas1.jpg",
            "ampUrl": "ampnextpage1.html"
            },
            {
            "title": "Page 3",
            "image": "images/christmas1.jpg",
            "ampUrl": "ampnextpage2.html"
            }
         ]
      }
   </script>
</amp-next-page>

ในแท็กด้านบนเรากำลังพยายามโหลด 2 หน้า ampnextpage1.html และ ampnextpage2.html.

ตอนนี้ให้เราดูผลลัพธ์สุดท้าย ต้องเพิ่มเพจทั้งหมดที่ต้องโหลดลงในอาร์เรย์เพจที่มีชื่อเรื่องรูปภาพและ ampUrl

ตัวอย่าง

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Google Amp - Next Page</title>
      <link rel = "canonical" href = "ampnextpage.html">
      <meta name = "amp-experiments-opt-in" content = "amp-next-page">
      <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 src="https://cdn.ampproject.org/v0.js">
      </script>
      <script async custom-element = "amp-next-page" 
         src = "https://cdn.ampproject.org/v0/amp-next-page-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google Amp - Next Page</h1>
      <h1>Page 1</h1>
      <p>Start of page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>End of page 1</p>
      
      <amp-next-page>
         <script type = "application/json">
            {
               "pages": [
                  {
                     "title": "Page 2",
                     "image": "images/christmas1.jpg",
                     "ampUrl": "ampnextpage1.html"
                  },
                  {
                     "title": "Page 3",
                     "image": "images/christmas1.jpg",
                     "ampUrl": "ampnextpage2.html"
                  }
               ]
            }  
         </script>
      </amp-next-page>
   </body>
</html>

เอาต์พุต

คุณสามารถสังเกตได้ว่าเมื่อคุณเลื่อนหน้าจะแสดงหน้าถัดไปที่จะโหลดและ page-url ในแถบที่อยู่ก็เปลี่ยนไปด้วย