Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

หน้านี้ได้รับการแปลโดย Cloud Translation API

หน้า AMP ที่เป็น Canonical ที่สวยงามและอินเทอร์แอกทีฟ

AMP ช่วยให้สร้างหน้าเว็บที่เชื่อถือได้ ตอบสนองตามอุปกรณ์ และมีประสิทธิภาพมากขึ้นได้ง่ายขึ้น AMP ช่วยให้คุณสร้างการโต้ตอบทั่วไปในเว็บไซต์ได้โดยไม่ต้องเขียน JavaScript เว็บไซต์ amp.dev มีเทมเพลตสําหรับการเริ่มต้นใช้งานที่รวดเร็วและออกแบบไว้ล่วงหน้า

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะสร้างหน้า AMP ที่ปรับเปลี่ยนตามอุปกรณ์และสวยงามที่ปรับเปลี่ยนตามอุปกรณ์ได้ทั้งหมด ซึ่งรวมฟีเจอร์มากมายของ AMP & #39 และคอมโพเนนต์ที่ขยาย

การนําทางที่ปรับเปลี่ยนตามอุปกรณ์
ภาพหน้าปกฮีโร่แบบเต็มหน้า
รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์
วิดีโอที่มีการเล่นอัตโนมัติ
การฝัง เช่น Instagram
การดําเนินการและตัวเลือก
การผูกข้อมูลกับ amp-bind
เอฟเฟกต์ภาพที่มี amp-fx-collection และ amp-animation

สิ่งที่ต้องมี

เว็บเบราว์เซอร์ที่ทันสมัย
Node.js และเครื่องมือแก้ไขข้อความหรือการเข้าถึง CodePen หรือสนามเด็กเล่นออนไลน์ที่คล้ายกัน
ความรู้เบื้องต้นเกี่ยวกับ HTML, CSS, JavaScript และเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ของ Google Chrome

เครื่องมือสําหรับการแสดงเนื้อหา

เราจะใช้ Node.js เพื่อเรียกใช้เซิร์ฟเวอร์ HTTP ในเครื่องเพื่อแสดงหน้า AMP ไปที่เว็บไซต์ Node.js เพื่อดูวิธีติดตั้ง

เครื่องมือของเราที่เลือกแสดงเนื้อหาในพื้นที่จะแสดง ซึ่งเป็นเซิร์ฟเวอร์เนื้อหาคงที่แบบ Node.js หากต้องการติดตั้ง ให้เรียกใช้คําสั่งต่อไปนี้

npm install -g serve

ดาวน์โหลดเทมเพลตจาก amp.dev

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

ไปที่เทมเพลต AMP และดาวน์โหลดโค้ดสําหรับ " Simple Article" สําหรับ "รูปภาพสัตว์ที่ดีที่สุดแห่งปี'

การเรียกใช้โค้ดเทมเพลต

แตกเนื้อหาของไฟล์ ZIP

เรียกใช้คําสั่ง serve ในโฟลเดอร์ article เพื่อแสดงไฟล์ในเครื่อง

ไปที่ http://localhost:5000/templates/article.amp.html ในเบราว์เซอร์ (พอร์ตอาจเป็น 3000 หรือหมายเลขที่แตกต่างกันขึ้นอยู่กับเวอร์ชันของ serve ตรวจสอบคอนโซลเพื่อค้นหาที่อยู่ที่แน่นอน)

ระหว่างนั้นเราลองมาเปิดเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome และสลับโหมดอุปกรณ์ด้วย

ตัดโค้ดเทมเพลต

ณ จุดนี้ เราได้นั่งร่างหน้า AMP ที่ใช้งานได้เป็นส่วนใหญ่ แต่วัตถุประสงค์ของ Codelab นี้คือการเรียนรู้และฝึกปฏิบัติ ดังนั้น...

ลบทุกอย่างใน <body></body>

ตอนนี้เราเหลือหน้าว่างซึ่งมีเพียงโค้ด Boilerplate บางรายการเท่านั้น:

ตลอด Codelab นี้ คุณจะต้องเพิ่มคอมโพเนนต์ต่างๆ ลงในหน้าว่างนี้เพื่อสร้างเทมเพลตใหม่ที่มีฟังก์ชันเพิ่มขึ้น

หน้า AMP คือหน้า HTML ที่มีแท็กเพิ่มเติมและมีข้อจํากัดบางประการเพื่อประสิทธิภาพที่เชื่อถือได้

แม้ว่าแท็กส่วนใหญ่ในหน้า AMP จะเป็นแท็ก HTML ปกติ แต่ระบบจะแทนที่แท็ก HTML บางรายการด้วยแท็กเฉพาะสําหรับ AMP องค์ประกอบที่กําหนดเองเหล่านี้ซึ่งเรียกว่าคอมโพเนนต์ AMP HTML ทําให้รูปแบบทั่วไปสามารถนําไปใช้งานได้อย่างมีประสิทธิภาพได้อย่างง่ายดาย

ไฟล์ AMP HTML ที่เรียบง่ายที่สุดแบบนี้ (บางครั้งเรียกว่า Boilerplate)

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.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 src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

ลองดูโค้ดของหน้าเว็บเปล่าที่คุณสร้างขึ้นระหว่างการตั้งค่า ซึ่งประกอบด้วย Boilerplate นี้และมีแท็กเพิ่มเติมต่างๆ ที่สําคัญคือแท็ก <style amp-custom> ที่มี CSS แบบย่อมากมาย

