blocs/blocs: テンプレートの再利用（data-include / data-bloc）

テンプレートの再利用により、共通のヘッダーやフッターなどを一元管理し、複数ページで効率よく使い回す方法を説明します。

ブロックの定義（data-bloc）

data-bloc でテンプレート内に再利用可能な部品（ブロック）を定義します。タグ記法・コメント記法の両方で使用可能です。

サンプルコード

コメント記法:

<!-- data-bloc="footer" -->
フッター
<!-- data-endbloc -->

タグ記法:

<div data-bloc="footer">
    フッター
</div>

ブロックの読み込み方法

data-include で読み込むと、data-bloc で定義されていない部分（本文）がそのまま読み込まれます。data-bloc で定義されたブロックは、別途 data-include で明示的に読み込む必要があります。

ブロックの再定義（上書き）

同じ data-bloc 名で複数回定義した場合、後の定義が優先されます。

<!-- data-bloc="footer" -->
フッター1
<!-- data-endbloc -->

<!-- data-bloc="footer" -->
フッター2  ← こちらが使われる
<!-- data-endbloc -->

注意: data-bloc と data-exist の併用

data-bloc は必ずブロックとして定義されるため、data-exist による条件分岐と併用してもブロック定義を制御することはできません。

テンプレートの読み込み（data-include）

data-include で他のテンプレートファイルやブロックを読み込みます。コメント記法でのみ使用可能です。

サンプルコード

<!-- data-include="header.html" -->
テストです。

テンプレートに引数を渡す方法

<!-- data-bloc="button_href" -->
    <a :href=$buttonHref>Link</a>
<!-- data-endbloc -->

<!--
    data-include="button_href"
    $buttonHref="./"
-->

条件付き読み込み

data-exist と組み合わせると、条件を満たす場合のみ読み込めます。

<!-- data-include="header.html" data-exist=$isHeader -->

テンプレートが存在する場合のみ読み込む

data-exist を値なしで指定すると、テンプレートが存在する場合のみ読み込み、存在しない場合はエラーを回避できます。

<!-- data-include="footer" data-exist -->

ブロックの存在を間接的に判定する方法

data-none では直接ブロックの存在を確認できません。ブロック内で変数を定義して判定します。

<!-- data-bloc="footer" -->
<!-- $isFooter=true -->
<!-- data-endbloc -->

<!-- data-include="footer" data-exist -->
<!-- data-none=$isFooter -->
代替フッター
<!-- data-endnone -->