留言區

實驗性功能

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

啟用實驗功能
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 快取載入頁面時會顯示最新的留言。由於我們事先不知道留言的數量，因此我們新增了一個溢位按鈕。

<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 的 refresh 動作，可以輕鬆實作一個按鈕來重新整理留言。我們將其與 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 撰寫