AMP ไม่ได้ให้ความเห็นเกี่ยวกับการออกแบบและไม่ได้บังคับใช้ชุดรูปแบบบางอย่าง คอมโพเนนต์ AMP ส่วนใหญ่มีการจัดรูปแบบพื้นฐาน โดยจะปล่อยให้ผู้เขียนหน้าเว็บระบุ CSS ที่กําหนดเองของตนเอง นั่นคือสิ่งที่ <style amp-custom> จะเข้ามามีบทบาท

อย่างไรก็ตาม เทมเพลต AMP มีรูปแบบ CSS ที่ได้รับการแสดงความคิดเห็นซึ่งได้รับการออกแบบอย่างสวยงาม ข้ามเบราว์เซอร์ และตอบสนองตามอุปกรณ์เพื่อช่วยให้คุณสร้างหน้า AMP สวยๆ ได้อย่างรวดเร็ว โค้ดเทมเพลตที่คุณดาวน์โหลดมีรูปแบบ CSS ที่แสดงความคิดเห็นเหล่านี้ใน <style amp-custom>.

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

เราจะรับความช่วยเหลือจากหน้าคอมโพเนนต์ UI เริ่มต้นของ AMP แต่จะไม่เจาะลึกเกี่ยวกับรายละเอียดการติดตั้งใช้งาน โดยขั้นตอนในภายหลังใน Codelab จะมอบโอกาสมากมายให้คุณทําเช่นนั้น

ไปที่ https://ampstart.com/components#navigation และคัดลอกโค้ด HTML ที่เตรียมไว้สําหรับ RESPONSIVE MENUBAR ลงใน body ของหน้าเว็บ

โค้ดที่ AMP Start มีให้จะมีโครงสร้างคลาส HTML และ CSS ที่จําเป็นเพื่อใช้แถบนําทางที่ปรับเปลี่ยนตามอุปกรณ์สําหรับหน้าเว็บ

ลองใช้เลย: ปรับขนาดหน้าต่างเพื่อดูการตอบสนองของขนาดหน้าจอต่างๆ

โค้ดนี้ใช้คําค้นหาสื่อ CSS และคอมโพเนนต์ AMP amp-sidebar และ amp-accordion

เพิ่มรูปภาพและชื่อหลัก

นอกจากนี้ AMP Start ยังมีข้อมูลโค้ดที่พร้อมใช้งานสําหรับรูปภาพและชื่อที่สวยงามและตอบสนองตามอุปกรณ์ด้วย

ไปที่ https://ampstart.com/components#media แล้วคัดลอกโค้ด HTML ที่จัดเตรียมให้กับ Fullpage Hero ลงในโค้ดหลัง  comment ใน body.

มาอัปเดตรูปภาพและชื่อกัน

คุณอาจสังเกตเห็นจากแท็ก amp-img ในข้อมูลโค้ดเป็น 2 แท็กที่แตกต่างกัน รูปภาพแรกใช้สําหรับความกว้างที่เล็กกว่า และควรชี้ไปที่รูปภาพที่มีความละเอียดน้อยลง ขณะที่อีกรูปหนึ่งใช้สําหรับจอแสดงผลที่ใหญ่กว่า ซึ่งจะสลับโดยอัตโนมัติตามแอตทริบิวต์ media ซึ่ง AMP รองรับในองค์ประกอบ AMP ทั้งหมด

อัปเดต src, width และ height เป็นรูปภาพอื่นและชื่อเป็น "การเดินป่าที่สวยงามที่สุดในภาคตะวันตกเฉียงเหนือของแปซิฟิก" โดยแทนที่ <figure>...</figure> ที่มีอยู่ด้วย

<figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <amp-img width="600" height="900" layout="responsive" src="https://unsplash.it/600/900?image=1003" media="(max-width: 415px)"></amp-img>
    <amp-img height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003" media="(min-width: 416px)"></amp-img>
    <figcaption class="absolute top-0 right-0 bottom-0 left-0">
      <header class="p3">
        <h1 class="ampstart-fullpage-hero-heading mb3">
        <span class="ampstart-fullpage-hero-heading-text">
          Most Beautiful Hikes in the Pacific Northwest
        </span>
      </h1>
        <span class="ampstart-image-credit h4">
        By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
      </span>
      </header>
      <footer class="absolute left-0 right-0 bottom-0">
        <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content">Read more</a>
      </footer>
    </figcaption>
</figure>

มาดูหน้านี้กัน

สรุป

คุณสร้าง Shell สําหรับหน้าเว็บ รวมถึงการนําทางที่ปรับเปลี่ยนตามอุปกรณ์ รวมทั้งรูปภาพหลักและชื่อ
ดูข้อมูลเพิ่มเติมเกี่ยวกับเทมเพลต AMP และใช้คอมโพเนนต์ UI เริ่มต้นของ AMP เพื่อรวม Shell ของหน้าเว็บอย่างรวดเร็ว

ดูโค้ดที่สมบูรณ์ของส่วนนี้ได้ที่ http://codepen.io/aghassemi/pen/RpRdzV

ในส่วนนี้ เราจะเพิ่มรูปภาพ วิดีโอ การฝัง และข้อความที่ปรับเปลี่ยนตามอุปกรณ์ลงในหน้าของเรา

