Google AMP - เรื่องราว
Amp-story เป็นส่วนประกอบของแอมป์ที่ใช้เพื่อแสดงเนื้อหาที่ทำให้ผู้ใช้มีส่วนร่วมกับเรื่องราว ตัวอย่างเช่นการใช้ชุดรูปภาพที่บอกเกี่ยวกับแบรนด์
ในการทำงานกับ amp-story เราจำเป็นต้องรวมสคริปต์ดังที่แสดงด้านล่าง -
<script async custom-element = "amp-story"
src = "https://cdn.ampproject.org/v0/amp-story-1.0.js">
</script>ในบทนี้ให้เราเข้าใจว่าเรื่องราวของแอมป์คืออะไรและทำงานอย่างไร สมมติว่าเรามีแกลเลอรีรูปภาพและต้องการแสดงสิ่งเดียวกันบนหน้า ในหน้าแอมป์เราสามารถทำให้มันดูสวยงามและโต้ตอบกับผู้ใช้โดยใช้องค์ประกอบเรื่องราวของแอมป์
รูปแบบของ amp-story tag มีลักษณะดังนี้ -
<amp-story standalone> ---> Main story Tag
<amp-story-page id = "page-1"> ---> Pages inside the story e.g page1
<amp-story-grid-layer template = "fill"> -->
Layers for the page1.You can have more than one layer.
//Add html elements here or amp components
</amp-story-grid-layer>
<amp-story-grid-layer template = "fill"> -->
Layers for the page1.You can have more than one layer.
//Add html elements here or amp components
</amp-story-grid-layer>
...
</amp-story-page>
<amp-story-page id = "page-2"> ---> Pages inside the story e.g page2
<amp-story-grid-layer template = "fill"> -->
Layers for the page2.You can have more than one layer.
//Add html elements here or amp components
</amp-story-grid-layer>
...
</amp-story-page>
...
</amp-story>มีการเพิ่มคุณสมบัติเพิ่มเติมสำหรับ amp-story ดังนี้ -
<amp-story standalone title = "My Story"
publisher = "The AMP Team"
publisher-logo-src = "publisherlogo image here"
poster-portrait-src = "poster portrait here"
poster-square-src = "poster square image here"
poster-landscape-src = "poster landscape image here">คุณลักษณะนี้ทำให้การเล่าเรื่องโดยใช้แอมป์โต้ตอบได้ดีมาก
โค้ดต่อไปนี้แสดงตัวอย่างการทำงานของ amp-story ผลลัพธ์เดียวกันจะแสดงสำหรับเดสก์ท็อปและโหมดมือถือ
ตัวอย่าง
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<script async custom-element = "amp-story" src = "https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<title>Google AMP - Story</title>
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale=1">
<link rel = "canonical" href = "/stories/introduction/amp_story_hello_world/">
<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-story {
font-family: Roboto, Helvetica, Arial, sans-serif;
}
amp-story-page * {
color: white;
text-align: center;
}
</style>
</head>
<body>
<amp-story standalone title = "Stories in AMP - Hello World" publisher = "AMP Project">
<amp-story-page id = "page-1">
<amp-story-grid-layer template = "fill">
<amp-img src = "images/christmas1.jpg"
width = "300" height = "250"
layout = "responsive">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template = "vertical">
<h1>Hello World</h1>
<p>This is an AMP Story.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id = "page-2">
<amp-story-grid-layer template = "fill">
<amp-img src = "images/christmas5.jpg"
width = "300" height = "250"
layout = "responsive">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template = "vertical">
<h1>Hello World</h1>
<p>This is an AMP Story.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id = "page-3">
<amp-story-grid-layer template = "fill">
<amp-img src = "images/christmas3.jpg"
width = "300" height = "250"
layout = "responsive">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template = "vertical">
<h1>Hello World</h1>
<p>This is an AMP Story.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id = "page-4">
<amp-story-grid-layer template = "fill">
<amp-img src = "images/christmas4.jpg"
width = "300" height="250"
layout = "responsive">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template = "vertical">
<h1>Hello World</h1>
<p>This is an AMP Story.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-bookend src = "ampstory.json" layout = "nodisplay">
</amp-story-bookend>
</amp-story>
<body>
</html>ampstory.json
{
"bookendVersion": "v1.0",
"shareProviders": [
"email",
"twitter",
"tumblr",
{
"provider": "facebook",
"app_id": "254325784911610"
}
],
"components": [
{
"type": "heading",
"text": "Introduction"
},
{
"type": "small",
"title": "Next Story is on Car Brands",
"url": "ampcarbrand.html",
"image": "images/audi.jpg"
}
]
}เอาต์พุตบนเดสก์ท็อป
นี่คือวิธีการแสดงส่วนเรื่องราว คุณยังสามารถเพิ่มวิดีโอหรือส่วนประกอบแอมป์อื่น ๆ เพื่อให้เรื่องราวโต้ตอบได้มากขึ้น
เมื่อถึงจุดสิ้นสุดของเรื่องจะแสดงสิ่งที่ให้ไว้ใน amp-bookend ดังที่แสดงด้านล่าง -
<amp-story-bookend
src = "ampstory.json" layout = "nodisplay">
</amp-story-bookend>เราได้มอบไฟล์ ampstory.json ให้กับ amp-bookend ไฟล์ json มีรายละเอียดของตัวอย่างของเรื่องถัดไปดังที่แสดงด้านล่าง เมื่อผู้ใช้คลิกที่จุดสามจุดที่แสดงทางด้านขวาหน้าจอต่อไปนี้จะปรากฏขึ้น -
มันให้ปุ่มเล่นซ้ำซึ่งจะโหลดเรื่องราวอีกครั้ง คุณสามารถคลิกที่รูปภาพของรถยนต์ซึ่งจะแสดงเรื่องราวของแบรนด์รถยนต์
ผลลัพธ์ในโหมดมือถือมีดังนี้ -
