layoutの共通化
画面が多くなってくると、htmlのhead部分や、共通のヘッダーフッターなど、 各ページで共通の箇所が増えてきます。
共通箇所はlayoutを利用して、
- 共通箇所はlayoutファイルに
- 個別の箇所は個別のviewに
それぞれ配置することで
- 毎回同じ内容を書く手間が省ける
- 共通部分の変更を一つのファイルに集約できる
といったメリットがあります。
layoutsディレクトリの作成
まずは、sample_app/resources/views/ ディレクトリに layouts ディレクトリを作成しましょう。
さらに、作成したlayoutsディレクトリに default.blade.php を作成しておきます。
@yield
それでは、 default.blade.php の内容を作成していきましょう。
default.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>@yield('title')</title>
</head>
<body>
@yield('content')
</body>
</html>
上記の内容で default.blade.php を保存しておきましょう。 レイアウトファイルのポイントは、後から穴埋めを行う箇所に @yieldというディレクティブを設定しておくことです。
今回の場合は
- title要素の中身は「title」という名前の穴埋め箇所
- body要素の中身は「content」という名前の穴埋め箇所
にそれぞれ設定されています。 これらの穴埋め箇所は、レイアウトを呼び出す側で設定を行うことになります。
@extends と @section
つづいて、個別のビュー側を作成します。
先ほど作成したblade_example.blade.phpを レイアウトを利用する形式に変更します。
blade_example.blade.php
{{-- レイアウトファイルを指定 --}}
@extends('layouts.default')
{{-- @yield('title') の部分を穴埋め --}}
@section('title', $title)
{{-- @yield('content') の部分を穴埋め --}}
@section('content')
<h1>{{ $title }}</h1>
{{-- ここはbladeのコメントです。出力時には無視されます。 --}}
<!-- HTMLのコメントは普通に出力されます。 -->
<p>$numの値は{{ $num }}です。</p>
@if($num > 5)
<p>5より大きいです。</p>
@endif
@if($num > 15)
<p>15より大きいです。</p>
@elseif($num > 5)
<p>5より大きく15以下です</p>
@else
<p>15以下です。</p>
@endif
<ul>
@forelse($messages as $message)
<li>{{ $message->name }}: {{ $message->body }} {{ $message->created_at }}</li>
@empty
<li>メッセージはありません。</li>
@endforelse
</ul>
@endsection
上記のように変更します。
変更内容は
- layoutsフォルダ内のdefault.blade.php を元に作成するため、 @extends('layouts.default') と利用するレイアウトファイルを指定しています。
- default.blade.php の中の「title」という穴埋め箇所には$titleの文字列をそのまま利用します。
- default.blade.php の中の「content」という穴埋め箇所には もともとbodyタグの中にあったHTMLを入れ込んでいます。
http://localhost/blade_example
にアクセスして、レイアウトファイルを利用する前と同じ表示になっていることを確認しましょう。