文章书签电子邮件

简介

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