- {% extends ‘default_frame.twig’ %}
- {% block main %}{% endblock %}
Twigテンプレート特有の、これらの記法ってどういう意味？
本記事では、EC-CUBE（Symfony）で用いられるテンプレートエンジン『Twig』の基本となる、継承やブロックを中心に纏めています。
EC-CUBE 4で用意されているTwigファイルを元に説明しているので、実際にコードを弄りながら見てみると理解が早いかもしれません。
なお、Twigについては以下記事でも纏めていますので、合わせてご覧ください。
- Twig まとめ(2) ～ if / for / set / with ～
- Twig まとめ(3) ～ trans / nl2br / escape / raw / price ～
- Twig まとめ(4) ～ マクロについて ～
デフォルトのTwigテンプレート（TOPページ）から、Twigを理解する
EC-CUBE 4で、最初から用意されているTOPページのTwigテンプレートは以下のようになっています。
（コードは一部省略。EC-CUBE管理画面のコンテンツ管理→ページ管理から、下記ファイルが見れます。）
{#
This file is part of EC-CUBE
Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
http://www.ec-cube.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}
{% set body_class = 'front_page' %}
{% block stylesheet %}
<style>
{# 〜略〜 #}
</style>
{% endblock %}
{% block javascript %}
<script>
{# 〜略〜 #}
</script>
{% endblock javascript %}
{% block main %}
<div class="ec-sliderRole">
<div class="main_visual">
<div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>
<div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
<div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div>
</div>
</div>
{% endblock %}後半のdivタグを除き、一般的なHTMLタグ（<html>や<body>）は記述されていません。
一方、{# #}や{% %}で囲まれたTwig特有の記述が見られます。
Twigテンプレートを使いこなすには、これらの記述方法を理解する必要があります。
{# ~ #} → コメントアウト
EC-CUBEで用意されているTwigテンプレートの冒頭数行には、{# #}で囲まれたコピーライトに関する記述がありますね。
{# #}で囲われた部分はいわゆるコメントアウトで、この部分に書かれた内容は実行されません。
HTMLでコメントアウトする場合（<!– –>）とは記述方法が異なるので、注意しましょう。
{% set %} → 変数設定
以下のように記述することで、テンプレート側で変数を設定できます。
{% set 変数 = 値 %}詳しい内容は こちらの記事 で解説しています。
{% extends %} → 継承
{% extends ファイル名 %} を最初に記述しておくことで、指定したテンプレートを継承することができます。
継承とは、別で用意されているテンプレートを読み込み、そこに新しい内容を上書きして新たなテンプレートを作る機能です。
ここでは以下のような記述になっています。
{% extends 'default_frame.twig' %}これは「default_frame.twig」というTwigテンプレートを継承し、新しいテンプレートを作ることを意味します。
継承とはどのような仕組みか？
「default_frame.twig」の中身を見ながら、継承の仕組みを見てみます。
まず「default_frame.twig」ファイルは、「src/Eccube/Resource/template」下に格納されています。
他の記事で ファビコンの変更 や titleタグ の変更 を行っている場合、「app/template/default」下に「default_fram.twig」を新規作成している場合があります。その際はそちらを参照してください。
「default_frame.twig」ファイルは以下のような構成になっています。（コードが長いため一部を抜粋）
<!doctype html>
{#
～～～
#}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
～～～
<title>{{ BaseInfo.shop_name}}</title>
～～～
<link rel="stylesheet" href="">
～～～
{% block stylesheet %}{% endblock %}
～～～
</head>
<body>
～～～
{% block main %}{% endblock %}
～～～
{% block javascript %}{% endblock %}
～～～
</body>
</html>こちらのファイルでは、<html>や<head>、<body>といった、一般的なHTMLの記述になっていますね。<title>タグや<meta>タグなども記載されています。
継承とは、この「default_frame.twig」をベースとし、継承先のTwigテンプレートの内容が反映されて新しいページが作られる、という仕組みになっています。（継承先Twigテンプレートどのように反映されるかは次項にて。）
TOPページのTwigテンプレート「index.twig」は、この「default_frame.twig」を継承しているため、<html>や<body>などのタグを書かなくても良いというわけです。TOPページに限らず、継承しているページはすべて同じように反映されるため、レイアウトを統一したりコードの編集が楽になったりというメリットがあります。
{% block %} → ブロック
Twigテンプレートでは、以下のようなブロックを用いた構文が使われます。
{% block 名前 %}
〜〜〜
{% endblock %} Twigでは、上記で囲まれた部分を 指定した名前のブロック として扱います。
ブロックの内容が、継承元のTwigに上書き（オーバーライド）される
例えば、TOPページ「index.twig」には {% block main %}{% endblock %} で囲まれた部分に、スライド画像を表示する<img>タグが3つ書かれています。
また、継承元の「default_fram.twig」にも {% block main %}{% endblock %} の記述があります。（こちらの中身は空です。）
このように記述すると、
- 継承元「default_frame.twig」の {% block main %}{% endblock %} に、
- 継承先「index.twig」の {% block main %}{% endblock %} の内容が、
上書き（オーバーライド）されます。
同様に、{% block stylesheet %}{% endblock %} や {% block javascript %}{% endblock %} に記述した内容も上書きされます。
以下記事でCSSとJavaScriptの適用方法を紹介しておりますが、それはこの仕組みを利用しています。
継承元「default_frame.twig」
<html>
<head>
<meta>
<title></title>{% block stylesheet %}
{% endblock %}
</head>
<body>{% block main %}
{% endblock %}
{% block javascript %}
{% endblock %}
</body>
</html>継承先「index.twig」
{% extends 'default_frame.twig' %}{% block stylesheet %}
<style>
○○○○○
</style>
{% endblock %}
{% block javascript %}
<script>
××××××
</script>
{% endblock %}
{% block main %}
<div class=”ec-sliderRole”>
△△△△△
</div>
{% endblock %}
最終的に生成される内容
<html>
<head>
<meta>
<title></title>
<style>
○○○○○
</style>
</head>
<body>
<div class="ec-sliderRole">
×××××
</div>
<script>
△△△△△
</script>
</body>
</html>EC-CUBEで用意されているページのほとんどには、最初に {% extends ‘default_frame.twig’ %} が記載されています。
「default_frame.twig」をベースとすることで基本情報やレイアウトが統一されます。
また、各ページにはメインの内容だけを書けば良いため、コードの可読性も上がります。
Twigでは、extendsを使用して2つ以上のテンプレートを継承することはできません。extendsは、単一の親テンプレートから継承するために設計されています。もし複数のextendsがある場合は、最初のextendsのみを認識し、それ以降のextendsは無視されます。
{% %} を使ったその他の記法
ここで紹介した以外にも、Twigテンプレートには {% %} というタグを使ってさまざまな機能が用意されています。
- {% set %} → 変数設定
- {% if %} → 条件表示
- {% for %} → 繰り返し表示
詳しくは以下記事にて。
また、{{ 値 | trans }} のように書くことで特殊な出力を行うフィルター機能もあります。
詳しくは以下記事にて。