มาเพิ่มองค์ประกอบ main ที่โฮสต์เนื้อหาของหน้าเว็บกัน เราจะเพิ่มต่อท้าย body:

<main id="content">

</main>

เพิ่มส่วนหัวและย่อหน้า

เพิ่มโค้ดต่อไปนี้ภายใน main

<h2 class="px3 pt2 mb2">Photo Gallery</h2>
<p class="ampstart-dropcap mb4 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

เนื่องจาก AMP เป็นเพียง HTML โค้ดนี้จึงไม่พิเศษอะไร ยกเว้นชื่อคลาส CSS เหล่านั้น px3, mb2 และ ampstart-dropcap คืออะไร มาจากไหน

ชั้นเรียนเหล่านี้ไม่ได้เป็นส่วนหนึ่งของ AMP HTML เทมเพลต AMP เริ่มต้นใช้ Basscss เพื่อมอบชุดเครื่องมือ CSS ระดับต่ําและเพิ่มคลาสเฉพาะสําหรับ AMP Start

ในข้อมูลโค้ดนี้ px3 และ mb2 จะกําหนดโดย Basscss และแปลเป็น ระยะห่างด้านซ้าย-ขวา และระยะขอบล่างตามลําดับ ampstart-dropcap ระบุโดย AMP Start และทําให้ตัวอักษรตัวแรกของย่อหน้าใหญ่ขึ้น

คุณสามารถดูเอกสารประกอบสําหรับคลาส CSS ที่กําหนดไว้ล่วงหน้าเหล่านี้ได้ที่ http://basscss.com/ และ https://ampstart.com/components

มาดูกันว่าหน้าตาเป็นอย่างไร

เพิ่มรูปภาพ

การทําให้หน้าที่ปรับเปลี่ยนตามอุปกรณ์เป็นเรื่องง่ายใน AMP ในหลายกรณี การทําให้คอมโพเนนต์ AMP ปรับเปลี่ยนตามอุปกรณ์ทําได้ง่ายๆ เพียงเพิ่มแอตทริบิวต์ layout="responsive" amp-img ยังรองรับ srcset เพื่อระบุรูปภาพที่แตกต่างกันสําหรับความกว้างของวิวพอร์ตและความหนาแน่นของพิกเซลต่างๆ ซึ่งคล้ายกับแท็ก img ของ HTML

เพิ่ม amp-img ใน main

<amp-img 
  layout="responsive" width="1080" height="720"
  srcset="https://unsplash.it/1080/720?image=1043 1080w, https://unsplash.it/720/480?image=1043 720w" 
  alt="Photo of mountains and trees landscape">
</amp-img>

ด้วยโค้ดนี้ เราจะสร้างรูปภาพที่ตอบสนองตามอุปกรณ์ด้วยการระบุ layout="responsive" และการระบุ width และ height.

ทําไมฉันถึงต้องระบุความกว้างและความสูงเมื่อใช้เลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์

เหตุผล 2 ข้อ ได้แก่

AMP จะใช้ความกว้างและความสูงเพื่อคํานวณสัดส่วนภาพ และรักษาความกว้างและความสูงอย่างเหมาะสมเมื่อมีการเปลี่ยนแปลงความกว้างเพื่อให้พอดีกับคอนเทนเนอร์ระดับบนสุด
AMP บังคับใช้การปรับขนาดแบบคงที่สําหรับองค์ประกอบทั้งหมดเพื่อให้ประสบการณ์ของผู้ใช้ที่ดี (ไม่มีการข้ามหน้าเว็บ) และเพื่อกําหนดขนาดและตําแหน่งขององค์ประกอบแต่ละรายการเพื่อวางหน้าเว็บก่อนที่จะดาวน์โหลดทรัพยากร

มาดูหน้านี้กัน

เพิ่มวิดีโอเล่นอัตโนมัติ

AMP รองรับโปรแกรมเล่นวิดีโอมากมาย เช่น YouTube และ Vimeo AMP มีเอลิเมนต์ video5 ของ HTML5 ของตนเองในคอมโพเนนต์แบบขยายของ amp-video โปรแกรมเล่นวิดีโอเหล่านี้บางส่วน ซึ่งรวมถึง amp-video และ amp-youtube รองรับการเล่นอัตโนมัติแบบปิดเสียงในอุปกรณ์เคลื่อนที่ด้วย

amp-video จะกลายเป็นโฆษณาที่ปรับเปลี่ยนตามอุปกรณ์ด้วยการเพิ่ม layout="responsive" ก็ได้ ซึ่งคล้ายกับ amp-img

มาเพิ่มวิดีโอเล่นอัตโนมัติลงในหน้าเว็บกัน

เพิ่มย่อหน้าและองค์ประกอบ amp-video ต่อไปนี้ลงใน main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-video 
  layout="responsive" width="1280" height="720"
  autoplay controls loop
  src="https://storage.googleapis.com/ampconf-76504.appspot.com/Bullfinch%20-%202797.mp4">
</amp-video>

