Symfony2「カスタマイズ編(2) Twigのテンプレート継承」

2011年12月13日 オフ 投稿者: KYO
Table of Contents

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

> {{ form_widget(form) }}
>
>

{% 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

【参考】

ref. カスタマイズ編(2) Twigのテンプレート継承