テンプレートの再利用（ブロック形式）

@include には、1 行で完結する記述のほかに、ブロック形式 の記法もあります。

ブロック形式では、React のように子要素を渡すことができ、インクルード先では @children を使ってその内容を描画できます。

@include の括弧内は、第一引数にコンテンツ ID、第二引数に props や query を含むオブジェクトを指定します。第二引数は省略できます。

インクルード元のテンプレート例：

@include ('card', {
  props: {
    title: 'お知らせ'
  }
})
  <p>メンテナンスは 10 月 1 日に実施されます。</p>
@endinclude

インクルード先のテンプレート例（card）：

<div class="card">
  <h2>{{ props.title }}</h2>
  <div class="card-body">
    @children
  </div>
</div>

最終的なレンダリング結果例：

<div class="card">
  <h2>お知らせ</h2>
  <div class="card-body">
    <p>メンテナンスは 10 月 1 日に実施されます。</p>
  </div>
</div>

まとめ