概要
レイアウトを定義してテンプレートで継承する方法についてです。
この仕組みを使用することで同じレイアウトのページを手軽に量産・改修できるようになります。
基本的な操作
どの部分がどのように反映されるかを理解することが重要のため、まずは定義と継承の基本部分を解説します。
１．前置き
使用するファイルはテンプレート用のindex.blade.phpとレイアウト用のlayout.blade.phpの2つが最低でも必要になります。
index.blade.phpは表示させたいページのテンプレートのため準備できていることを前提とします。
動作としては、index.blade.phpでlayout.blade.phpをロードするディレクティブを記述することでlayout.blade.phpのレイアウトを継承するため、以下のように2つのファイルの中身をタイトルで区別して解説していきます。
// レイアウトのディレクトリ
// resources\views\layouts\layout.blade.app
// テンプレートのディレクトリ
// resources\views\sample\index.blade.app
２．レイアウトの準備
veiwsフォルダ内にlayoutsフォルダを作成して、直下にlayout.blade.phpファイルを作成します。
ファイル名は解説用にlayout.blade.phpにしていますが、テンプレートのファイル名app（sampleapp.blade.phpなど）がわかりやすいと思います。
また、フォルダ名もlayoutsと指定されているわけではありません。
※以下より.blade.phpを省略
views
├─ sample
│ ├─ index.blade.php
|
├─ layouts
| ├─ layout.blade.php
３．レイアウトの作成
layoutの中身にコードを記述します。
解説のため先にlayoutを準備していますが、テンプレートとなるindexが存在するのが前提です。
また、わかりやすいようにbodyタグ内のみをdivタグ区切りで解説します。
＠yieldや＠sectionといったディレクティブについては後述します。
<body>
<div class="title">
@yield('title')
</div>
<div class="content">
@yield('content')
</div>
<div class="side">
@section('side')
<p>サイドメニュー</p>
@show
</div>
</body>
４．テンプレートの編集
layoutを読み込めるようにテンプレートであるindexを編集します。
解説のために表示項目ごとに行間を開けています。
ファイル名は###.blade.phpとすることを忘れないでください。
@extends('layouts.layout');
@section('title','ヘッダー')
@section('content')
<p>コンテンツ</p>
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
@endsection
@section('side')
@parent
<ul>
<li>ccc</li>
<li>ddd</li>
</ul>
@endsection
５．ディレクティブの解説
＠extends
テンプレートにレイアウトを読み込むディレクティブです。
@extends('layouts.layout');
// 記述方法：@extends('フォルダ名.ファイル名')
＠yield
レイアウトの＠yieldはテンプレートの＠sectionをはめ込んで表示するためのディレクティブです。
<h1>@yield('title')</h1>
//記述方法：@yield ('yield 名')
＠section
＠sectionには二通りの記述方法がありますので段落を分けて解説します。
＠section('yield名','表示させる値')
単純に何かしらの値を表示させる方法です。
あらかじめ＠yield('yield名')にタグを指定する必要があります。
<h1>@yield('title')</h1>
@section('title','タイトル')
// 記述方法：@section('yield名','表示させる値')
タイトル
＠section('yield名') ～ ＠endsection
＠section('yield名')～＠endsectionの間に記述した値を表示させる方法です。
この記述方法ではタグを指定して入力することができます。
<div class="content">
@yield('content')
</div>
@section('content')
<p>コンテンツ</p>
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
@endsection
// 記述方法：@section('yield名') ～ @endsection
コンテンツ
・aaa
・bbb
＠section ～ ＠showと＠parent
主にレイアウトの継承で使用する記述方法です。
レイアウトに記述してテンプレートの入力値を出力もできます。
ここでは親レイアウトを準備していないため後者の使い方となっています。
＠section～＠endsction内の＠parent以下が＠showで表示されるイメージです。
<div class="side">
@section('side')
<p>サイドメニュー</p>
@show
</div>
@section('side')
@parent
<ul>
<li>ccc</li>
<li>ddd</li>
</ul>
@endsection
サイドメニュー
・ccc
・ddd