新しいテンプレート機能を使ってみよう

Ver. 2.8.0 より新しいテンプレート機能が追加されました。その機能とは、テンプレートを継承できる仕組みになります。 今までは、テンプレートをインクルードする事でテンプレートファイルを分割していましたが、この継承機能と組み合わせる事で、テーマをわかりやすく、管理しやすくできます。是非マスターしましょう!

テンプレート継承

初めに簡単な例を見てください。
ここでは、9:3のレイアウトを定義しているテンプレートを例にあげてみました。
ファイルの場所は、 themes/テーマ名/layout/main.html にしておきます。

※インクルードファイルはSimple2017を使用しています。別のテーマをお使いの場合は表示が崩れる場合がありますので、ご注意ください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--#include file="/include/head/meta.html" -->
    <!--#include file="/include/head/link.html" -->

    @section(head-js)
    <!--#include file="/include/head/js.html" -->
    @endsection
</head>
<body>

@section(header)
<!-- #include file="/include/body_start.html" -->
<!-- ヘッダー -->
<!--#include file="/include/header.html" -->
<!-- トピックパス -->
<!--#include file="/include/header/topicpath.html" -->
@endsection

<div class="acms-container">
    <!-- ※管理用パーツ -->
    <!--#include file="/admin/action.html"-->
    <div class="acms-grid">
        <main class="acms-col-lg-9 main">
            @section(main)
            <h2>メインのコンテンツ</h2>
            @endsection
        </main>
        <div class="acms-col-lg-3 sub">
            @section(sub)
            <h3>サブカラムのコンテンツ</h3>
            @endsection
        </div>
    </div>
</div>

@section(footer)
<!-- お問い合わせ -->
<!--#include file="/include/footer/suggest.html" -->
<!-- フッター -->
<!--#include file="/include/footer.html" -->
@endsection

</body>
</html>

@section 要素

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

継承の仕方

では実際に先ほどの例のテンプレートを継承してみます。
ファイルは、themes/テーマ名/extend.html にしておきます。

@extend(/layout/main.html)

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

@section(sub)
<h2>継承したサブカラムのコンテンツ</h2>
@endsection

どうでしょうか? mainsub の セクションのみ書き換わり他の要素は、継承元のものが表示されたと思います。 このように、テンプレートの継承機能を使うことにより、テンプレートをレイヤーに分ける事ができ、編集したい箇所だけ、テンプレートに書けばいいので、テンプレートが非常にスッキリし、管理も容易になります。

更に継承

テンプレートの継承は一度だけではなく、何度でも継承できます。先ほどの extend.html を更に継承してみましょう。
ファイルは、themes/テーマ名/extend2.html にしておきます。

@extend(/extend.html)

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

これで extend.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)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js" charset="UTF-8"></script>
<script src="/js/example.js" charset="UTF-8"></script>
@endsection

ただこれだと、あまり嬉しくありません。jQueryのバージョンを変える場合、全てのテンプレートを修正する必要があるからです。

@parent 要素

そこで、 @parent 要素を使います。早速例をみてみましょう。

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

@section内で @parent が呼ばれると、親テンプレートの @section内を挿入してくれます。これで、継承機能のメリットを保持しつつ、変更に強いテンプレートになりました。

祖先の要素を取得

先ほどの例では @parent で1つ親のテンプレートの @section内 を取得しましたが、 @@parent のように @マークを複数つけることにより、その数だけ親を遡り、引っ張ってくる事ができます。

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

以上でハンズオンを終わりですが、どんな使い方ができるのか色々触ってみましょう。