AMP 互動性簡介

重要事項：本文件不適用於您目前選取的格式 電子郵件！

這些指南概述如何建立互動式 AMP 頁面。互動性對於現代網路至關重要。建立獨特且令人愉悅的體驗可以吸引使用者，讓他們留在您的網站上。AMP 針對常見的互動性需求提供開箱即用的解決方案，同時也提供高度可自訂且彈性的解決方案。

建構互動式體驗可能感覺不那麼傳統，而且確實如此！但這並不表示它更困難。一旦您了解概念並理解語法，許多互動式體驗都非常容易使用 AMP 建構。

AMP 中有幾個層次的互動性。您可以將其中一個、多個、全部或都不應用於 AMP 頁面。閱讀本指南的章節，以了解如何在 AMP 中建構互動性。

互動性基礎

本指南概述 AMP 提供的內建互動性。它說明如何輕鬆實作常見的基本功能，例如隱藏和顯示元素。

Hello World!

  <h1 id="hello">Hello World!</h1>
  <button on="tap:hello.hide">Hide</button>
  <button on="tap:hello.show">Show</button>
  <button on="tap:hello.toggleVisibility">Toggle</button>

在 playground 中開啟此程式碼片段

從這裡開始學習您可以建構並與其他互動可能性結合的基礎知識。

透過 AMP 元件實現現成的互動性

AMP 最強大的優勢之一是其廣泛的現成元件庫。其中許多是互動式元素，您可以自訂和組合這些元素以建立獨特的體驗！

  <amp-sidebar id="sidebar" class="sample-sidebar" layout="nodisplay" side="right">
    <h3>Sidebar</h3>
    <amp-accordion id="my-accordion" disable-session-states>
      <section>
        <h2>Section 1</h2>
        <p>Content in section 1.</p>
      </section>
      <section>
        <h2>Section 2</h2>
        <div>Content in section 2.</div>
      </section>
      <section expanded>
        <h2>Section 3</h2>
        <amp-img src="/static/inline-examples/images/squirrel.jpg" width="320" height="256" alt="Photo of a squirrel"></amp-img>
      </section>
    </amp-accordion>
    <button on="tap:sidebar.close">Close sidebar</button>
    <button on="tap:sidebar.toggle">Toggle sidebar</button>
  </amp-sidebar>
  <button on="tap:sidebar.toggle">Toggle sidebar</button>
  <button on="tap:sidebar.open">Open sidebar</button>

在 playground 中開啟此程式碼片段

本指南介紹最常見的互動式元件，並概述實作模式。

建構個人化的互動體驗

雖然 AMP 為常見的網路小工具和互動性提供解決方案，但每個網站都有自己的需求。AMP 透過三個元件擁抱高度個人化的體驗：amp-selector、amp-bind 和 amp-script。這三個元件沒有預設的使用者介面。相反地，它們用於建立基於選擇的介面，並建構回應使用者互動的動態頁面。

<head>
  <meta
    name="amp-script-src"
    content="sha384-qdYQLoj2SRKXBu33BwIoyRKorw0b0nQ8UPIoIMc9wL8KVLcKODSAK52yNGQNS_vN"
  />
  <style amp-custom>
    .clickedButton {
      border: 5px solid green;
    }
  </style>
</head>
<body>
<amp-script width="200" height="100" script="hello-world" [class]="scriptStyle">
  <button>Hello amp-script!</button>
</amp-script>
<script id="hello-world" type="text/plain" target="amp-script">
  const btn = document.querySelector('button');
  btn.addEventListener('click', () => {
    document.body.textContent = 'Hello World!';
    AMP.setState({ scriptStyle: "clickedButton" })
  });
</script>
</body>

在 playground 中開啟此程式碼片段

使用本指南作為這三者之間差異的簡介，了解是否以及如何將它們彼此組合，並與頁面元素一起使用。

用戶端算繪

本指南概述 AMP 中用戶端算繪的可能性。預設情況下，AMP 頁面是伺服器端算繪的。但是，在某些情況下，有必要在用戶端動態算繪資料，例如文章列表或使用者購物車中的商品。

查看用戶端篩選範例。

閱讀用戶端算繪，開始使用 AMP 元件和概念，以啟用用戶端算繪。

作者： @CrystalOnScript