评论区

实验性

此示例使用以下实验性功能：amp-list-resizable-children。通过下面的按钮启用实验。某些组件还需要启用 AMP Beta 渠道。了解更多关于实验性功能的信息。

启用实验
AMP 版本
PROD BETA

查看演示在 Playground 中打开

简介

此示例演示如何在成功登录后使用 amp-form 组件在 AMP HTML 中构建评论区。登录，输入评论并按下评论按钮；您的评论不会被持久化，因此如果您想再次开始评论，请重新加载页面。

设置

我们需要一些组件来实现评论区

amp-form 用于通过 Web 表单提交新评论。

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

amp-access 用于实现登录。

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

amp-list 用于动态呈现评论。

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

amp-mustache 用于客户端渲染。

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

amp-access 需要定义 3 个端点，如此处所述。

此示例允许用户使用电子邮件和密码登录和注销。注销是通过在登录属性 sign-out 中配置第二个端点来实现的，更多信息请查看此处。

<script id="amp-access" type="application/json">
{
    "authorization": "/documentation/examples/api/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
    "noPingback": "true",
    "login": {
      "sign-in": "/documentation/examples/api/amp-access/login?rid=READER_ID",
      "sign-out": "/documentation/examples/api/amp-access/logout?rid=READER_ID"
    },
    "authorizationFallbackResponse": {
        "error": true,
        "loggedIn": false
    }
}
</script>

为了添加评论，用户需要登录。我们使用 amp-access 来集成登录，并根据用户是否登录来显示和隐藏登录按钮。on="tap:amp-access.login-sign-in" 指定点击登录按钮时应采取的操作：login 定义了 amp-access json 配置中的属性，而 sign-in 定义了端点。

<button amp-access="NOT loggedIn" amp-access-hide on="tap:amp-access.login-sign-in">Login to comment</button>

我们通过登录端点指定注销，以便能够使用 return URL 环境变量。

<button amp-access="loggedIn" amp-access-hide on="tap:amp-access.login-sign-out">Logout</button>

列出所有评论

我们使用 amp-list 来呈现现有的评论，以确保如果通过 AMP 缓存加载页面，则会显示最新的评论。由于我们不知道评论的数量，因此我们添加一个 overflow 按钮。

<amp-list id="comments" class="comments" src="https://amp.org.cn/documentation/examples/interactivity-dynamic-content/comment_section/comments" layout="fixed-height" height="200" items="." single-item binding="no" credentials="include" reset-on-refresh noloading>
  <template type="amp-mustache">
    <div class="comment">
      <p><span class="user">{{user}}</span> <span class="date">{{date}}</span></p>
      <p>{{text}}</p>
    </div>
  </template>
  <button overflow>Show all comments</button>
  <div placeholder>
    <div class="comment">
      <p><span class="placeholder"></span> <span class="placeholder"></span></p>
      <p><span class="placeholder"></span></p>
    </div>
    <div class="comment">
      <p><span class="placeholder"></span> <span class="placeholder"></span></p>
      <p><span class="placeholder"></span></p>
    </div>
  </div>
</amp-list>

使用 amp-list 的刷新操作，可以很容易地实现刷新评论的按钮。我们将其与 changeLayoutToContainer 操作相结合，以调整 amp-list 的大小以适应更新的内容。

<button on="tap: comments.changeToLayoutContainer, comments.refresh">Refresh comments</button>

撰写评论

使用 amp-form 提交新评论。当触发 submit-success 事件时，我们通过 refresh 操作触发评论列表的刷新，并通过 changeToContainerLayout 调整列表的大小。我们还使用 clear 操作清除所有表单字段。

<form id="comment" class="comment-form" amp-access="loggedIn" amp-access-hide method="post" action-xhr="https://amp.org.cn/documentation/examples/interactivity-dynamic-content/comment_section/comments/new" target="_top" on="submit-success:
            comments.changeToLayoutContainer,
            comments.refresh,
            comment.clear">
    <label for="ta1" class>
     Your comment:
    </label>
    <template amp-access-template type="amp-mustache">
      <small>Logged in as <strong>{{name}}</strong>.</small>
    </template>
  <textarea id="ta1" name="text" rows="5"></textarea>
  <input type="submit" value="Submit">
  <div submit-error>
    <template type="amp-mustache">
      Error! Looks like something went wrong with your comment, please try to submit it again. {{error}}
    </template>
  </div>
</form>

需要进一步解释吗？

如果此页面上的解释没有涵盖您的所有问题，请随时联系其他 AMP 用户，讨论您的确切用例。

前往 Stack Overflow

一个无法解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但也欢迎您针对您特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @aghassemi 撰写