概要
- 複数のビューで共通の部分がある場合、それらをまとめたビューを作って親とする(レイアウト)
- 共通レイアウトの中で、個々のビューごとに内容が異なる部分に
@yieldディレクティブを書く - 個々のビューの最初で、レイアウトとして使うビューを
@extendsで指定する - レイアウトの中で
@yieldを書いた部分の具体の内容を@sectionディレクティブで書く - 異なるレイアウトでまとめられる部分がある場合は親のレイアウトにまとめて、異なる部分を親レイアウトの
@yieldと子レイアウトの@sectionで書き、階層化する
レイアウトとビュー
レイアウトもビューファイルだが、複数のビューで共通化できる部分をまとめたのがレイアウト。
個別のページごとの内容に対応する部分を、レイアウト中で@yieldディレクティブで名前を付けて仮置きしておく。
たとえば以下は各ページ共通のヘッダーをレイアウトに持たせて、個別ページのタイトルと内容はtitle、contentという名前で仮置きしている。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{{-- views/layouts/common.blade.php --}} <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>@yield('title')</title> </head> <body> <header style="background-color: #ccc"> <p>共通レイアウトに各ページ共通のヘッダーなどを置けます</p> </header> @yield('content') </body> </html> |
個別のページでは、
- レイアウトとして使うビューを
@extendsディレクティブで指定する - レイアウト中
@yieldで仮置きした部分に対応する内容を@sectionディレクトリーで具体に書いていく
|
1 2 3 4 5 6 7 |
@extends('layouts.common') @section('title', '個別ページ') @section('content') <p>個々のページの内容</p> @endsection |
この例では、全体のレイアウトとして上で準備したビューファイルを指定して、タイトルと内容を@sectionディレクティブで具体に書いている。
@sectionディレクティブには以下の書き方がある。
- 2つ目の引数で内容を渡す方法
@section～@endsectionの間に具体の内容を書く方法
レイアウトの階層化と継承
レイアウトが一部共通部分を持ちながら、いくつかの種類に分けられるような場合、レイアウトを階層化する。
例えばログイン前のページ、ログイン後のページが複数あり、ログイン前後でヘッダーメニューの構成が変わる場合。
ログイン前後でヘッダーメニューの内容は異なるが、ヘッダーメニューがあるという点は共通。
共通レイアウト
まず、大元のlayouts/common.blade.phpを以下のように準備する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{{-- views/layouts/common.blade.php --}} <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>@yield('title')</title> </head> <body> @yield('header') @yield('content') </body> </html> |
このレイアウトでは、タイトル、ヘッダー、内容の3つを@yieldでプレースホルダーとしている。
個別レイアウト
次に、ログイン前とログイン後それぞれのレイアウトを準備する。
全体構造は共通のcommonから@extendsで継承し、それぞれで異なる内容となる@yield('header')に対応する部分だけを具体に書いていく。
個々のページによって異なる@yield('title')と@yield('content')についてはここでは対応せず、具体のビューで内容を埋める。
以下はログイン前のレイアウト。
|
1 2 3 4 5 6 7 8 9 |
{{-- views/layouts/logged_out.blade.php --}} @extends('layouts.common') @section('header') <header> {{-- ここにログイン前のメニューを書く --}} </header> @endsection |
また、以下はログイン後のレイアウト。
|
1 2 3 4 5 6 7 8 9 |
{{-- views/layouts/logged_in.blade.php --}} @extends('layouts.common') @section('header') <header> {{-- ここにログイン後のメニューを書く --}} </header> @endsection |
個別ビュー
個別のビューでは、大元の共通レイアウトを継承したログイン前／後いずれかのレイアウトを指定する。そして未対応@yield('title')と@yield('content')に対応する内容を@sectionで埋めていく。
たとえばログイン前のログインページの例。
|
1 2 3 4 5 6 7 8 |
@extends('layouts.logged_out') @section('title', 'ログインページ') @section('content') <h1>{{ 'ログインページ' }}</h1> {{-- ここにログインページの内容を書く --}} @endsection |
またログイン後のトップページの例は以下の通り。
|
1 2 3 4 5 6 7 8 |
@extends('layouts.logged_in') @section('title', 'トップページ') @section('content') <h1>{{ 'トップページ' }}</h1> {{-- ここにトップページの内容を書く --}} @endsection |