Trang AMP chính tắc đẹp, tương tác

AMP giúp bạn dễ dàng xây dựng các trang web đáng tin cậy, phản hồi nhanh và có hiệu suất cao. AMP cho phép bạn tạo các tương tác trang web phổ biến mà không cần viết JavaScript. Trang web amp.dev có các mẫu được thiết kế sẵn và giúp bạn bắt đầu nhanh.

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ tạo một trang AMP đẹp mắt, có tính tương tác cao, kết hợp nhiều tính năng và thành phần mở rộng của AMP:

  • Di chuyển thích ứng
  • Ảnh bìa toàn trang chính
  • Hình ảnh thích ứng
  • Video có tính năng tự động phát
  • Các video nhúng như Instagram
  • Hành động và bộ chọn
  • Liên kết dữ liệu với amp-bind
  • Hiệu ứng hình ảnh với amp-fx-collection và amp-animation

Bạn cần có

  • Một trình duyệt web hiện đại
  • Node.js và trình chỉnh sửa văn bản hoặc quyền truy cập vào CodePen hoặc sân chơi trực tuyến tương tự
  • Kiến thức cơ bản về HTML, CSS, JavaScript và Công cụ cho nhà phát triển Google Chrome

Công cụ phân phát nội dung

Chúng tôi sẽ sử dụng Node.js để chạy máy chủ HTTP cục bộ nhằm phân phát trang AMP. Hãy kiểm tra trang web Node.js để tìm hiểu cách cài đặt trang web đó.

Công cụ lựa chọn phân phát nội dung cục bộ của chúng tôi sẽ phân phát, một máy chủ nội dung tĩnh dựa trên Node.js. Để cài đặt tính năng này, hãy chạy lệnh sau:

npm install -g serve

Tải mẫu xuống từ amp.dev

Mẫu AMP là kho lưu trữ các mẫu AMP và thành phần bắt đầu nhanh giúp bạn tạo các trang AMP hiện đại, thích ứng nhanh chóng.

Truy cập Mẫu AMP và tải mã xuống &có

Chạy mã mẫu

Trích xuất nội dung của tệp ZIP.

Chạy lệnh serve trong thư mục article để phân phát tệp cục bộ.

Truy cập vào http://localhost:5000/template/article.amp.html trong trình duyệt của bạn. (Cổng này có thể là 3000 hoặc một số khác tuỳ thuộc vào phiên bản serve. Hãy kiểm tra bảng điều khiển để biết địa chỉ chính xác.)

Trong quá trình thực hiện, hãy mở Chrome DevTools và bật/tắt Chế độ thiết bị.

Cắt bỏ mã mẫu

Tại thời điểm này, chúng tôi đã phát triển một trang AMP chủ yếu hoạt động, nhưng mục đích của lớp học lập trình này là để bạn học hỏi và thực hành, vì vậy...

Xóa mọi thứ trong <body></body>.

Bây giờ chúng ta còn lại một trang trống chỉ chứa một số mã nguyên mẫu:

Trong suốt lớp học lập trình này, bạn sẽ thêm nhiều thành phần vào trang trống này, tạo lại một phần mẫu để có nhiều chức năng hơn nữa.

Trang AMP là trang HTML có các thẻ bổ sung và một số hạn chế về hiệu suất đáng tin cậy.

Mặc dù hầu hết các thẻ trong trang AMP là thẻ HTML thông thường, nhưng một số thẻ HTML được thay thế bằng thẻ dành riêng cho AMP. Các phần tử tùy chỉnh này, được gọi là thành phần HTML AMP, giúp dễ dàng triển khai các mẫu phổ biến theo cách hiệu quả.

Tệp HTML AMP đơn giản nhất trông như thế này (đôi khi được gọi là AMP nguyên mẫu):

<!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>

Hãy xem mã của trang trống mà bạn đã tạo trong quá trình thiết lập, bao gồm cả mẫu nguyên mẫu này và có một vài bổ sung⁠ – điều quan trọng là thẻ <style amp-custom> bao gồm nhiều CSS được giảm thiểu.

AMP không có ý kiến về thiết kế và không thực thi một tập hợp kiểu cụ thể. Hầu hết các thành phần AMP đều có kiểu cách rất cơ bản. Các tác giả trang cung cấp CSS tùy chỉnh của họ cho họ. Đó là lúc <style amp-custom> phát huy tác dụng.

