テンプレートの継承

Twigでも従来テンプレートと同じようにテンプレートの継承機能が利用できます。Twig標準の仕様に従います。

継承元テンプレート

継承元テンプレートでは、シンプルなHTMLレイアウトを定義します。

<!DOCTYPE html>
<html>
  <head>
    {% block headMeta %}
      {{ include('/include/head/meta.twig') }}
    {% endblock %}
    {% block headLink %}
      {{ include('/include/head/link.twig') }}
    {% endblock %}
    {% block headJs %}
      {{ include('/include/head/js.twig') }}
    {% endblock %}
  </head>
  <body>
    <header>
      <h1>ヘッダー</h1>
    </header>
    <main>
      {% block main %}
        <p>継承してメインコンテンツを設定してください</p>
      {% endblock %}
    </main>
    <footer>
      {% block footer %}
        <p>Site Footer</p>
      {% endblock %}
    </footer>
  </body>
</html>

この例では block タグを使用して、継承（子）テンプレートが継承する5箇所のブロックを定義しています。

このblockタグが行うことは、子テンプレートがテンプレートのその部分を上書きする可能性があることをテンプレート エンジンに伝えることだけです。

継承（子）テンプレート

継承（子）テンプレートは次のようになります。

{% extends 'parent_template.twig' %}

{% block headLink %}
  {{ parent() }}
  <link rel="stylesheet" href="/include/edit/custom.css" />
{% endblock %}

{% block main %}
  <p>
    メインコンテンツを上書き
  </p>
{% endblock %}

extendsタグは、テンプレートエンジンにこのテンプレートが別のテンプレートを「拡張」していることを伝えます。このテンプレートを評価する際、まず親テンプレートを探します。extendsタグはテンプレートの最初のタグである必要があります。

ここでは headLink ブロックと main ブロックを上書きしてます。子テンプレートは、 headMeta headJs footer ブロックを定義していないため、代わりに親テンプレートの値が使用されることに注意してください。

親ブロック

親ブロックの内容をレンダリングするには、  parent 関数を使用します。これにより、親ブロックの結果が返されます。

{% block headLink %}
  {{ parent() }}
  <link rel="stylesheet" href="/include/edit/custom.css" />
{% endblock %}

名前付きブロック

Twig では、読みやすさを向上させるために、終了タグの後にブロック名を置くことができます。

{% block main %}
  <p>
    メインコンテンツ...
  </p>
{% endblock main %}

Twigのブロック名にはいくつかの命名規則があります

  • 英字（アルファベット）と数字、アンダースコア（_）のみが使用可能

  • 英字から始めなければならない

有効なブロック名の例

  • headJs

  • head_js

  • headJs123

無効なブロック名の例

  • head-js

  • 123headJs