ประสบการณ์ของผู้ใช้วิดีโอที่ยอดเยี่ยมสําหรับหน้า AMP ทุกหน้า: AMP มอบประสบการณ์ของผู้ใช้ที่สอดคล้องกันในการเล่นอัตโนมัติในโปรแกรมเล่นวิดีโอที่รองรับโปรแกรมเล่น ประสบการณ์ของผู้ใช้ในการเล่นอัตโนมัติแบบ AMP แตกต่างจากแบบ HTML5 เนทีฟและจะมีการปรับปรุง เช่น การเล่น/หยุดชั่วคราวอัตโนมัติ โดยอิงตามการมองเห็นบางส่วน การแตะเพื่อเปิดเสียง ภาพเคลื่อนไหวแบบปิดเสียงที่ปิดเสียง และการซ่อน/การแสดงการควบคุมวิดีโอโดยอัตโนมัติ

มาลองดูสิ่งต่อไปนี้

เพิ่มการฝัง

AMP มีคอมโพเนนต์แบบขยายสําหรับการฝังของบุคคลที่สามจํานวนมาก เช่น Twitter และ Instagram สําหรับการฝังที่ไม่มีคอมโพเนนต์ AMP จะมี amp-iframe เสมอ

มาเพิ่ม Instagram ลงในหน้าของเรากัน

amp-instagram ไม่ได้เป็นคอมโพเนนต์ในตัวที่ต่างจาก amp-img และ amp-video แท็กการนําเข้าสคริปต์ต้องรวมไว้อย่างชัดแจ้งใน head ของหน้า AMP ก่อนจึงจะใช้คอมโพเนนต์ได้

Boilerplate ของ AMP Start ที่เราใช้ประกอบด้วยแท็กสคริปต์การนําเข้าจํานวนมาก มองหาจุดเริ่มต้นของแท็ก head และตรวจสอบว่าได้ป้อนสคริปต์สคริปต์การนําเข้าดังต่อไปนี้แล้ว

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

เพิ่มย่อหน้าและองค์ประกอบ amp-instagram ต่อไปนี้ลงใน main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>
    
<amp-instagram
   layout="responsive" width="566" height="708"
   data-shortcode="BJ_sPxzAGyg">
</amp-instagram>

มาลองดูสิ่งต่อไปนี้

ตอนนี้เนื้อหาก็น่าจะเพียงพอแล้ว

สรุป

คุณได้เรียนรู้เกี่ยวกับคอมโพเนนต์ที่ปรับเปลี่ยนตามอุปกรณ์ใน AMP แล้ว
คุณเพิ่มเนื้อหาสื่อและข้อความได้หลายประเภท

ดูโค้ดที่สมบูรณ์ของส่วนนี้ได้ที่ http://codepen.io/aghassemi/pen/OpXGoa

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

แม้ว่า AMP จะไม่รองรับ JavaScript ที่กําหนดเอง แต่ยังคงแสดงองค์ประกอบพื้นฐานจํานวนมากเพื่อรับและจัดการการดําเนินการของผู้ใช้

เพิ่มภาพหมุน

การมีรูปภาพทั้งหมดสําหรับหน้า AMP ที่เน้นรูปภาพซึ่งแสดงให้เห็นในหน้าจะไม่สร้างประสบการณ์ที่ยอดเยี่ยมแก่ผู้ใช้ โชคดีที่เราสามารถใช้ amp-carousel เพื่อสร้างสไลด์แบบปัดดูในแนวนอนได้

ก่อนอื่น ให้ตรวจสอบว่าแท็กสคริปต์ amp-carousel รวมอยู่ใน head

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

ตอนนี้มาเพิ่มamp-carouselประเภทslidesที่ปรับเปลี่ยนตามอุปกรณ์ที่มีรูปภาพหลายๆ รูปให้กับ main: กัน

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-carousel 
  layout="responsive" width="1080" height="720"
  type="slides">

    <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>
</amp-carousel>

type="slides" ช่วยให้เห็นรูปภาพได้ครั้งละ 1 ภาพเท่านั้น และช่วยให้ผู้ใช้ปัดผ่านรูปภาพได้

สําหรับรูปภาพภายในภาพหมุน เราใช้ layout="fill" เนื่องจากภาพสไลด์จะเติมขนาดด้วยองค์ประกอบย่อยเสมอ จึงไม่จําเป็นต้องระบุเลย์เอาต์อื่นที่ต้องการความกว้างและความสูง

มาลองใช้แล้วดูว่าจะมีลักษณะดังนี้

เพิ่มภาพหมุนภาพขนาดย่อ

มาเพิ่มคอนเทนเนอร์ที่เลื่อนได้ในแนวนอนสําหรับภาพขนาดย่อสําหรับรูปภาพเหล่านี้กัน เราจะใช้ <amp-carousel> อีกครั้ง แต่จะไม่มี type="slides" และเลย์เอาต์แบบความสูงคงที่

เพิ่มค่าต่อไปนี้หลังองค์ประกอบ amp-carousel ก่อนหน้า

<amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

</amp-carousel>

โปรดทราบว่าสําหรับภาพขนาดย่อ เราเพิ่งใช้ layout="fixed" และรูปภาพเวอร์ชันความละเอียดต่ํา

มาลองดูสิ่งต่อไปนี้

เปลี่ยนรูปภาพเมื่อผู้ใช้แตะภาพขนาดย่อ

ในการดําเนินการนี้ เราต้องเชื่อมโยงเหตุการณ์อย่างเช่น tap เข้ากับการดําเนินการ เช่น การเปลี่ยนสไลด์

event: เราใช้แอตทริบิวต์ on เพื่อติดตั้งเครื่องจัดการเหตุการณ์ในองค์ประกอบหนึ่ง และระบบจะรองรับเหตุการณ์ tap ในทุกองค์ประกอบ

