# 建立互動範例

建立範例
範例資料
嵌入範例部分。
水平版面

可以定義互動範例。範例或範例部分可以嵌入任何頁面。自動產生的連結讓訪客可以在遊樂場中開啟範例，並在其中變更範本、部分、輸入等，並能看到產生的輸出。

# 建立範例

若要定義範例，請在 examples 目錄中建立新的標記檔案。範例資料定義在所引用的範例頁面開頭資料中。請參閱 all-features-example-raw，以完整示範所有功能。

支援下列開頭資料屬性

layout：必須永遠為 InteractivePlaygroundLayout
example：包含範例
- template：主要的 Handlebars 範本
- partials：物件，每個註冊部分一個屬性，金鑰為部分名稱，值為部分內容
- preparationScript：在編譯和執行範本之前執行的指令碼。Handlebars 在此指令碼中可用做全域變數。
- input：嵌入 YAML 物件的範本輸入。
- errorExpected：布林值（預設值：false），用來指定此範例預期會擲回錯誤。預設情況下，在執行期間擲回錯誤的範例會導致整個網站建置失敗。如果您撰寫說明錯誤的範例，則需要將此旗標設定為 true。

範例的輸出會自動使用 Handlebars 的最新版本計算。

# 範例資料

範例應盡可能使用常見資料集的變形。因此，檔案 src/examples/_example-base-data.yaml (在新視窗中開啟) 包含可重複使用並調整為每個範例的資料。如果該檔案中的資料不足，請新增資料，但請確保資料以某種方式相關。

# 嵌入範例的部分。

<ExamplePart>-元件可讓您在目前的部分中顯示範例的一部分。

<ExamplePart examplePage="/examples/builtin-helper-each-block" show="template"/>

會產生

範本

<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

此元件的道具為

examplePage：範例頁面路徑，位於 src 資料夾下方
show：範例中應插入頁面的部分。可能的數值為 template、input、output、error、preparationScript 和 partial
name（選用）：僅在 show="partial" 時需要此道具。它定義應插入範例的局部名稱。

如果您想將範例的部分嵌入流動文字中，此元件非常有用，您可以使用 <ExamplePart examplePage="/examples/all-features" show="input" /> 插入輸入 JSON，以下程式碼片段將出現在頁面上

input

{
  persons: [
    { name: "Nils", age: 20 },
    { name: "Teddy", age: 10 },
    { name: "Nelson", age: 40 },
  ],
}

然後，為了向讀者顯示範本，您可以使用具有相同 examplePage 的 show="template"。

範本

{{>header}}
<hr/>
{{#each persons}}
{{>person person=.}}
{{/each}}

您可以使用 show=partial 和 name=person 等來呈現部分內容

partial: person

The person {{loud person.name}} is {{person.age}} years old.

如果您有使用輔助函式的範例，您可能還想包含準備腳本

preparationScript

Handlebars.registerHelper('loud', function (aString) {
    return aString.toUpperCase()
})

# 水平配置

如果您想將兩個範例部分水平配置，可以使用 <Flex> 組件。

<Flex>
<ExamplePart examplePage="/examples/builtin-helper-each-block" show="template"/>
<ExamplePart examplePage="/examples/builtin-helper-each-block" show="input"/>
</Flex>

變成

範本

<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

輸入

{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley",
  ],
}

← 改進文件按鈕連結 →