文章書籤電子郵件

簡介

此範例示範如何讓使用者在 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 上編輯範例