【3.0.13】twigファイルについて（3）

さて今回も引き続き twig について調べてみようと思います。
前回は基本ファイルの「default_frame.twig」について調べましたが、今回はそれ以外の部分です。
　
■ index.twig（トップページ用ファイル）
　今回は EC-CUBE3 で twig を使用する際のページに該当するファイルです。
　例として説明するページはとりあえずトップページですが、以下のフォルダに格納されている「index.twig」です。
　/src/Eccube/Resource/template/default
　
　EC-CUBE3 でページを表示する場合、実際にはそれぞれ指定されるファイルがあります。
　EC-CUBE 2系でも存在していましたが、各ページを表示する際のメイン部分用のファイルです。
　今回の例では該当ファイルを以下のフォルダにコピーして使用することになります。
　/app/template/default
　
　前回に調査した「default_frame.twig」で云うと以下の部分に表示される項目です。

～ 略 ～
                {# ▲メイン上部 #}

                <div id="main_middle">
                    {% block main %}{% endblock %}
                </div>

                {# ▼メイン下部 #}
～ 略 ～

　この「{% block main %}{% endblock %}」の部分に対して「index.twig」に記載されている以下の部分が表示される形です。

～ 略 ～
{% block main %}
    <div class="row">
       <div class="col-sm-12">
            <div class="main_visual">
                <div class="item">
                  <img src="{{ app.config.front_urlpath }}/img/top/mv01.jpg">
                </div>
                <div class="item">
                  <img src="{{ app.config.front_urlpath }}/img/top/mv02.jpg">
                </div>
                <div class="item">
                  <img src="{{ app.config.front_urlpath }}/img/top/mv03.jpg">
                </div>
            </div>
        </div>
    </div>
{% endblock %}

　まぁ、指定した「index.twig」の「{% block main %}{% endblock %}」に記載した内容が「default_frame.twig」の「{% block main %}{% endblock %}」に表示されると云うことですね。
　
　しかし、実際には注意する必要があります。
　それは以下の部分になります。

{% extends 'default_frame.twig' %}

　ここがページとして使用する twig ファイルの場合非常に重要です。
　この部分で基本的な基礎として使用するファイルを使用する部分になるからです。
　※　今回の例であれば ‘default_frame.twig’ を継承すると云う意味になります。
　
　実際には上記の一文が無くても表示することは問題無くできます。
　ただし、その場合には head や body のタグをすべて別途記載する必要があります。
　サイト内に全く別のデザインを取り込む場合には良い手段になるかと思います。
　　例えば別のベースファイルを作成して置き、ページによって基礎となるファイルを変更するなど・・・
　
　しかし、実際には CMS を使用したサイトを構築する以上は、ヘッダ部分やフッタ部分などの基礎となる部分はまとめたいと思います。
　そのためにも、基礎ファイルの読み込みはしっかり意識するほうが良いでしょう。
　
　さて、その他にも注意する点があります。

{% set body_class = 'front_page' %}

{% block javascript %}
<script>
$(function(){
    $('.main_visual').slick({
        dots: true,
        arrows: false,
        autoplay: true,
        speed: 300
    });
});
</script>
{% endblock %}

　それが上記の例のような部分です。
　これも基礎となるファイルと合わせて覚えておく必要があります。
　まずは「{% set body_class = ‘front_page’ %}」ですがこれは実際に HTML のソースを出力する際に、変数の切り替えを行っています。
　基本となるファイルに以下のようなコードを記述しておくことで各ページごとに body の class を変更することが出来ます。

<body id="page_{{ app.request.get('_route') }}" class="{{ body_class|default('other_page') }}">

　・・・便利です（笑）
　EC-CUBE 2系と比べて本当に便利になったと思います。
　
　次に「{% block javascript %}{% endblock %}」の部分です。
　行っていることはメイン部分と同じような処理です。
　つまり、メイン以外にも各ページごとに出力することを容易に行うことが出来るのです。
　
　何よりも有難いのは基本となるページと整合性を取ってさえいれば勝手に項目を追加することが出来る点です。
　例えば基礎となるファイルとページとなるファイルに「{% block ＜ここの名称をそろえる＞ %}{% endblock %}」などを記述するだけです。
　特に難しい設定は不要なようです。
　このため、特定のページにのみ表示させたい Javaascript や CSS を別途記載することが出来るのです。
　・・・吃驚するほど便利です（笑）
　
　ちなみに各ページファイルにて「{% block javascript %}{% endblock %}」を記述する必要が無い場合は記述する必要はありません。
　基礎となるファイルの部分に出力したい文言があるときだけ記述する形ですね。
　
　
と、こんな感じです。
次回はブロックについて・・・、とも思いましたがブロックに関しては特に特殊な動きがありません。
また見落としがあれば追記したいと思いますがとりあえずは twig に関しての簡単な説明は以上ですね。
　
それでは今回はここまでとさせて頂きます。

EC-CUBE3 分室