テンプレートの継承機能を追加

テンプレートを継承できる機能が追加されました。今までは、テンプレートをインクルードする事でテンプレートファイルを分割していましたが、この継承機能と組み合わせる事で、テーマをわかりやすく、シンプルに管理しやすくできます。

使用例

@section(header)
<header>...省略</header>
@endsection

@section(main)
   <h2>継承元のコンテンツ</h2>
@endsection

@section 要素

ポイントは@section(セクション名)と@endsectionで 囲んだブロックが継承できる範囲になります。 継承しそうなところを @section で囲みます。

@extend要素

@extend要素を使うことで、テンプレートを継承することが出来ます。
上記のテンプレートを継承してみます。

@extend(/layout/base.html)

@section(main)
<h2>継承したメインのコンテンツ</h2>
@endsection

表示されるHTML


<header>...省略</header>
<h2>継承したメインのコンテンツ</h2>

どうでしょうか？ 継承したテンプレートでは、メインのコンテンツしか記述していないのに、最終的に表示されるHTMLには継承元の情報も出力され、書き換えたいところだけ書き換えることが出来ました。

継承は、何回でも検証できますので、継承したテンプレートをさらに別テンプレートで継承するといった使い方もできます。

親テンプレートの利用

@section を使う事で、親テンプレートの要素を書き換える事ができるようになりましたが、全て置き換えてしまうので不便な場合があります。例えばJavaScriptの読み込みなどです。

全体で利用するJavaScriptは親テンプレートで読み込んでおきますが、継承したテンプレートのみでしか使わないJavaScriptを読み込みたい場合などがあります。

親テンプレート

@section(head-js)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js" charset="UTF-8"></script>
@endsection

子テンプレート

@section(head-js)
@parent <!-- ここに親の@section(head-js)内が挿入される -->
<script src="/js/example.js" charset="UTF-8"></script>
@endsection

@parent 要素

上記のように @parent要素を @section内で使うことにより、親テンプレートを参照できるようになります。更に親のテンプレートを参照する場合は、@@parent のように @の数を増やすことで可能です。

テンプレートの継承機能を使ってテーマを作ると、テンプレートを複数のレイヤーに分けることができ、変更箇所のみテンプレートに書けばいいので、シンプルで分かりやすく、共通箇所も共有できるので、保守しやすテンプレートになると思います。

コンテンツへ戻る