Tuy nhiên, Mẫu AMP cung cấp các kiểu CSS có ý kiến riêng của riêng họ, được thiết kế đẹp mắt, nhiều trình duyệt và phản hồi nhanh để giúp bạn xây dựng các trang AMP trang nhã một cách nhanh chóng. Mã mẫu mà bạn đã tải xuống bao gồm các kiểu CSS đã nêu trong <style amp-custom>.

Chúng tôi sẽ bắt đầu bằng cách thêm lại một số thành phần chúng tôi đã xoá khỏi mẫu, để tạo vỏ cho trang của chúng tôi, bao gồm trình đơn điều hướng, hình ảnh tiêu đề trang và tiêu đề.

Chúng tôi sẽ nhận trợ giúp từ trang Thành phần giao diện người dùng Khởi động AMP, nhưng chúng tôi sẽ không tìm hiểu sâu hơn về chi tiết triển khai của chúng. Các bước trong lớp học lập trình sẽ mang lại nhiều cơ hội để làm việc đó.

Thêm thanh điều hướng thích ứng

Truy cập vào https://ampstart.com/components#navigation rồi sao chép và dán mã HTML được cung cấp cho MenuRES RESPONSENT menubar vào body của trang.

Mã do AMP Start cung cấp bao gồm cấu trúc lớp HTML và CSS cần thiết để triển khai thanh điều hướng thích ứng cho trang của bạn.

Thực hành: Đổi kích thước cửa sổ của bạn để xem cách cửa sổ phản hồi với các kích thước màn hình khác nhau.

Mã này sử dụng truy vấn đa phương tiện CSS và các thành phần AMP amp-sidebar và amp-accordion.

Thêm tiêu đề và hình ảnh chính

AMP Start cũng cung cấp các đoạn trích sẵn có để sử dụng cho các hình ảnh và tiêu đề đẹp mắt, phản hồi nhanh.

Hãy truy cập vào https://ampstart.com/components#media rồi sao chép và dán mã HTML được cung cấp cho nội dung Anh hùng toàn trang vào mã của bạn, ngay sau <!-- End Navbar --> comment trong body.

Hãy cập nhật hình ảnh và tiêu đề ngay.

Như bạn có thể nhận thấy, có hai thẻ amp-img khác nhau trong đoạn mã. Một hình ảnh được sử dụng cho chiều rộng nhỏ hơn và sẽ trỏ đến một hình ảnh có độ phân giải thấp hơn, còn hình ảnh còn lại dành cho màn hình lớn hơn. Các nội dung này được tự động bật/tắt dựa trên thuộc tính media. AMP này hỗ trợ tất cả các phần tử AMP.

Cập nhật src, width và height cho các hình ảnh khác nhau và tiêu đề thành &quat; Những chuyến đi bộ đẹp nhất ở Tây Bắc Thái Bình Dương" bằng cách thay thế <figure>...</figure> hiện tại bằng:

<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>

Bây giờ, hãy xem trang ngay:

Tóm tắt

  • Bạn đã tạo giao diện cho trang của mình, bao gồm điều hướng thích ứng và hình ảnh và tiêu đề chính.
  • Bạn đã tìm hiểu thêm về Mẫu AMP và sử dụng các thành phần giao diện người dùng AMP Start để nhanh chóng kết hợp các trang trên trang.

Bạn có thể tìm thấy mã hoàn chỉnh cho phần này tại đây: http://codepen.io/aghassemi/pen/RpRdzV

Trong phần này, chúng tôi sẽ thêm các hình ảnh, video, video nhúng và một số văn bản thích ứng vào trang.

Hãy thêm một phần tử main sẽ lưu trữ nội dung của trang. Chúng tôi sẽ thêm giá trị này vào cuối body:

<main id="content">

</main>

Thêm tiêu đề và đoạn văn

Hãy thêm nội dung sau đây vào 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>

Vì AMP chỉ là HTML, nên không có gì đặc biệt về mã này ngoại trừ tên lớp CSS đó. px3, mb2 và ampstart-dropcap là gì? Chúng đến từ đâu?

Các lớp này không thuộc HTML AMP. Mẫu Bắt đầu AMP sử dụng Basscss để cung cấp bộ công cụ CSS cấp thấp và thêm các lớp dành riêng cho AMP Start.

