AMP教學-amp-mustache

AMP教學-amp-mustache

先前曾經寫過一篇文章介紹如何用amp-list製作出推薦商品列表,當時已經應用了amp-mustache,此篇文章將更深入的講解各種寫法。

AMP-mustache允許支援 Mustache.js
這是一個可以產生字串js,讓json資料可以載入進template,html上面就會出現資料。amp-mustache主要可以帶入資料、判斷有無資料值、資料列表迴圈(通常和amp-list 配合)
在例如amp商品明細頁、購物車列表或是會員中心時,就可以帶入會員名稱、個人資料等。只要有使用到載入資料的部分,都會用到。

字串基本語法和說明

語法 說明
{{variable}} 基本資料呈現,傳入值的字串。
{{#section}}{{/section}} 區塊型的字串,可以判斷裡面有值存在,如果有值,並且裡面的值是群組化的,就會形成迴圈列表。
{{^section}}{{/section}} 與上述是反向的字串。可以判斷裡面值不存在。如果沒有值帶進來就會出現。(通常用在沒有值時出現警告訊息)
{{{unescaped}}} 非轉譯的HTML,可能標記會受到限制

範例:
JS載入 amp-mustache和amp-list

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

amp-mustache目前來到0.2版,新增支持SVG元素、壓縮率更好,通常會和-- amp-list、amp-form 之類的搭配使用
如果只單純使用amp-mustache,僅能夠載入純文字資料,無法做列表或迴圈等。此次仍以列表類的為主來介紹,因此仍要載入amp-list。

json資料
先製作一個cart.json,在裡面寫入資料:

{
"items": [
{
"fullname": "John Doe",
"phonenumber": "212-555-1212",
"cart_items": [
{
"name": "Pluot",
"quantity": 5,
"price": "$1.00"
},
{
"name": "Apple",
"quantity": 1,
"price": "$3.25"
}
],
"address": {
"addr1": "111 8th Ave",
"city": "New York",
"state": "NY",
"zipcode": 10011
}
}
]
}

html範例

<!-- 單一變數示範 -->
<amp-list src="/static/samples/json/cart.json" layout="fixed-height" height="56" binding="no">
<template type="amp-mustache">
Hi {{fullname}}!
</template>
</amp-list>

<!-- 判斷有值的時候 -->
<amp-list src="/static/samples/json/cart.json" layout="fixed-height" height="56" binding="no">
<template type="amp-mustache">
{{#phonenumber}}
The registered phone number is {{phonenumber}}
{{/phonenumber}}
</template>
</amp-list>

<!-- 判斷沒有值的時候 -->
<amp-list src="/static/samples/json/cart.json" layout="fixed-height" height="56" binding="no">
<template type="amp-mustache">
{{^twitter}}
There is no registered twitter account for this profile
{{/twitter}}
</template>
</amp-list>

<!-- 迴圈示範 -->
<amp-list src="/static/samples/json/cart.json" layout="fixed-height" height="80" binding="no">
<template type="amp-mustache">
<div id="cart">
{{#cart_items}}
<div class="cart-item">
<span>{{name}}</span>
<span>{{quantity}}</span>
<span>{{price}}</span>
</div>
{{/cart_items}}
<!-- 假如 cart_items裡面沒有值會出現裡面的文字 --->
{{^cart_items}}
<div>Your cart is empty!</div>
{{/cart_items}}
</div>
</template>
</amp-list>

語法解釋

語法 說明
{{fullname}} 撈取json裡面的fullname ,網頁會呈現出 John Doe
{{#phonenumber}}~{{/phonenumber}} 判斷json裡面phonenumber 有值嗎?,如果有值的話就出現以下這段 The registered phone number is {{phonenumber}}
{{^twitter}}~{{/twitter}} 判斷json裡面 {{twitter}}沒有值(或沒有這個名稱)嗎? 沒有值的話就出現以下這段 There is no registered twitter account for this profile
{{#cart_items}} ~ {{/cart_items}} 判斷json裡面cart_items 有值嗎?,如果有值的話就出現裡面內容,由於json的cart_items裡面還有多筆資料,html就會自動成為多筆,成為迴圈功能

 

限制
Tag Name:例如,不允許使用 <{{tagName}}>。
屬性名稱:例如,不允許使用<div {{attrName}}=something>。

系统會對“triple-mustache”進行排錯處理,因此允許以下標記:a、b、br、caption、colgroup、code、del、div、em、i、ins、li、mark、ol、p、q、s、small、span、strong、sub、sup、table、tbody、time、td、th、thead、tfoot、tr、u、ul。

<template>不得為子元素
根据 AMP 驗證,<template> 元素不得是其他 <template> 元素的子元素。因此在使用兩種模組時(例如 amp-list 和 amp-form)在網頁轉譯會出現<template>脫離<amp-list>不會在裡面一層。
為了解決這個問題,<template> 元素也可以通過組件 template 屬性由 id 引用。例如:

<amp-list id="myList" src="https://foo.com/list.json">
<template type="amp-mustache">
<div>{{title}}</div>
</template></amp-list>


也可以表示為:

<template type="amp-mustache" id="myTemplate">
<div>{{title}}</div></template>

<amp-list id="myList" src="https://foo.com/list.json" template="myTemplate"></amp-list>

由於這種脫離在表格上面會造成問題,因此要改用解決辦法
解決辦法包括将 Mustache 部分包含在 HTML 註釋(例如 <!-- {{#bar}} -->)、改用像 <div> 這樣的非表格元素,或者使用 <script type="text/plain"> 標記定義模板。

<script type="text/plain" template="amp-mustache">
<table>
<tr>
{{#foo}}<td></td>{{/foo}}
</tr>
</table></script>


引號使用
在 foo 中使用雙引號 (") 將導致 HTML 格式不正確,例如:

<template type="amp-mustache">
<amp-img alt="{{foo}}" src="example.jpg" width="100" height="100"></amp-img>

<!--  在 bar 中使用單引號(') 或雙引號 (") 将導致 AMP 解析錯誤 -->

<button on="tap:AMP.setState({foo: '{{bar}}'})">Click me</button></template>

在 {{foo}} 或 {{bar}} 中使用 HTML 代碼將不會有作用,因為 Mustache 將會對 &amp; 進行轉譯(例如 &quot; -> &amp;quot;)


更多的使用可以參考官方文件

參考
amp-mustache 說明文件
amp-mustache 範例網址

文章關鍵字:AMP AMP教學 AMP網頁 網頁技術

更多文章:

  1. AMP教學-AMP Email格式介紹
  2. Bento AMP正式釋出,AMP網頁的未來發展將會如何?
  3. AMP 2020 線上發表重點整理
  4. AMP教學-amp-img圖片
  5. AMP教學-amp-carousel 輪播