文章書籤電子郵件

簡介

此範例示範如何在 AMP 電子郵件中讓使用者執行非同步動作 (將文章加入書籤)。

它利用 amp-form 擴充功能，在使用者不離開電子郵件用戶端的情況下，將要求傳送至伺服器。

設定

額外使用的 AMP 元件必須匯入標頭。我們使用 amp-form 將書籤要求提交至伺服器。

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

我們使用 amp-mustache 來呈現表單提交的結果。

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

內文

我們在電子郵件中顯示文章的簡要摘要。

範例文章

這是範例文章的簡短摘要。使用者可以選擇繼續在網站上閱讀，或將其加入書籤至自己的帳戶以供日後閱讀。

<h1>Sample article</h1>
<p>This is a short summary of a sample article. The user can choose to continue reading on the website or bookmark it to their account for later.</p>

我們在文章下方顯示「加入書籤」按鈕，此按鈕會透過 amp-form 非同步將書籤要求傳送至伺服器。

由於來自 AMP 電子郵件訊息的外寄 XHR 呼叫沒有驗證，因此所有驗證都應使用存取權杖完成。在此範例中，此權杖以 123abc 表示。在真實情境中，此隱藏的輸入欄位 auth_token 會包含真正的伺服器端驗證的限次使用存取權杖。

<form action-xhr="https://amp.dev.org.tw/documentation/examples/interactivity-dynamic-content/article_bookmark_email/submit-form-bookmark" method="post">
  <input type="hidden"
          name="id"
          value="ARTICLE_UNIQUE_ID">
  <input type="hidden"
          name="auth_token"
          value="123abc">
  <button type="submit">
    Bookmark
  </button>
  <div submit-success>
    <template type="amp-mustache">
      {{result}}
    </template>
  </div>
  <div submit-error>An error occurred.</div>
</form>

需要進一步說明嗎？

如果此頁面上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯絡，討論您的確切使用案例。

前往 Stack Overflow

有未說明的特色功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別感興趣的問題提供一次性的貢獻。

在 GitHub 上編輯範例