テンプレートの再利用

@include: ディレクティブを使うと、現在のテンプレートに別のコンテンツを挿入できます。

レイアウトの共通化やコンポーネントの再利用に適した構文です。

ひとつのテンプレートに複数のコンテンツを挿入したり、インクルード先で更に別のコンテンツを挿入したりできます。

さらに、インクルード先に引数やクエリパラメータを渡すこともできます。

基本構文

@include: 'content_id';

'content_id' には、パレット CMS のコンテンツ ID を文字列として指定します。

with 句で props を指定することで、インクルード先に任意の関数や定数を渡せます。

これらの値は props オブジェクトとして、インクルード先のテンプレート内で参照できます。

インクルード元の例：

@include: 'header' with {
  props: {
    title: 'マイページ'
  }
};

インクルード先の例（header）：

<head>
  <title>{{ props.title }}</title>
</head>

with 句で query を指定することで、インクルード先にクエリパラメータを付加できます。

インクルード先が検索一覧コンテンツであれば、検索条件をすべて引き継いだり、個別に指定することもできます。

詳細コンテンツであれば、表示対象の ID を渡せます。

フリーワード検索の例：

@include: 'search_form' with {
  query: {
    keyword: 'apple'
  }
};

ヒント

query を明示して値を省略した場合は、現在のテンプレートに渡されているすべてのクエリパラメータ が自動的に引き継がれます。

@include: 'search_form' with { query };

props と query を同時に渡すこともできます。

@include: 'list_header' with {
  props: {
    title: '検索結果'
  },
  query: {
    page: 2
  }
};

条件に応じて挿入するコンテンツを切り替えたい場合は、式を使って動的にコンテンツ ID を生成できます。

@include: user.logged_in ? 'header_logged_in' : 'header_guest';

props や query との併用もできます。

@include: user.role === 'admin' ? 'admin_nav' : 'user_nav' with {
  props: {
    section: 'dashboard'
  }
};

まとめ