留言區

實驗性功能

此範例使用以下實驗性功能：amp-list-resizable-children。透過下方按鈕啟用實驗性功能。某些元件也需要啟用 AMP Beta 版頻道。深入瞭解實驗性功能。

啟用實驗性功能
AMP 版本
正式版 (PROD) Beta 版

檢視示範在 Playground 中開啟

簡介

此範例展示如何在 AMP HTML 中使用 amp-form 元件，於成功登入流程後建立留言區。登入、輸入留言並按下 [留言] 按鈕；您的留言不會被永久保留，因此如果您想重新開始留言，請重新載入頁面。

設定

我們需要一些元件來實作留言區

amp-form 用於透過網路表單提交新留言。

<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.dev.org.tw/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.dev.org.tw/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