Symfony2「カスタマイズ編(2) Twigのテンプレート継承」
2011年12月13日Symfony2「カスタマイズ編(2) Twigのテンプレート継承」
TwigでのHTMLテンプレートの継承方法
【サンプル】
blockを利用して、<title>タグは以下のように記述できる
<title>{% block title %}Welcome!{% endblock %}</title>
継承方法
{% extends ‘::base.html.twig’ %}
子のテンプレート記述方法
{% block title %}Child Template{% endblock %}
【ベースレイアウトテンプレート】
ベースレイアウトテンプレートの中身
$ vim app/Resources/views/base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="shortcut icon" href="{{ asset(‘favicon.ico’) }}" />
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
【テンプレートの修正】
まずは、中間テンプレートを作成します
$ vim src/My/BlogBundle/Resources/views/layout.html.twig
{% extends ‘::base.html.twig’ %}
{% block title %}ブログアプリケーション{% endblock %}
個々のテンプレートを変更します
index.html.twig
$ vim src/My/BlogBundle/Resources/views/Default/index.html.twig
{% extends ‘MyBlogBundle::layout.html.twig’ %}{% block body %}
<h1>Blog posts</h1>
<table>
<tr>
<td>Id</td>
<td>Title</td>
<td>CreatedAt</td>
<td>Operation</td>
</tr>
{# ここから、posts配列をループして、投稿記事の情報を表示 #}
{% for post in posts %}
<tr>
<td>{{ post.id }}</td>
<td><a href="{{ path(‘blog_show’, {‘id’:post.id}) }}">{{ post.title }}</a></td>
<td>{{ post.createdAt|date(‘Y/m/d H:i’) }}</td>
<td><a href="{{ path(‘blog_edit’, {‘id’:post.id}) }}">Edit</a> <a href="{{ path(‘blog_delete’, {‘id’:post.id}) }}">Delete</a></td>
</tr>
{% else %}
<tr>
<td colspan="4">No posts found</td>
</tr>
{% endfor %}
</table><div>
<a href="{{ path(‘blog_new’) }}">add post</a>
</div>
{% endblock %}
show.html.twig
$ vim src/My/BlogBundle/Resources/views/Default/show.html.twig #}
{% extends ‘MyBlogBundle::layout.html.twig’ %}{% block body %}
<h1>{{ post.title }}</h1>
<p><small>Created: {{ post.createdAt|date(‘Y/m/d H:i’) }}</small></p>
<p>{{ post.body|nl2br }}</p>
{% endblock %}
new.html.twig
$ vim src/My/BlogBundle/Resources/views/Default/new.html.twig
{% extends ‘MyBlogBundle::layout.html.twig’ %}{% block body %}
Add Post
{% endblock %}
edit.html.twig
$ vim src/My/BlogBundle/Resources/views/Default/edit.html.twig
{% extends ‘MyBlogBundle::layout.html.twig’ %}{% block body %}
<h1>Edit Post</h1>
<form action="{{ path(‘blog_edit’, {‘id’:post.id}) }}" method="post" {{ form_enctype(form) }} novalidate>
{{ form_widget(form) }}
<input type="submit" value="Save Post" />
</form>
{% endblock %}
【ブラウザ出確認】
下記のURLへアクセスして、<html>タグや<title>タグが出力されていることを確認する
<body>タグが出力されたので、WebProfilerツールバーも表示されるようになる
http://somewhere/repos/blog.git/web/app_dev.php/blog