Trong đoạn mã này, px3 và mb2 được Basscss xác định và dịch tương ứng sang padding-left-right và left-bottom. ampstart-dropcap do AMP Start cung cấp và tạo chữ cái đầu tiên của một đoạn lớn hơn.

Bạn có thể tìm tài liệu về các lớp CSS được xác định trước này trên http://basscss.com/ và https://ampstart.com/components.

Hãy xem hình thức của trang ngay:

Thêm hình ảnh

Việc tạo trang thích ứng rất dễ dàng trong AMP. Trong nhiều trường hợp, việc tạo phản hồi của thành phần AMP đơn giản như thêm một thuộc tính layout="responsive". Tương tự như thẻ HTML img, amp-img cũng hỗ trợ srcset để chỉ định hình ảnh khác nhau cho các chiều rộng và mật độ pixel khác nhau của khung nhìn.

Thêm amp-img vào 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>

Với mã này, chúng tôi sẽ tạo một hình ảnh thích ứng bằng cách chỉ định layout="responsive" cũng như cung cấp width và height.

Tại sao tôi phải chỉ định chiều rộng và chiều cao khi sử dụng bố cục thích ứng?

Hai lý do:

  1. AMP sử dụng chiều rộng và chiều cao để tính toán tỷ lệ khung hình và duy trì chiều cao chính xác khi chiều rộng thay đổi cho vừa với vùng chứa mẹ.
  2. AMP thực thi kích thước tĩnh cho tất cả các thành phần để đảm bảo trải nghiệm người dùng tốt (không kích hoạt trang) và xác định kích thước và vị trí của từng thành phần để bố trí trang trước khi tài nguyên được tải xuống.

Bây giờ, hãy xem trang ngay:

Thêm video tự động phát

AMP hỗ trợ nhiều trình phát video, chẳng hạn như YouTube và Vimeo. AMP có phiên bản riêng của phần tử HTML5 video trong thành phần mở rộng amp-video. Một số trình phát video trong số này, bao gồm cả amp-video và amp-youtube cũng hỗ trợ tính năng tự động phát ở chế độ tắt tiếng trên thiết bị di động.

Tương tự như amp-img, amp-video có thể trở nên thích ứng khi thêm layout="responsive"

Hãy thêm video tự động phát vào trang của chúng tôi.

Thêm một đoạn khác và phần tử amp-video sau vào 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>

Hãy xem:

Thêm nội dung nhúng

AMP có thành phần mở rộng cho nhiều video nhúng của bên thứ ba, chẳng hạn như Twitter và Instagram. Đối với những video nhúng thiếu thành phần AMP, luôn có amp-iframe.

Hãy thêm video nhúng trên Instagram vào trang của chúng tôi.

Không giống như amp-img và amp-video, amp-instagram không phải là một thành phần tích hợp sẵn. Thẻ tập lệnh nhập cho thẻ phải được bao gồm rõ ràng trong head của trang AMP trước khi có thể sử dụng thành phần.

Bản mẫu AMP Start mà chúng tôi đang sử dụng bao gồm một số thẻ tập lệnh nhập. Tìm các giá trị này ở đầu thẻ head và đảm bảo bao gồm dòng tập lệnh nhập sau:

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

Thêm một đoạn khác và phần tử amp-instagram sau vào 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>

Hãy xem:

Hiện tại, nội dung đó có thể đã đủ.

Tóm tắt

  • Bạn đã tìm hiểu về các thành phần thích ứng trong AMP.
  • Bạn đã thêm các loại nội dung đa phương tiện và văn bản khác nhau.

Bạn có thể tìm thấy mã đã hoàn tất cho phần này tại đây: http://codepen.io/aghassemi/pen/OpXGoa

Cho đến nay, chúng tôi chỉ tạo nội dung tĩnh cho trang của mình. Trong phần này, chúng ta sẽ tạo một thư viện ảnh tương tác bằng cách sử dụng các thành phần như băng chuyền, hộp đèn và hành động AMP.

Mặc dù AMP không hỗ trợ JavaScript tùy chỉnh, nhưng JavaScript vẫn hiển thị một số khối xây dựng để nhận và xử lý các hành động của người dùng.

Việc mọi hình ảnh cho trang AMP tập trung vào ảnh của chúng tôi hiển thị trên trang sẽ không tạo ra trải nghiệm người dùng tuyệt vời. Rất may là chúng tôi có thể sử dụng amp-carousel để tạo các trang trình bày ảnh có thể vuốt ngang.

Trước tiên, hãy đảm bảo thẻ tập lệnh cho amp-carousel được bao gồm trong head:

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

Bây giờ, hãy thêm amp-carousel thích ứng thuộc loại slides có nhiều hình ảnh vào 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" đảm bảo chỉ hiển thị một hình ảnh tại một thời điểm và cho phép người dùng vuốt qua chúng.

Đối với các hình ảnh bên trong băng chuyền, chúng ta dùng layout="fill" vì một băng chuyền luôn lấp đầy kích thước của nó bằng phần tử con, vì vậy, bạn không cần chỉ định một bố cục khác yêu cầu chiều rộng và chiều cao.

Hãy dùng thử và xem quảng cáo trông như thế nào:

1.gif

Bây giờ, hãy thêm một vùng chứa có thể cuộn theo chiều ngang cho hình thu nhỏ của những hình ảnh này. Chúng tôi sẽ sử dụng lại <amp-carousel>, nhưng không có type="slides" và với bố cục chiều cao cố định.

Hãy thêm nội dung sau đây vào phần tử amp-carousel trước.

<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>

Xin lưu ý rằng đối với hình thu nhỏ, chúng tôi chỉ sử dụng layout="fixed" và phiên bản có độ phân giải thấp của cùng một ảnh.

Hãy xem:

Thay đổi hình ảnh khi người dùng nhấn vào hình thu nhỏ

Để làm điều này, chúng ta cần liên kết các sự kiện như tap với hành động như thay đổi trang trình bày.

sự kiện: Chúng tôi có thể sử dụng thuộc tính on để cài đặt trình xử lý sự kiện cho một phần tử và sự kiện tap được hỗ trợ trên tất cả các phần tử.

hành động: amp-carousel hiển thị một hành động goToSlide(index=INTEGER) mà chúng ta có thể gọi từ trình xử lý sự kiện nhấn của mỗi hình thu nhỏ.

Bây giờ, chúng ta đã biết về sự kiện và hành động này, hãy gắn kết họ với nhau.

Trước tiên, chúng ta cần cung cấp cho băng chuyền trang trình bày một id để chúng tôi có thể tham chiếu băng chuyền đó từ trình xử lý sự kiện nhấn trên hình thu nhỏ.

Sửa đổi mã hiện có của bạn để thêm thuộc tính id vào băng chuyền trang trình bày (đầu tiên):

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

  ....

Bây giờ, hãy cài đặt trình xử lý sự kiện (on="tap:imageSlides.goToSlide(index=<slideNumber>)")" trên mỗi hình ảnh hình thu nhỏ):

<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" ...
...

Lưu ý rằng chúng ta cũng phải cung cấp thuộc tính này cho tabindex và đặt thuộc tính ARIA role cho khả năng hỗ trợ tiếp cận.

Vậy là xong. Giờ đây, khi nhấn vào từng hình thu nhỏ, hình ảnh tương ứng sẽ xuất hiện bên trong băng chuyền trang trình bày.

2.gif

Làm nổi bật hình thu nhỏ khi người dùng nhấn vào hình thu nhỏ đó

Chúng tôi có thể làm thế này không? Có vẻ như không có hành động nào để thay đổi các lớp CSS cho một phần tử cần gọi từ trình xử lý sự kiện nhấn. Vậy làm cách nào để chúng tôi có thể làm nổi bật hình thu nhỏ đã chọn?

<amp-selector> giải cứu!

amp-selector khác với các thành phần mà chúng ta đã dùng từ trước đến nay. Đây không phải là một thành phần để trình bày, vì thành phần này không ảnh hưởng đến bố cục của trang, mà là một khối xây dựng cho phép trang AMP biết những lựa chọn mà người dùng đã chọn.

Những việc amp-selector làm khá đơn giản nhưng mạnh mẽ:

  • amp-selector có thể chứa bất kỳ phần tử HTML hoặc thành phần AMP tùy ý nào.
  • Mọi phần tử con của amp-selector đều có thể trở thành lựa chọn nếu có thuộc tính option=<value>.
  • Khi người dùng nhấn vào một phần tử là tùy chọn, amp-selector chỉ cần thêm thuộc tính selected vào phần tử đó (và xóa phần tử đó khỏi các phần tử tùy chọn khác ở chế độ chọn một lần).
  • Bạn có thể tạo kiểu cho phần tử đã chọn trong CSS tùy chỉnh bằng cách nhắm mục tiêu thuộc tính selected bằng một bộ chọn thuộc tính CSS.