action: amp-carousel แสดงการดําเนินการ goToSlide(index=INTEGER) ที่เราเรียกใช้ได้จากเครื่องจัดการเหตุการณ์การแตะของภาพขนาดย่อแต่ละภาพ

เมื่อเราทราบเกี่ยวกับเหตุการณ์และการกระทําแล้ว ก็ถึงเวลานํามารวมเข้าด้วยกัน

ก่อนอื่น เราต้องให้ id แก่ภาพหมุน เพื่อให้เราสามารถอ้างอิงจากเครื่องจัดการเหตุการณ์การแตะในภาพขนาดย่อ

แก้ไขโค้ดที่มีอยู่เพื่อเพิ่มแอตทริบิวต์ id ลงในภาพสไลด์ (รายการแรก)

<amp-carousel 
  id="imageSlides"
  type="slides"

  ....

มาติดตั้งเครื่องจัดการเหตุการณ์ (on="tap:imageSlides.goToSlide(index=<slideNumber>)")" ในภาพขนาดย่อแต่ละภาพกัน)

<amp-img on="tap:imageSlides.goToSlide(index=0)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=1)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=2)" role="button" tabindex="1" layout="fixed" ...
...

โปรดทราบว่าเราต้องมอบ tabindex และตั้งค่า ARIA role สําหรับการช่วยเหลือพิเศษด้วย

แค่เพียงเท่านั้น ตอนนี้การแตะภาพขนาดย่อแต่ละภาพจะแสดงรูปภาพที่ตรงกันในภาพสไลด์

ไฮไลต์ภาพขนาดย่อเมื่อผู้ใช้แตะ

จะทําได้ไหม ดูเหมือนว่าจะไม่มีการทํางานใดๆ ในการเปลี่ยนแปลงคลาส CSS สําหรับองค์ประกอบที่จะเรียกใช้จากเครื่องจัดการเหตุการณ์การแตะ แล้วจะไฮไลต์ภาพขนาดย่อที่เลือกได้อย่างไร

<amp-selector> ช่วยเหลือคุณ

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

สิ่งที่ amp-selector ทํานั้นค่อนข้างง่ายแต่มีประสิทธิภาพ:

amp-selector อาจมีองค์ประกอบ HTML ที่กําหนดเองหรือองค์ประกอบ AMP ใดก็ได้
องค์ประกอบสืบทอดของ amp-selector จะกลายเป็นตัวเลือกได้หากแอตทริบิวต์ option=<value>
เมื่อผู้ใช้แตะองค์ประกอบที่เป็นตัวเลือก amp-selector เพียงเพิ่มแอตทริบิวต์ selected ในองค์ประกอบนั้น (และนําองค์ประกอบดังกล่าวออกจากองค์ประกอบตัวเลือกอื่นๆ ในโหมดการเลือกเดียว)
คุณจัดรูปแบบองค์ประกอบที่เลือกใน CSS ที่กําหนดเองได้โดยกําหนดเป้าหมายแอตทริบิวต์ selected ด้วยตัวเลือกแอตทริบิวต์ CSS

มาดูวิธีที่ช่วยให้เราบรรลุเป้าหมายนี้กัน

เพิ่มแท็กสคริปต์สําหรับ amp-selector ใน head

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

รวมภาพหมุนของภาพขนาดย่อไว้ใน amp-selector
ทําให้ภาพขนาดย่อทุกภาพเป็นตัวเลือกด้วยการเพิ่มแอตทริบิวต์ option=<value>
สร้างภาพขนาดย่อแรกให้เป็นรายการเริ่มต้นด้วยการเพิ่มแอตทริบิวต์ selected

<amp-selector>

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected on="tap:imageSlides.goToSlide(index=0)" ...
      
    <amp-img option=1 on="tap:imageSlides.goToSlide(index=1)" ...

    ...

  </amp-carousel>

</amp-selector>

ตอนนี้เราต้องเพิ่มการจัดรูปแบบเพื่อไฮไลต์ภาพขนาดย่อที่เลือก

เพิ่ม CSS ที่กําหนดเองต่อไปนี้ใน <style amp-custom> หลังจาก Boilerplate ของ CSS ย่อมาจาก AMP Start

<style amp-custom>
...

/* low opacity for non-selected thumbnails */
amp-selector amp-img[option] {
  opacity: 0.4;
}

/* normal opacity for the selected thumbnail */
amp-selector amp-img[option][selected] {
  opacity: 1;
}

</style>

มาลองดูสิ่งต่อไปนี้

ถูกต้องแล้ว แต่คุณสังเกตเห็นข้อบกพร่องไหม

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

ในส่วนถัดไป เราจะมาดูวิธีกัน

สรุป

คุณได้เรียนรู้เกี่ยวกับภาพหมุนประเภทต่างๆ และวิธีใช้งาน
คุณใช้การดําเนินการและเหตุการณ์ AMP เพื่อเปลี่ยนสไลด์ที่มองเห็นในภาพหมุนเมื่อผู้ใช้แตะภาพขนาดย่อ
คุณได้เรียนรู้เกี่ยวกับ amp-selector รวมถึงวิธีการใช้เป็นองค์ประกอบสําคัญของกรณีการใช้งานที่น่าสนใจ

ดูโค้ดที่สมบูรณ์ของส่วนนี้ได้ที่ http://codepen.io/aghassemi/pen/gmMJMy

