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

前回 twig ファイルについて確認を進めましたが、今回も引き続き確認を進めたいと思います。
今回は EC-CUBE3 で twig を使用する際のお約束についてです。
一般的ではない事ではありませんが、EC-CUBE3 では覚えて置く必要のある内容です。
それでは確認して行きましょう。
　
■ default_frame.twig
　まず、EC-CUBE3 で twig を使用する場合絶対に必要となるファイルです。
　以下のフォルダに格納されている「default_frame.twig」です。
　/src/Eccube/Resource/template/default/
　
　簡潔に言うと html、head、body などのタグを含めた基本となる HTML構築の骨格となる部分になります。
　実際には該当のファイルを以下のフォルダにコピーして使用することになります。
　/app/template/default
　
　このファイルには先ほど述べた head、body のタグだけでは無く共通で使用する meta、style、scriptなどのタグも記載することになります。
　全体を通して設定しておきたい css や javascript に関してはここで設定しておくと便利です。
　と云うより、このファイルには全体の大枠と各種読み込みのファイルを設定するぐらいしかすることが無かったりします。
　
　それでは、このファイルは各種読み取り用の設定を行う為のファイルかというと、勿論それだけのファイルではありません。
　むしろ、メインの意味としては、先にも述べた通り HTML の骨格を設計する部分になるのだと思います。
　
　EC-CUBE は 2系、3系を問わず「レイアウト」という概念があります。
　メインとなる機能を除き「ブロック」という単位の HTML を、ある程度自由に表示領域への配置を行う為の仕組みです。
　例えば”会員ログイン”用の「ブロック」をデザインに合わせて位置を変更するなどを容易に行う事が出来ます。　
　
　EC-CUBE3 の「レイアウト」で指定できる表示領域は以下の内容が存在します。
　　head
　　#header
　　#contents_top
　　#side_left
　　#main_top
　　「Main」 ←　ここがページのメイン内容を表示する場所になります。
　　#main_bottom
　　#side_rifght
　　#contents_bottom
　　#footer
　　　※　詳細な位置関係は管理画面にてご確認下さい（笑）
　　　　　管理画面＞コンテンツ管理＞ページ管理＞レイアウト管理
　
　default_frame.twig はこのレイアウトの骨格を作成する形になるのです。
　例えば「#contents_top」を例にとると以下のような記述がされています。

        <div id="contents_top">
            {# ▼TOP COLUMN #}
            {% if PageLayout.ContentsTop %}
                {# ▼上ナビ #}
                {{ include('block.twig', {'Blocks': PageLayout.ContentsTop}) }}
                {# ▲上ナビ #}
            {% endif %}
            {# ▲TOP COLUMN #}
        </div>

　上記コードの「include」の処理によって「ブロック」などを所定の位置に表示させる仕組みです。
　しかし、実際には「<div id=”contents_top”>」などの HTML が記載されることになります。
　これらに適切な id や class を付与したり、新たなタグを追加することを骨組みとして行う事になるのです。
　
　また、そのほかにも細かなレイアウト調整が 2系の時よりも容易になったのではないでしょうか。
　具体的に云うと以下のような部分です。

～ 略 ～
{% block stylesheet %}{% endblock %}
～ 略 ～
{% block javascript %}{% endblock %}
～ 略 ～

　上記も default_frame.twig の一部ですが上記の内容の目的は css や javascript を「ページごと」に追加することを可能する部分です。
　この点については次回改めて説明をしたいと思うので障りの部分だけの説明となります。
　
　まぁ、各ページ毎の内容に関して、約束事を守って記載する限り該当ページのみ内容を反映することが
　出来ると云ったことになります。
　
　EC-CUBE 2系の場合には「特定のページのみ状態をヘッダ部分への表示」が多少なりとも面倒な処理でした。
　しかし、今回からは上記の内容にて簡易に対応を行う事が可能になるはずです。
　これば便利です。非常に期待しています。
　
　
と、まぁ簡単に説明するとこんな感じになります。
公開に関して非常に重要なファイルと云うことですね。
また、サイト内でガラッとページの雰囲気を変更したい場合には default_frame.twig 以外のファイルを指定して表示することも可能なはずです。
その辺も次回以降に確認して行きたいと思います。
　
それでは今回はここまでとさせて頂きます。

EC-CUBE3 分室