2018/10/12
LaravelではBlade(ブレード)というテンプレートエンジンがデフォルトで入っています。
ViewのページはBladeのテンプレートエンジンで制作します。
今までのチュートリアルでは1ページに全部HTMLを記述していましたが、本来はこのような書き方はしません。
共通するパーツとコンテンツを分けます。
ヘッダーやフッターとかの決まりきった部分は親のテンプレートで定義して、中身のコンテンツ部分は子テンプレートで定義します。
今回はBladeファイルの分割について学習します。
Bladeの継承とセクション
Bladeでは画面の継承というものがあります。
大きな構造をまず作成して、そこから細部を補足するような画面を作成していくイメージです。
大きな構造を定義するテンプレートでは、例えばヘッダーやサイドバー、フッターなど共通している部品を定義します。
ここでは親テンプレートといいます。
子テンプレートは親テンプレートの大きな構造を継承し、変化するセクションだけを子テンプレートで定義をしていきます。
resources └ views ├ child01.blade.php(子テンプレート) ├ child02.blade.php(子テンプレート) ├ child03.blade.php(子テンプレート) ├ layouts └ parents.blade.php (親テンプレート)
チュートリアル
以前に作成したLaravelリンク集を親テンプレートと子テンプレートに分割してみます。
実現したいこと
- 以前に作成したLaravelリンク集のページを親テンプレートと子テンプレートに分割する
前提条件
以前に作成したLaravelリンク集のテンプレートは以下になります。
<!-- resources/views/link.blade.php -->
<!-- ベースとなるテンプレート -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Laravel リンク集</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<h1>Laravel リンク集</h1>
<ul>
<li><a href="https://laravel.com/" target="_blank">Laravel公式サイト(英語)</a></li>
<li><a href="http://laravel.jp/" target="_blank">Laravel公式サイト(日本語)</a></li>
<li><a href="https://github.com/laravel/laravel" target="_blank">Laravel GitHub</a></li>
</ul>
</div>
</body>
</html>
このテンプレートを親と子のテンプレートに分割します。
手順
1.親テンプレートの作成
雛形となる親テンプレートはlayoutsフォルダに入れることが多いです。
resources/views直下にlayoutsフォルダを作成します。
そこに親テンプレートを作成します。
親テンプレートはparent.blade.phpとします。
<!-- resources/views/layouts/parent.blade.php -->
<!-- 親となるテンプレート -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>@yield('title')</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<h1>@yield('title')</h1>
@yield('content')
</div>
</body>
</html>
これが親テンプレートになります。
共通するパーツをここで実装します。
この@がついている部分がblade用の記述です。
@yieldは変数を読み込んでいるような感じで理解すればわかりやすいです。
この場所に子テンプレートで差し込みできるようにするという意味になります。
2.子テンプレートの作成
resources/views直下に子テンプレートを作成します。
子テンプレートの名前はchild.blade.phpとします。
親テンプレートでは@yieldで変数を指定しましたが、子テンプレートではその変数に値を代入するイメージをするとわかりやすいです。
<!-- resources/views/child.blade.php -->
<!-- 子となるテンプレート -->
@extends('layouts.parents')
@section('title', 'Laravel リンク集')
@section('content')
<ul class="listdesign design1">
<li><a href="https://laravel.com/" target="_blank">Laravel公式サイト(英語)</a></li>
<li><a href="http://laravel.jp/" target="_blank">Laravel公式サイト(日本語)</a></li>
<li><a href="https://github.com/laravel/laravel" target="_blank">Laravel GitHub</a></li>
</ul>
@endsection
@extends で親テンプレートを指定します。
引数に指定するパスは'layouts.parent'と記述することで'layouts/parent.blade.php'を継承します。
子テンプレートで
@section('content')
:
@endsection
と記述することで親のテンプレートで宣言したセクション @yield('content') に差し込むことができます。
実装させるセクションが短い場合は
@section('title','Laravel リンク集')
と記述することも可能です。
セミコロンは必要ないので注意してください。
3.コントローラの作成
コントローラの設定ですがViewに渡すのは親テンプレートではなく子テンプレートになります。
よってControllerの記述は以下のようになります。
<?php
#LinkController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
class LinkController extends Controller
{
public function index()
{
return view('child');
}
}
child.blade.phpではなくchildだけです。
4.ルーティングの設定
ルーティングは以前設定したままの状態で大丈夫です。
Route::get('/link','LinkController@index');
5.ブラウザで動作確認
ブラウザで http://localhost/mylaravel/public/link にアクセスします。
以下のような画面が出力されていればOKです。
親と子を分割したことによってVeiwのページがすっきりしました。
@yield('title')に"FuelPHP リンク集"と指定して@yield('content')にFuelPHPのリンク集を書いてあげるとすぐにFuelPHPのリンク集を作成することができます。
仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら。