bladeのレイアウト

Webページには、ヘッダーやサイドバー、フッターといった多くのページに共通するレイアウトがあります。
そういった共通部分を、ページ毎に毎回記述するのは大変ですし共通部分の修正があった場合は関わる全てのページに対して修正を行うことになります。
具体的には、ヘッダーの画像を追加した場合などですが、数ページで構成された小規模サイトでは気になりませんが大規模サイトでは、たったそれだけの作業で大仕事になります。

これを解決するために、Bladeでは継承が使えます。元なるBladeテンプレートを継承することで、共通部分のレイアウトやスタイルをそこに埋め込むような形で利用できます。

ベースとなるテンプレートを読み込む以外に必要な共通部品のみ手軽に読み込みたい場合の機能も用意されてます。

ベースレイアウトの作成と継承

継承元となるマスターレイアウトを作成しましょう。
resources/views/layouts/master.blade.php
（layoutsディレクトリも作成してください）

<html>
<head>
   <link rel="stylesheet" href="css/style.css">
   <title>タイトル</title>
</head>
<body>
   <div class="header">
      <h1>マスターレイアウト</h1>
      <hr class="line"/>
   </div>

   <div class="container">
      <div class="sidebar">
         <h2>MENU</h2>
         <ul>
            <li>項目1</li>
            <li>項目2</li>
            <li>項目3</li>
         </ul>
      </div>
      <div class="content">
         ここにコンテンツが入る
      </div>
   </div>

   <div class="footer">
      <hr class="line"/>
      <div class="footer-item">フッター</div>
   </div>
</body>
</html>

<html>

<head>

</head>

<body>

<h1>マスターレイアウト</h1>

</div>

<ul>

</ul>

</div>

ここにコンテンツが入る

</div>

</div>

</body>

</html>

では、このマスターファイルを継承して出力しましょう。
継承先のファイルを作成して読み込みます。
resources/views/index.blade.php

@extends('layouts.master');

1	@extends('layouts.master');

この1行を記述したらブラウザからアクセスしましょう。
routes/web.php 1行ルーティングを追加する必要もあります。

route::get('output',function(){
   return view('index');
});

route::get('output',function(){

return view('index');

});

ブラウザからあアクセスすると継承したマスターファイルを表示できました。
ベースとなるマスターレイアウトを読み込むことができました。
継承成功です。
しかし、ただ出力しただけなので汎用性がありません。

継承ファイルの部分変更

今度は、継承したファイルを継承先ごとに一部を変更してみましょう。
これが出来ると使い勝手が向上しますね。
@section, @yield について説明しましょう。

Laravelでレイアウト継承を実装する場合にページ内の要素として活用するのが「セクション」です。セクションは、マスターレイアウトに用意される区画を意味します。このマスターレイアウト区画を継承先レイアウト毎に内容を更新することでマスターレイアウトの使い勝手が向上します。

先に作成した　マスターレイアウトの一部に@section, @yieldを組み込みます。

resources\views\layouts\master.blade.php

<html>
<head>
   <link rel="stylesheet" href="css/master.css">
   <title>@yield('title')</title>
</head>
<body>
   <div class="header">
      <h1>@yield('title')</h1>
      <hr class="line"/>
   </div>

   <div class="container">
      <div class="sidebar">
         @section('sidebar')
            <h2>MENU</h2>
            <ul>
               <li>項目1</li>
               <li>項目2</li>
               <li>項目3</li>
            </ul>
            @show
      </div>
      <div class="main-container">
         @yield('content')
      </div>
   </div>

   <div class="footer">
      <hr class="line"/>
      <div class="footer-item">@yield('footer')</div>
   </div>

</body>
</html>

<html>

<head>

<title>@yield('title')</title>

</head>

<body>

<h1>@yield('title')</h1>

</div>

@section('sidebar')

<ul>

</ul>

@show

</div>

@yield('content')

</div>

<div class="footer-item">@yield('footer')</div>

</div>

</body>

</html>

1行のみだった継承先ファイルに差し替え要素を追加します。
resources/views/index.blade.php

@extends('layouts.master')

@section('title', 'Laravel Home')

@section('sidebar')
@parent
   <ul>
      <li>追加項目1</li>
   </ul>
@endsection

@section('content')
   <h1>Blade継承サンプル</h1>
   <p>メインコンテンツ</p>
@endsection

@section('footer', 'Laravel Footer')

@extends('layouts.master')

@section('title', 'Laravel Home')

@section('sidebar')

@parent

<ul>

</ul>

@endsection

@section('content')

<h1>Blade継承サンプル</h1>

<p>メインコンテンツ</p>

@endsection

@section('footer', 'Laravel Footer')

@yieldは、継承元テンプレートに記載します。
そこに、継承先から@sectionを使って埋め込みます。

継承元に@sectionがある場合は継承先で上書きします。
継承先では、継承元の@yieldの埋め込み、@sectionの上書きで使えます。

@section~@showは、継承先で@sectionを使った場合、@showの所に埋め込む仕組みになります。
@parentを付けると、継承元テンプレートの@sectionの内容をコードを書いた後に、継承先のコンテンツのコードが埋め込まれる形になります。

実装例の場合、上記赤字個所が@parentを付けることによって継承されて表示され、@showの後に継承先のコードが入っていく形となります。

手軽に共通部品を読み込む「include」

@include(val_1, val_2);

1	@include(val_1, val_2);

val_1 : 読み込みテンプレートを指定
val_2 : 読み込みテンプレートに渡す値（配列）
テンプレートを表示するだけなら「val_2」は不要。

resources/views/layouts/header.blade.php

<div class="header">
   <h1> {{ $msg }} </h1>
   <hr class="line"/>
</div>

</div>

resources/views/index2.blade.php

<html>
<head>
   <link rel="stylesheet" href="css/style.css">
   <title>タイトル</title>
</head>
<body>

   @include('layouts.header' , ['msg', 'ヘッダー' ]);

   <div class="container">
      <div class="sidebar">

<html>

<head>

</head>

<body>

@include('layouts.header' , ['msg', 'ヘッダー' ]);

「Laravel」の一覧を表示する