初めに
Webアプリケーションを作成する際、ヘッダーやフッターなどは共通的な部品にしたいですよね。今回は、FlowのテンプレートエンジンであるFluidを用いた、HTMLのテンプレート作成方法を解説します。
テンプレート作成してみる
プロジェクト構成は以下です。
Project
└ Packages/
└ Application/
├ Neos.Welcome/
| └ Classes/
| └ Controller/
| └ LayoutTestController.php（★）
|
└ Resources/
├ Private/
| ├ Layouts/
| | └ Default.html
| └ Templates/
| └ LayoutTest/
| └ index.html（★）
└ Public/
└ Styles/
└ Default.css
1. 共通的なテンプレートを用意
以下のようなHTMLファイルを作りました。
ヘッダーとフッターを定義し、コンテンツは各HTMLファイルで作成するような作りです。
Default.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><f:render section="Title" /></title>
<link rel="stylesheet" type="text/css" href="{f:uri.resource(path: 'Styles/Default.css')}">
</head>
<body>
<header class="stylish-header">
<h1>Header</h1>
</header>
<f:render section="Content" />
<footer class="stylish-footer">
<h2>Footer</h2>
</footer>
</body>
</html>
ポイントは以下
- HTMLをLayouts配下に作成する
- 各ファイルで作成するコンテンツを
f:renderタグで指定
Fluidのf:uri.resourceを用いることで、Resources/Public配下のコンテンツを参照することができます。
2. 各HTMLファイルでテンプレートを使用
各HTMLファイルは以下のようにしてテンプレートを呼び出します。
index.html
<f:layout name="Default.html" />
<f:section name="Title">
タイトル
</f:section>
<f:section name="Content">
<h1>コンテンツ</h1>
<p>コンテンツの内容</p>
</f:section>
ポイントは以下
-
f:layoutタグで参照したいLayouts配下のファイルを指定 -
f:sectionタグでf:renderのファイルの内容を指定
こんな感じで、参照することができました。
テンプレートHTMLファイル内にf:renderタグが複数ある場合、全てf:sectionで紐づける必要があります。
終わりに
フロントエンドは経験が乏しく、苦手なイメージがあったのですが、テンプレートエンジンを使えば簡単に作ることができました。
Fluidは便利な機能がたくさんあるので、これからも活用していきたいです。
ここまで読んでいただきありがとうございました！