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 ในแถบที่อยู่ก็เปลี่ยนไปด้วย