Craftのテンプレート構造の基本 〜継承とインクルード〜

Craftは、Twigでテンプレートを管理してる。

テンプレートを置く場所は、ここ。

スクリーンショット 2014-12-14 13.29.10

 

Twigの優秀な「テンプレートの継承」が使える。

 

デフォルトのテンプレートでは、

index.htmlの中に、こんな記述がしてある。

{% extends "_layout" %}

{% block content %}
	<h1>{{ entry.title }}</h1>

	{{ entry.body }}

	<h2>Recent News</h2>
	<ul>
		{% for entry in craft.entries.section('news').limit(5).find() %}
			<li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
		{% endfor %}
	</ul>
{% endblock %}

 

最初の1文。

{% extends "_layout" %}

で、「_layout」っていうテンプレートを基本につくるよー

ということを、宣言している。

 

_layoutのほうは、どうなっているかというと、こんな感じ。

<body>
	<div id="container">
		<header id="header">
			<h1><a href="{{ siteUrl }}">{{ siteName }}</a></h1>

			<nav>
				<ul>
					<li><a href="{{ url('news') }}" {% if craft.request.firstSegment == 'news' %}class="active"{% endif %}>News</a></li>
				</ul>
			</nav>
		</header>

		<main id="content" role="main">
			{% block content %}
				<p>If you see me, you haven’t set your <code>{% verbatim %}{% block content %}…{% endblock %}{% endverbatim %}</code> yet.</p>
				<p>See Twig’s <a href="http://twig.sensiolabs.org/doc/templates.html#template-inheritance">Template Inheritance</a> documentation for an explanation.</p>
			{% endblock %}
		</main>

		<footer id="footer">
			Copyright {{ now.year }} {{ craft.request.serverName | ucfirst }}. All rights reserved  •  Built with <a href="http://buildwithcraft.com">Craft</a>
		</footer>
	</div>
</body>

 

なんやかんや書いてある中で、

{% block content %}
<p>If you see me, you haven’t set your <code>{% verbatim %}{% block content %}…{% endblock %}{% endverbatim %}</code> yet.</p>
<p>See Twig’s <a href="http://twig.sensiolabs.org/doc/templates.html#template-inheritance">Template Inheritance</a> documentation for an explanation.</p>
{% endblock %}

この部分が大事。

つまり、

「もし、このテキストが見えてるなら、なんか書き方間違ってるよー」という注意書きを、

「block content」で、くるんである。

この部分が、「content」っていうブロックになると宣言していて、

もし、それが無い場合は、注意書きを表示すると言う仕組み。

 

indexのほうでも、

{% block content %}

という部分があり、この部分同士が置き換わる。

 

Craftのテンプレートを作るには

Craftのテンプレートは、基本的にはTwigの「テンプレートの継承」を使う。

{% extends "_layout" %}

{% block content %}

 

 

でも、複雑な構造になってくると、パーツ分けをしておいたほうが管理がらくだと思うから、

その場合は、インクルードを使うこともできる。

 {% include "include/head.html" %}

この場合は、 include というフォルダの中にある、 head.html を表示する

という指定になる。

 

この2つを組み合わせて、テンプレートを作ることになる。

 

ページ上部へ