文章书签电子邮件

简介

此示例演示如何让用户在 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.org.cn/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 上编辑示例