Hãy xem cách này giúp chúng ta hoàn thành nhiệm vụ trong tay.

Thêm thẻ tập lệnh cho amp-selector vào head:

<script custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" async></script>
  1. Cuộn băng chuyền hình thu nhỏ trong amp-selector
  2. Đặt mỗi hình thu nhỏ làm tùy chọn bằng cách thêm thuộc tính option=<value>.
  3. Đặt hình thu nhỏ đầu tiên theo mặc định bằng cách thêm thuộc tính 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>

Giờ đây, chúng ta cần phải thêm kiểu để làm nổi bật hình thu nhỏ đã chọn.

Thêm CSS tùy chỉnh sau trong <style amp-custom> sau phần nguyên mẫu CSS rút gọn từ Start Start của AMP:

<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>

Hãy xem:

3.gif

Có vẻ ổn, nhưng bạn có nhận thấy lỗi không?

Nếu người dùng vuốt băng chuyền trang trình bày, hình thu nhỏ đã chọn không cập nhật để phản ánh điều đó. Làm cách nào để chúng tôi liên kết trang trình bày hiện tại trong băng chuyền với hình thu nhỏ đã chọn?

Trong phần tiếp theo, chúng ta sẽ tìm hiểu cách thực hiện.

Tóm tắt

  • Bạn đã tìm hiểu về các loại băng chuyền khác nhau và cách sử dụng các băng chuyền đó.
  • Bạn đã dùng các sự kiện và hành động AMP để thay đổi trang trình bày hiển thị trong băng chuyền hình ảnh khi người dùng nhấn vào hình thu nhỏ.
  • Bạn đã tìm hiểu về amp-selector và cách ứng dụng này có thể được sử dụng làm khối xây dựng để triển khai các trường hợp sử dụng thú vị.

Bạn có thể tìm thấy mã hoàn chỉnh cho phần này tại đây: http://codepen.io/aghassemi/pen/gmMJMy

Trong phần này, chúng ta sẽ sử dụng amp-bind để cải thiện khả năng tương tác của thư viện hình ảnh từ phần trước.

amp-bind là gì?

Thành phần AMP cốt lõi amp-bind cho phép bạn tạo khả năng tương tác tùy chỉnh với liên kết và biểu thức dữ liệu.

amp-bind có ba phần chính:

  1. Tiểu bang
  2. Ép giấy tờ
  3. Đột biến

Trạng thái là một biến trạng thái ứng dụng, chứa mọi thông tin từ một giá trị duy nhất cho đến một cấu trúc dữ liệu phức tạp. Tất cả các thành phần đều có thể đọc và ghi vào biến được chia sẻ này.

Liên kết là một biểu thức liên kết trạng thái với một thuộc tính HTML hoặc nội dung của một phần tử.

Cắt bỏ là hành động thay đổi giá trị của trạng thái do một số hành động hoặc sự kiện của người dùng.

Sức mạnh của amp-bind bắt đầu khi có đột biến: Tất cả các thành phần liên kết với trạng thái đó sẽ được thông báo và sẽ tự động cập nhật để phản ánh trạng thái mới.

Hãy cùng xem ví dụ thực tế!

Trước đây, chúng ta sử dụng thao tác AMP (ví dụ: goToSlide()) để liên kết băng chuyền trang trình bày hình ảnh đầy đủ với một sự kiện tap trên hình thu nhỏ và dùng amp-selector để làm nổi bật hình thu nhỏ đã chọn.

Hãy xem cách chúng ta có thể triển khai lại mã này bằng cách sử dụng phương pháp amp-bind để liên kết dữ liệu.

Nhưng trước khi chúng tôi bắt đầu lập trình, hãy thiết kế phương pháp của chúng tôi:

1. Tiểu bang của chúng tôi có trạng thái gì?

Khá đơn giản trong trường hợp của chúng tôi, giá trị duy nhất mà chúng tôi quan tâm là số trang trình bày hiện tại là bao nhiêu. Vì vậy, selectedSlide là tiểu bang của chúng tôi.