ในส่วนนี้ เราจะใช้ amp-bind เพื่อปรับปรุงการโต้ตอบกับแกลเลอรีรูปภาพจากส่วนก่อนหน้า

`amp-bind` คืออะไร

คอมโพเนนต์ AMP หลัก amp-bind ให้คุณสร้างการโต้ตอบที่กําหนดเองด้วยการเชื่อมโยงข้อมูลและนิพจน์

amp-bind มี 3 ส่วนสําคัญดังนี้

สถานะ
การเชื่อมโยง
การกลายพันธุ์

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

การเชื่อมโยงเป็นนิพจน์ที่เชื่อมโยงรัฐกับแอตทริบิวต์ HTML หรือเนื้อหาขององค์ประกอบ

การเปลี่ยนแปลงคือการดําเนินการเปลี่ยนค่าของรัฐที่เกิดจากการดําเนินการหรือเหตุการณ์ของผู้ใช้บางอย่าง

ประสิทธิภาพของ amp-bind จะเริ่มขึ้นเมื่อการกลายพันธุ์: คอมโพเนนต์ทั้งหมดที่มีการเชื่อมโยงไปยังสถานะดังกล่าวจะได้รับการแจ้งเตือน และจะอัปเดตตัวเองโดยอัตโนมัติเพื่อให้สอดคล้องกับสถานะใหม่

มาดูการใช้งานจริงกัน

ใช้ `amp-bind` เพื่อนําแกลเลอรีรูปภาพมาใช้อีกครั้ง

ก่อนหน้านี้ เราใช้การทํางานแบบ AMP (เช่น goToSlide()) เพื่อเชื่อมโยงภาพสไลด์แบบเต็มกับเหตุการณ์ tap ในภาพขนาดย่อ และใช้ amp-selector เพื่อไฮไลต์ภาพขนาดย่อที่เลือก

มาดูวิธีนําโค้ดนี้ไปใช้งานซ้ําโดยใช้แนวทาง amp-bind ในการเชื่อมโยงข้อมูลกัน

แต่ก่อนที่เราจะเริ่มเขียนโค้ด ลองออกแบบแนวทางของเรากัน

1. รัฐของเราคืออะไร

ในตัวอย่างของเรา ค่าเดียวที่เราสนใจคือหมายเลขสไลด์ปัจจุบัน ดังนั้น selectedSlide จึงเป็นรัฐของเรา

2. โปรดระบุผลผูกพัน

มีอะไรเปลี่ยนแปลงบ้างเมื่อ selectedSlide เปลี่ยนแปลง

slide ของภาพหมุนแบบเต็มที่แสดง:

<amp-carousel [slide]="selectedSlide" ...

รายการ selected ใน amp-selector ต้องมีการเปลี่ยนแปลงเช่นกัน การดําเนินการนี้จะแก้ไขข้อบกพร่องที่เราพบในส่วนก่อนหน้านี้

<amp-selector [selected]="selectedSlide" ...

3. การเปลี่ยนแปลงของเราคืออะไร

เมื่อใดที่ต้องเปลี่ยน selectedSlide

เมื่อผู้ใช้เปลี่ยนเป็นสไลด์ใหม่ในภาพหมุนแบบเต็มรูปภาพด้วยการปัด ให้ทําดังนี้

<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...

เมื่อผู้ใช้เลือกภาพขนาดย่อ

<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

มาใช้ AMP.setState เพื่อกลายพันธุ์กัน ซึ่งหมายความว่าเราจะไม่ต้องใช้โค้ด on="tap:imageSlides.goToSlide(index=n)" ทั้งหมดที่อยู่ในภาพขนาดย่ออีกต่อไป

มาเริ่มกันเลย

เพิ่มแท็กสคริปต์สําหรับ amp-bind ใน head

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

แทนที่โค้ดของแกลเลอรีที่มีอยู่ด้วยแนวทางใหม่ ดังนี้

<amp-carousel [slide]="selectedSlide" on="slideChange:AMP.setState({selectedSlide:event.index})" type="slides" id="imageSlides" layout="responsive" width="1080" height="720">

  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>

</amp-carousel>


<amp-selector [selected]="selectedSlide" on="select:AMP.setState({selectedSlide:event.targetOption})">

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=1 src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=2 src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=3 src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=4 src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=5 src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=6 src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=7 src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

  </amp-carousel>

</amp-selector>

มาลองทดสอบกันเลย แตะภาพขนาดย่อ แล้วสไลด์รูปภาพจะเปลี่ยนแปลง เลื่อนสไลด์รูปภาพแล้วภาพขนาดย่อที่ไฮไลต์จะเปลี่ยนไป

เพิ่มข้อความในแกลเลอรี

เราได้ดําเนินการอย่างหนักเพื่อกําหนดและเปลี่ยนรูปแบบสําหรับสถานะสไลด์ปัจจุบัน เราจึงระบุการเชื่อมโยงเพิ่มเติมเพื่ออัปเดตข้อมูลอื่นๆ ได้โดยง่าย โดยอิงตามหมายเลขสไลด์ปัจจุบัน

มาเพิ่มเครื่องหมายคําพูดให้กับรูปภาพ x/of y" ในแกลเลอรีของเรา:

เพิ่มโค้ดต่อไปนี้เหนือองค์ประกอบภาพสไลด์

