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

2017年11月16日

この記事は公開日より6年以上経過しているため、現在の内容と異なる可能性があります。

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

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

更に継承

テンプレートの継承は一度だけではなく、何度でも継承できます。先ほどの 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 で１つ親のテンプレートの @section内を取得しましたが、 @@parent のように @マークを複数つけることにより、その数だけ親を遡り、引っ張ってくる事ができます。

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

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