Comment Section

Experimental

В этом примере используется следующая экспериментальная функция: amp-list-resizable-children. Запустите эксперимент, нажав на кнопку ниже. Некоторые компоненты требуют, чтобы был активирован канал с бета-сборками AMP. Learn more about experimental features.

Enable Experiment
AMP Version
PROD BETA

Посмотреть демо Открыть в песочнице

Introduction

This sample showcases how to build a comment section in AMP HTML using the amp-form component after a successful login flow. Login, type a comment and press the COMMENT button; your comment will not be persisted, so reload the page if you want to start commenting again.

Setup

We need a few components to implement the comment section:

amp-form for submitting new comments via a web form.

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

amp-access for implementing a sign-in.

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

amp-list for dynamically rendering comments.

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

amp-mustache for client-side rendering.

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

amp-access requires the definition of 3 endpoints as documented here.

This sample allows an user to login and logout using an email and a password. Logout is implemented by configuring a second endpoint in the login property sign-out, find more here.

<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>

In order to add comments users need to be logged in. We use amp-access to integrate login and to show and hide the login button depending on whether the user is logged in. on="tap:amp-access.login-sign-in" specifies which action should be taken when clicking on the login button: login defines the property inside the amp-access json configuration, while sign-in defines the endpoint.

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

We specify the logout via a login endpoint to be able to use the return URL environment variable.

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

Listing all comments

We use an amp-list to render existing comments to make sure that the latest comments appear if the page is loaded via the AMP Cache. As we don't know the number of comments in avance, we add an overflow button.

<amp-list id="comments" class="comments" src="https://amp.dev/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>

It's easy to implement a button to refresh the comments using the amp-list's refresh action. We combine it with the changeLayoutToContainer action to resize the amp-list to fit the updated content.

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

Writing a comment

Use amp-form for submitting a new comment. When the submit-success event is fired, we trigger a refresh of the comments list via the refresh action and resize the list via changeToContainerLayout. We also clear all form fields using the clear action.

<form id="comment" class="comment-form" amp-access="loggedIn" amp-access-hide method="post" action-xhr="https://amp.dev/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

Written by @aghassemi