<div class="px3">Image <span [text]="1*selectedSlide + 1">1</span> of 8</div>

ครั้งนี้เราจะเชื่อมโยงกับข้อความภายในขององค์ประกอบโดยใช้ [text]= แทนที่จะเชื่อมโยงกับแอตทริบิวต์ HTML

มาลองใช้กันเลย

สรุป

คุณเรียนรู้เกี่ยวกับ amp-bind แล้ว
คุณใช้ amp-bind เพื่อใช้แกลเลอรีรูปภาพเวอร์ชันปรับปรุงแล้ว

ดูโค้ดที่สมบูรณ์ของส่วนนี้ได้ที่ http://codepen.io/aghassemi/pen/MpeMdL

ในส่วนนี้ เราจะใช้ฟีเจอร์ใหม่ 2 อย่างในการเพิ่มภาพเคลื่อนไหวลงในหน้าของเรา

เพิ่มเอฟเฟกต์พารัลแลกซ์ในชื่อ

amp-fx-collection คือส่วนขยายที่ให้คอลเล็กชันเอฟเฟกต์ภาพที่กําหนดไว้ล่วงหน้า เช่น พารัลแลกซ์ซึ่งเปิดใช้ได้อย่างง่ายดายในองค์ประกอบใดก็ได้ที่มีแอตทริบิวต์

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

เปิดใช้เอฟเฟกต์พารัลแลกซ์ได้โดยการเพิ่มแอตทริบิวต์ amp-fx="parallax" data-parallax-factor="<a decimal factor>" ลงในองค์ประกอบ HTML หรือ AMP

ค่าปัจจัยที่มากกว่า 1 จะทําให้องค์ประกอบเลื่อนดูได้เร็วขึ้นเมื่อผู้ใช้เลื่อนหน้าเว็บลง
ค่าปัจจัยที่น้อยกว่า 1 จะทําให้องค์ประกอบเลื่อนได้ช้าลงเมื่อผู้ใช้เลื่อนหน้าเว็บลง

มาเพิ่มพารัลแลกซ์ที่มีปัจจัย 1.5 ให้กับชื่อหน้าของเราและดูว่ามีรูปลักษณ์เป็นอย่างไร

เพิ่มแท็กสคริปต์สําหรับ amp-fx-collection ใน head

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

จากนั้นหาองค์ประกอบชื่อส่วนหัวที่มีอยู่ในโค้ดและเพิ่มแอตทริบิวต์ amp-fx="parallax" and data-parallax-factor="1.5" ในนั้น

<header amp-fx="parallax" data-parallax-factor="1.5" class="p3">
  <h1 class="ampstart-fullpage-hero-heading mb3">
    <span class="ampstart-fullpage-hero-heading-text">
      Most Beautiful Hikes in the Pacific Northwest
    </span>
  </h1>
  <span class="ampstart-image-credit h4">
    By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
  </span>
</header>

มาดูผลลัพธ์กัน

ตอนนี้ชื่อเลื่อนดูได้เร็วขึ้นกว่าส่วนที่เหลือของหน้า สุดยอด!

เพิ่มภาพเคลื่อนไหวลงในหน้า

amp-animation เป็นฟีเจอร์ที่นํา Web Animations API ไปยังหน้า AMP

ในส่วนนี้ เราจะใช้ amp-animation เพื่อสร้างเอฟเฟกต์การซูมเข้าเล็กน้อยสําหรับภาพหน้าปก

เพิ่มแท็กสคริปต์สําหรับภาพเคลื่อนไหวใน AMP ลงใน head

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

ทีนี้เราจําเป็นต้องกําหนดภาพเคลื่อนไหวและองค์ประกอบเป้าหมายที่ใช้ภาพเคลื่อนไหวด้วย

ภาพเคลื่อนไหวหมายถึง JSON ในแท็ก amp-animation ระดับบนสุด

แทรกโค้ดต่อไปนี้ใต้แท็กเปิด body ในหน้าเว็บโดยตรง

<amp-animation trigger="visibility" layout="nodisplay">
    <script type="application/json">
      {
        "target": "heroimage",
        "duration": 30000,
        "delay": 0, 
        "fill": "forwards",
        "easing": "ease-out",
        "keyframes": {"transform":  "scale(1.3)"}
      }
      </script>
</amp-animation>

โค้ดนี้จะกําหนดภาพเคลื่อนไหวที่ทํางานเป็นเวลา 30 วินาทีโดยไม่มีการหน่วงเวลาและปรับขนาดรูปภาพให้ใหญ่ขึ้น 30%

เรากําหนด fill ไปข้างหน้าเพื่อให้รูปภาพซูมเข้าได้หลังจากภาพเคลื่อนไหวสิ้นสุดลง target คือ HTML id ขององค์ประกอบที่ใช้กับภาพเคลื่อนไหว

มาเพิ่ม id ลงในองค์ประกอบรูปภาพหลักในหน้าเว็บของเรากัน เพื่อให้ amp-animation นําไปใช้งานได้

หารูปภาพหลัก (รูปภาพความละเอียดสูงที่มี layout="fixed-height") ในโค้ดและเพิ่ม id="heroimage" ลงในแท็ก amp-img
เพื่อความเรียบง่าย ให้ลบ media="(min-width: 416px)" และนํา amp-img ความละเอียดต่ําอื่นๆ ออกด้วยโดยไม่ต้องแก้ไขภาพเคลื่อนไหวและคําค้นหาสื่อหลายรายการในภาพเคลื่อนไหวอีกต่อไป