2. Liên kết của chúng ta là gì?

Cần thay đổi điều gì khi selectedSlide thay đổi?

  • slide hiển thị của băng chuyền toàn hình ảnh: 
<amp-carousel [slide]="selectedSlide" ...
  • Mục selected trong amp-selector cũng cần thay đổi. Thao tác này sẽ sửa lỗi mà chúng tôi đã gặp phải trong phần trước.
<amp-selector [selected]="selectedSlide" ...

3. Sự đột biến của chúng ta là gì?

Khi nào selectedSlide cần thay đổi?

  • Khi người dùng thay đổi thành một trang trình bày mới trong băng chuyền toàn hình ảnh bằng cách vuốt:
<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...
  • Khi người dùng chọn một hình thu nhỏ:
<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

Hãy sử dụng AMP.setState để kích hoạt một đột biến, nghĩa là chúng ta không cần tất cả mã on="tap:imageSlides.goToSlide(index=n)" mà chúng ta có trên hình thu nhỏ nữa!

Hãy kết hợp tất cả lại với nhau:

Thêm thẻ tập lệnh cho amp-bind vào head:

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

Thay thế mã thư viện hiện có bằng phương pháp mới:

<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>

Hãy dùng thử. Nhấn vào một hình thu nhỏ và các trang trình bày hình ảnh sẽ thay đổi. Vuốt các trang trình bày hình ảnh và hình thu nhỏ được làm nổi bật sẽ thay đổi.

4.gif

Thêm văn bản vào thư viện

Chúng ta đã thực hiện rất nhiều việc để xác định và thay đổi trạng thái cho trang trình bày hiện tại. Giờ đây, chúng ta có thể dễ dàng cung cấp các liên kết bổ sung để cập nhật những thông tin khác dựa trên số trang trình bày hiện tại.

Hãy thêm "Hình ảnh x/của y" văn bản vào thư viện của chúng tôi:

Thêm mã sau phía trên phần tử băng chuyền trang trình bày:

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

Lần này, chúng ta liên kết đến văn bản bên trong của một phần tử bằng [text]= thay vì liên kết với một thuộc tính HTML.

Hãy dùng thử:

5.gif

Tóm tắt

  • Bạn đã tìm hiểu về amp-bind.
  • Bạn đã sử dụng amp-bind để triển khai phiên bản thư viện hình ảnh được cải tiến.

Bạn có thể tìm thấy mã đã hoàn tất cho phần này tại đây: http://codepen.io/aghassemi/pen/MpeMdL

Trong phần này, chúng tôi sẽ sử dụng hai tính năng mới để thêm ảnh động vào trang của mình.

Thêm hiệu ứng thị sai vào tiêu đề

amp-fx-collection là một phần mở rộng cung cấp một tập hợp các hiệu ứng hình ảnh đặt trước, chẳng hạn như thị sai có thể dễ dàng bật trên bất kỳ phần tử nào có thuộc tính.

Với hiệu ứng thị sai, khi người dùng cuộn trang, phần tử cuộn nhanh hơn hoặc chậm hơn tùy thuộc vào giá trị được gán cho thuộc tính này.

Bạn có thể bật hiệu ứng thị sai bằng cách thêm thuộc tính amp-fx="parallax" data-parallax-factor="<a decimal factor>" vào bất kỳ phần tử HTML hoặc AMP nào.

  • Giá trị hệ số lớn hơn 1 giúp phần tử cuộn nhanh hơn khi người dùng cuộn xuống dưới trang.
  • Giá trị hệ số nhỏ hơn 1 sẽ khiến phần tử cuộn chậm hơn khi người dùng cuộn xuống dưới trang.

Hãy thêm thị trường có hệ số 1,5 vào tiêu đề trang và xem chúng sẽ trông như thế nào!

Thêm thẻ tập lệnh cho amp-fx-collection vào head:

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

Bây giờ, hãy tìm phần tử tiêu đề hiện có trong mã rồi thêm thuộc tính amp-fx="parallax" and data-parallax-factor="1.5" vào phần tử đó:

<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>

Hãy xem kết quả:

6.gif

Tiêu đề hiện cuộn nhanh hơn phần còn lại của trang. Tuyệt!

Thêm ảnh động vào trang

