include と component

他の Markdown ファイルを取り込んで再利用できます。

使い分け

構文	いつ使うか
include	props が不要な単純な取り込み
component	props で差し込みたい、呼び出し側から値を渡したい

指定した .md ファイルを読み込み、その位置に展開します。props はありません。親スコープのテンプレート変数は 見えます。

<!--
@hg
include ./components/description.md
@endhg
-->

ファイルが見つからない場合は file_not_found エラーで中断します。

props を持つ .md ファイルを関数のように呼び出せます。

<!--@hg
component city-item.md as cityItem
@endhg-->

{{ }} 内のみで呼び出します。

- {{ cityItem({ city: "Osaka", population: 2825000 }) }}

city-item.md:

---
props:
  city:
    type: string
  population:
    type: number
---

Name: {{ city }} / Population: {{ population.toLocaleString('ja-JP') }}

項目	内容
定義	`@hg` 内で `component <path> as <name>`
呼び出し	`{{ }}` 内のみ
`as` のスコープ	定義したファイルだけでなく、include 先からも見える
`as` 名の衝突	エラー（後勝ちにしない）
戻り値	レンダリング結果を `{{ }}` に埋め込む
出力行数	単一行のみ（改行を含むと `component_multiline_output` エラー）
extend	component 内では不可（スキップ + 警告）

ループ変数を props に渡せます。

<!--@hg
each item in cities
@endhg-->
- {{ cityItem({ city: item.name, population: item.population }) }}
<!--@hg
endeach
@endhg-->

include / component / extend の循環を検出した場合、当該取り込みを スキップし警告します（エラーではありません）。