<figure class="ampstart-image-fullpage-hero m0 relative mb4">

    <amp-img id="heroimage" height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003"></amp-img>

    <figcaption class="absolute top-0 right-0 bottom-0 left-0">

...

คุณอาจสังเกตเห็นอยู่แล้วว่าการปรับขนาดรูปภาพจะทําให้ส่วนเกินของรูปภาพหลัก เราจึงจําเป็นต้องแก้ไขด้วยการซ่อนส่วนเกินของส่วนเกิน

เพิ่มกฎ CSS ต่อไปนี้ไว้ที่ส่วนท้ายของ <style amp-custom> ที่มีอยู่

.ampstart-image-fullpage-hero {
  overflow: hidden;
}

มาลองใช้แล้วดูว่าจะมีลักษณะดังนี้

เล็กน้อย

แต่ฉันก็ทําเช่นนั้นได้ด้วย CSS เป้าหมายของ amp-animation คืออะไร

กรณีนี้เป็นจริง แต่ amp-animation จะเปิดใช้ฟังก์ชันการทํางานพิเศษที่ทํากับ CSS เพียงอย่างเดียวไม่ได้ ตัวอย่างเช่น ภาพเคลื่อนไหวอาจอิงตามระดับการมองเห็น (และหยุดชั่วคราวตามระดับการมองเห็นเช่นกัน) หรือจะเรียกให้แสดงด้วยการดําเนินการ AMP ก็ได้ amp-animation ยังอิงตาม Web Animations API ซึ่งมีฟีเจอร์มากกว่าภาพเคลื่อนไหวของ CSS โดยเฉพาะในเรื่องความสามารถในการย้ายข้อมูล

สรุป

คุณได้เรียนรู้เกี่ยวกับการสร้างเอฟเฟ็กต์พารัลแลกซ์ด้วย amp-fx-collection แล้ว
คุณเรียนรู้เกี่ยวกับ amp-animation แล้ว

ดูโค้ดที่สมบูรณ์ของส่วนนี้ได้ที่ http://codepen.io/aghassemi/pen/OpXKzo

คุณเพิ่งสร้างหน้า AMP แบบอินเทอร์แอกทีฟที่สวยงาม

มาฉลองด้วยการดูความสําเร็จของคุณในวันนี้อีกครั้ง

ลิงก์ไปยังหน้าที่เสร็จสมบูรณ์: http://s.codepen.io/aghassemi/debug/OpXKzo

... และโค้ดสุดท้าย: http://codepen.io/aghassemi/pen/OpXKzo

ดูคอลเล็กชันของรายการ CodePen สําหรับ Codelab ได้ที่ https://codepen.io/collection/XzKmNB/

อ้อ ก่อนจะไป...

เราลืมตรวจสอบว่าหน้าเว็บของเรามีปัจจัยอื่นๆ อย่างไร เช่น แท็บเล็ตในโหมดแนวนอน

สิ่งที่จะเกิดขึ้นมีดังนี้

ยอดเยี่ยม

ขอให้โชคดี

ขั้นตอนถัดไปที่ควรทํา

Codelab นี้จะคัดลอกเฉพาะแพลตฟอร์มของ AMP ที่เป็นไปได้ มีแหล่งข้อมูลและ Codelab มากมายที่จะช่วยคุณสร้างหน้า AMP ที่ยอดเยี่ยม

หากมีข้อสงสัยหรือพบปัญหา โปรดดูช่องทาง AMP Slack หรือสร้างการสนทนา รายงานข้อบกพร่อง หรือคําขอฟีเจอร์ใน GitHub

หน้า AMP ที่เป็น Canonical ที่สวยงามและอินเทอร์แอกทีฟ

สิ่งที่คุณจะสร้าง

สิ่งที่ต้องมี

เครื่องมือสําหรับการแสดงเนื้อหา

ดาวน์โหลดเทมเพลตจาก amp.dev

การเรียกใช้โค้ดเทมเพลต

ตัดโค้ดเทมเพลต

เพิ่มการนําทางที่ปรับเปลี่ยนตามอุปกรณ์

เพิ่มรูปภาพและชื่อหลัก

สรุป

เพิ่มส่วนหัวและย่อหน้า

เพิ่มรูปภาพ

เพิ่มวิดีโอเล่นอัตโนมัติ

เพิ่มการฝัง

สรุป

เพิ่มภาพหมุน

เพิ่มภาพหมุนภาพขนาดย่อ

เปลี่ยนรูปภาพเมื่อผู้ใช้แตะภาพขนาดย่อ

ไฮไลต์ภาพขนาดย่อเมื่อผู้ใช้แตะ

สรุป

amp-bind คืออะไร

ใช้ amp-bind เพื่อนําแกลเลอรีรูปภาพมาใช้อีกครั้ง

เพิ่มข้อความในแกลเลอรี

สรุป

เพิ่มเอฟเฟกต์พารัลแลกซ์ในชื่อ

เพิ่มภาพเคลื่อนไหวลงในหน้า

สรุป

อ้อ ก่อนจะไป...

ขั้นตอนถัดไปที่ควรทํา

`amp-bind` คืออะไร

ใช้ `amp-bind` เพื่อนําแกลเลอรีรูปภาพมาใช้อีกครั้ง