AMP 中的用戶端算繪
本指南概述 AMP 中的用戶端算繪可能性。根據預設，AMP 網頁會在伺服器端算繪。然而，在某些情況下，有必要動態算繪資料，例如文章清單或使用者購物車中的項目。
網頁載入時算繪
雖然名稱可能具有誤導性，但 amp-list 是 AMP 中用戶端算繪的首選解決方案。amp-list 元件適用於各種用戶端算繪需求。它可以算繪單一項目，或提供無限捲動和分頁功能。它允許在網頁載入時動態算繪內容，並且可以在使用者與網頁互動後更新該內容。使用預設的載入指示器，或建立您自己的指示器，以獲得最佳的使用者體驗，尤其是在從遠端端點擷取時。
amp-list 元件使用遠端 JSON 端點、本機 amp-state 元素或本機 amp-script 元素，在網頁載入時算繪動態內容。預設使用 amp-list 需要每個 JSON 都有一個項目陣列。
<amp-state id="weekdays">
<script type="application/json">
{
"items": [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
]
}
</script>
</amp-state>
<amp-list layout="fixed-height"
height="126"
src="amp-state:weekdays"
binding="no">
<template type="amp-mustache">
{{.}}
</template>
</amp-list>
這可以透過使用 single-item 和 items 屬性進行調整。
<amp-list layout="fixed-height"
height="18"
src="/documentation/examples/api/time"
binding="no"
single-item
items=".">
<template type="amp-mustache">
The time is: {{time}}
</template> </amp-list>
AMP 使用 amp-mustache 範本算繪內容。
為了獲得最佳使用者體驗，並保持 AMP 有效性，您必須預先定義算繪內容的高度。這可以使用以下版面配置來完成
回應式填滿固定高度固定彈性項目
最佳做法是在 amp-list 元素上使用 fixed-height 版面配置屬性。
為了避免在內容載入時出現空白空間，請在 amp-list 元件中顯示預留位置。
<amp-list height="32" width="80"
src="/login-button"
binding="no"
items="."
single-item>
<template type="amp-mustache">
{{#loggedIn}}
<button>Logout</button>
{{/loggedIn}}
{{^loggedIn}}
<button>Login</button>
{{#loggedIn}}
</template>
<button disabled placeholder>Login</button>
</amp-list>
如果使用多個 amp-list 實作，最佳做法是使用單一擷取並共用資料。
從 JSON 端點算繪
從 JSON 端點算繪時，而不是從本機 amp-state 元素算繪時，請包含 binding 屬性並將其設定為 no。
<amp-list layout="fixed-height"
height="100"
src="/static/samples/json/examples.json"
binding="no">
<template type="amp-mustache">
<div><a href="{{url}}">{{title}}</a></div>
</template>
</amp-list>
如果未指定 binding="no"，則 amp-list 預設為 binding="always"。這表示繫結會在網頁載入時執行，導致 AMP 封鎖算繪並減慢網頁速度。
從 amp-state 在網頁載入時算繪
使用 amp-list 可以在網頁載入時從 amp-bind 啟用狀態算繪。您可以透過使用 src 中的 amp-state 字首 屬性值，從本機 amp-state 元素在網頁載入時算繪資料。
<amp-state
id="hikes">
<script type="application/json">
{
"items": [
{
"title": "Coastal Sights",
"city": "San Francisco",
"length": "9.3 Miles",
"hikeUrl": "/coast",
"credit": "Photo by Joseph Barrientos",
"imageUrl": "https://images.unsplash.com/photo-1449034446853-66c86144b0ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
"altDescription": "Photo of the Golden Gate Bridge."
},
{
"title": "Through the Park",
"city": "San Francisco",
"length": "5 Miles",
"hikeUrl": "/park",
"credit": "Photo by Claudia Lorusso",
"imageUrl": "https://images.unsplash.com/photo-1565086565717-351194b2488b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80",
"altDescription": "Photo of the Academy of Sciences in Golden Gate Park."
},
{
"title": "Historic Brownstones",
"city": "New York City",
"length": "1.2 Miles",
"hikeUrl": "#",
"credit": "Photo by Rachel Martin",
"imageUrl": "https://images.unsplash.com/photo-1542042238232-3a0b14425b71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80",
"altDescription": "Photo of Brownstone building in New York City."
},
{
"title": "Big Apple, Big Bites",
"city": "New York City",
"length": "3.2 Miles",
"hikeUrl": "#",
"credit": "Photo by Peter Bond",
"imageUrl": "https://images.unsplash.com/photo-1515711127392-4c62a99c3393?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2854&q=80",
"altDescription": "Photo of a diner."
}
]
}
</script>
</amp-state>
<amp-list
width="auto"
height="300"
layout="fixed-height"
src="amp-state:hikes"
[src]="hikes"
binding="always"
reset-on-refresh>
<template type="amp-mustache">
<div class="hike-display">
<amp-img src="{{imageUrl}}" width="300" height="225" alt="{{altDescription}}"></amp-img>
<br />
<span class="image-credit">{{credit}}</span>
<br />
<a class="hike-title" href="{{hikeUrl}}">{{title}}</a>
<br />
<span class="image-credit">{{city}}</span>
</div>
</template>
<div overflow class="list-overflow" style="background-color:red;">
See more
</div>
</amp-list>
如需有關此實作的詳細資訊，請參閱從狀態初始化 amp-list 的價值網誌文章。
使用 amp-script 的自訂解決方案
對於需要自訂邏輯的用戶端算繪，可以使用 amp-script。它允許自訂 JavaScript，並支援使用其他 UI 程式庫。與 amp-list 類似，如果事先知道版面配置高度，您只能使用 amp-script 在網頁上算繪內容。
使用者互動後算繪
您可以在使用者透過 amp-bind 互動後，變更 amp-list 元件的 JSON 端點或 amp-state 變數。這允許在使用者與網頁互動後算繪新的內容。
<button on="tap:AMP.setState({
colors: ['red', 'blue', 'green', 'yellow']
})">Add list content</button>
<amp-list width="0"
height="0"
[src]="colors"
[is-layout-container]="true"
items="."
binding="no">
<template type="amp-mustache">
{{.}}
</template>
</amp-list>
變更 amp-list 元件中顯示的內容可能需要變更大小。使用 [is-layout-container] 可繫結屬性 會將版面配置變更為 container，允許 amp-list 的子項定義其大小。
在沒有使用者互動的情況下更新即時內容
amp-live-list 元件提供了一個包裝函式和最少的 UI 來即時更新內容。某些即時內容算繪案例可能需要比 amp-live-list 提供的更多自訂。在這些情況下，amp-script 允許複雜的邏輯，並且可以使用其他 UI 程式庫，例如 Preact 或 Vue.js，以及使用 WebSocket API。
但是，使用 amp-script 算繪即時內容有一些限制。這種方法允許建立任何非 AMP 元素，但僅限 amp-img 和 amp-layout 元件。您可以透過將更新寫入 amp-state 並透過 amp-list 算繪來解決此問題。
使用 amp-access 進行個人化
amp-access 元件允許個人化網頁內容。此資料透過 JSON 端點提供，該端點使用 amp-mustache 來更新網頁內容。
amp-access 的最大優點是沒有版面配置限制。這提供了很大的彈性，但您必須確保它不會導致內容跳動。這可能會損害您的 Web Vital 分數。
算繪表單回應
amp-form 元件允許用戶端算繪 JSON 回應。與 amp-mustache 一起使用時，表單能夠傳達提交成功和失敗。
-
貢獻者： @sbenz