amp-mustache

0.2 0.1

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

版本說明

語法

Mustache 是一種無邏輯的範本語法。請參閱 Mustache 規格 以瞭解更多詳細資訊。一些核心的 Mustache 標籤包括

• {{variable}}：變數標籤。它輸出變數的 HTML 逸出值。
• {{#section}} {{/section}}：區段標籤。它可以測試變數是否存在，如果它是陣列，則可以迭代它。
• {{^section}} {{/section}}：反向標籤。它可以測試變數是否不存在。
• {{{unescaped}}}：未逸出的 HTML。它輸出的標記受到限制 (請參閱下方的「限制」)。

用法

amp-mustache 範本必須根據 AMP 範本規格 定義和使用。

首先，amp-mustache 必須像這樣宣告/載入

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

然後，Mustache 範本可以定義在 script 或 template 標籤中，如下所示

<!-- Using template tag. -->
<template type="amp-mustache">
  Hello {{world}}!
</template>

或

<script type="text/plain" template="amp-mustache">
  Hello {{world}}!
</script>

盡可能使用 template 標籤，因為 AMP 驗證提供有用的開發者體驗提示。對於邊緣情況以及在表格內容中範本化的問題，請使用 script 範本。請參閱下方「表格」章節。

範本如何被發現、何時被轉譯、資料如何被提供，這些都由目標 AMP 元素決定，該元素使用此範本來轉譯其內容 (例如，在 amp-list、amp-form 等中)。

限制

驗證

像所有 AMP 範本一樣，amp-mustache 範本必須是格式良好的 DOM 片段。這表示，除其他事項外，您不能使用 amp-mustache 來

• 計算標籤名稱。例如，不允許使用 <{{tagName}}>。
• 計算屬性名稱。例如，不允許使用 <div {{attrName}}=something>。

「三撇鬍鬚」的輸出經過清理，僅允許以下標籤

a, amp-img, article, aside, b, blockquote, br, caption, code, col, colgroup, dd, del, details, div, dl, dt, em, figcaption, figure, footer, h1, h2, h3, header, hr, i, ins, li, main, mark, nav, ol, p, pre, q, s, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, u, ul.

清理

Mustache 輸出經過清理是為了安全考量並維持 AMP 有效性。這可能會導致某些元素和屬性被靜默移除。

陷阱

巢狀範本

根據 AMP 驗證，<template> 元素不得為其他 <template> 元素的子元素。當巢狀使用兩個使用範本的元件時，可能會發生這種情況，例如 amp-list 和 amp-form。

為了解決這個問題，<template> 元素也可以透過元件上的 template 屬性，以 id 參照。

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

也可以表示為

<!-- Externalize templates to avoid nesting. -->
<template type="amp-mustache" id="myTemplate">
  <div>{{title}}</div>
</template>

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

表格

由於 AMP 範本字串必須在 <template> 元素中指定，這可能會因瀏覽器剖析而導致非預期的行為。例如，<table> 元素可能會導致文字的 寄養父代化。在以下範例中

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

瀏覽器將寄養父代化文字節點 {{#foo}} 和 {{/foo}}。

{{#foo}} {{/foo}}<table>
  <tr>
    <td></td>
  </tr>
</table>

解決方法包括將 Mustache 區段包裝在 HTML 註解中 (例如 <!-- {{#bar}} -->)、改用非表格元素 (如 <div>)，或使用 <script type="text/plain"> 標籤來定義您的範本。

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

引號逸出

當使用 amp-mustache 計算屬性值時，引號逸出可能會成為問題。例如

<template type="amp-mustache">
  <!-- A double-quote (") in foo will cause malformed HTML. -->
  <amp-img alt="{{foo}}" src="example.jpg" width="100" height="100"></amp-img>

  <!-- A single-quote (') or double-quote (") in bar will cause an AMP runtime parse error. -->
  <button on="tap:AMP.setState({foo: '{{bar}}'})">Click me</button>
</template>

在 {{foo}} 或 {{bar}} 變數中使用 HTML 字元碼將無法運作，因為 Mustache 會對 & 字元進行 HTML 逸出 (例如 " -> ")。一種解決方法是使用類似的字元，例如 ′ (′) 和 ″ (″)。

HTML 實體

HTML 實體在 <template> 元素中不會被保留。

如果您想要伺服器端轉譯包含使用者產生文字的 <template>，這可能會成為問題，因為包含 {{、}}、{{{、}}} 的使用者產生文字將被視為 Mustache 區段。例如，將 {{ 替換為 HTML 實體 {{ 將無法運作，因為當瀏覽器剖析 <template> 時，它們不會被保留。

解決方法包括將像 {{ 這樣的字串替換為不同的字元，或從使用者產生內容中完全移除它們。

驗證

請參閱 AMP 驗證器規格中的 amp-mustache 規則。