文章書籤電子郵件

簡介

這個範例示範如何在 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 上編輯範例