amp-animation là một tính năng đưa API Ảnh động Web vào các trang AMP.

Trong phần này, chúng tôi sẽ sử dụng amp-animation để tạo hiệu ứng phóng to tinh tế cho ảnh bìa.

Thêm thẻ tập lệnh cho amp-animation vào head:

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

Bây giờ, chúng ta cần xác định ảnh động và phần tử mục tiêu áp dụng.

Ảnh động được xác định là JSON bên trong thẻ amp-animation cấp cao nhất.

Chèn mã sau ngay bên dưới thẻ body mở trong trang của bạn.

<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>

Mã này xác định một ảnh động chạy trong 30 giây mà không bị trì hoãn và điều chỉnh tỷ lệ hình ảnh lớn hơn 30%.

Chúng tôi xác định một fill tiến để cho phép hình ảnh luôn phóng to sau khi ảnh động kết thúc. target là HTML id của phần tử mà ảnh động áp dụng.

Hãy thêm id vào phần tử hình ảnh chính trong trang của chúng ta để amp-animation có thể thao tác trên phần tử đó.

  1. Tìm hình ảnh chính hiện có (hình ảnh có độ phân giải cao bằng layout="fixed-height") trong mã của bạn và thêm id="heroimage" vào thẻ amp-img.
  2. Để đơn giản, cũng nên xóa media="(min-width: 416px)" và cũng có thể xóa amp-img độ phân giải thấp khác để chúng tôi không phải xử lý nhiều ảnh động và truy vấn đa phương tiện trong ảnh động ngay bây giờ.
<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">

...

Như bạn có thể đã nhận thấy, việc mở rộng tỷ lệ hình ảnh sẽ khiến hình ảnh bị tràn, vì vậy, chúng ta cần khắc phục bằng cách ẩn tràn.

Thêm quy tắc CSS sau vào cuối <style amp-custom> hiện tại:

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

Hãy dùng thử và xem quảng cáo trông như thế nào:

7.gif

Tuyệt vời!

Nhưng tôi có thể đã làm việc đó với CSS. Điểm của amp-animation là gì?

Điều này đúng trong trường hợp này, nhưng amp-animation cho phép thêm chức năng bổ sung mà việc này không thể thực hiện được với CSS. Ví dụ: ảnh động có thể được kích hoạt dựa trên chế độ hiển thị (và cũng tạm dừng dựa trên chế độ hiển thị) hoặc có thể kích hoạt ảnh động bằng hành động AMP. amp-animation cũng dựa trên API Ảnh động trên web. API này có nhiều tính năng hơn ảnh động CSS, đặc biệt là xoay quanh khả năng tổng hợp.

Tóm tắt

  • Bạn đã tìm hiểu cách tạo hiệu ứng thị sai với amp-fx-collection.
  • Bạn đã tìm hiểu về amp-animation.

Bạn có thể tìm thấy mã hoàn chỉnh cho phần này tại đây: http://codepen.io/aghassemi/pen/OpXKzo

Bạn vừa tạo xong một trang AMP tương tác và đẹp mắt.

Hãy ăn mừng bằng cách xem lại những thành tích bạn đã đạt được hôm nay.

Dưới đây là đường liên kết đến trang đã hoàn tất: http://s.codepen.io/aghassemi/debug/OpXKzo

... và mã cuối cùng: http://codepen.io/aghassemi/pen/OpXKzo

Chưa có tiêu đề.gif

Bạn có thể tìm thấy tập hợp các mục CodePen cho lớp học lập trình tại đây: https://codepen.io/collection/XzKmNB/

Ôi, trước khi chúng ta đi...

Chúng tôi đã quên kiểm tra giao diện của trang trên các kiểu dáng khác, như máy tính bảng ở chế độ ngang.

Hãy xem:

Chưa có tiêu đề.gif

Tuyệt vời!

Chúc bạn một ngày tốt lành.

Bước tiếp theo

Lớp học lập trình này chỉ giúp bạn khám phá những gì có thể làm được trong AMP. Có nhiều tài nguyên và lớp học lập trình giúp bạn tạo các trang AMP tuyệt vời:

Nếu bạn có câu hỏi hoặc gặp vấn đề, vui lòng tìm chúng tôi trên kênh AMP Slack hoặc tạo cuộc thảo luận, báo cáo lỗi hoặc yêu cầu về tính năng trên GitHub.