Blade テンプレート ( 2 )

July 27, 2019

レイアウトの継承

Blade には、レイアウトを継承し、用意したテンプレートをセクションとして組み合わせてレイアウトを作成する機能が用意されている。
本エントリではレイアウトを作成し、そのレイアウトを継承する方法を記載する。

ベースレイアウトの作成

まずはベースとなるレイアウトを作成する。
resources/views 内に layouts というディレクトリを作成し、その中に base.blade.php というファイルを作成する。

$ mkdir resources/views/layouts

resources/views/layouts/base.blade.php

<html>
<head>
    <title>@yield('title')</title>
    <style>
     body { 
	 font-size: 16pt; 
	 color: #6504a0; 
     }
     h1 {
	 color: #6594e0;
	 border-bottom: dashed 2px #6594e0;
     }
     ul {
	 background: #fffde8;
	 box-shadow: 0px 0px 0px 10px #fffde8;
	 border: dashed 2px #ffb03f;
	 border-radius: 9px;
	 margin-left: 10px;
	 margin-right: 10px;
	 padding: 0.5em 0.5em 0.5em 2em;
     }
     ul li {
	 line-height: 1.5;
	 padding: 0.5em 0;
     }
     hr { 
	 margin: 25px 100px; border-top: 
	     1px dashed #ddd
     }
     .menutitle { 
	 font-size:14pt; 
	 font-weight:bold; 
	 margin:0px 
     }
     .content { 
	 margin: 10px; 
     }
     .footer { 
	 text-align: right; 
	 font-size:10pt; 
	 margin:10px; 
	 border-bottom:solid 1px #ccc; 
	 color:#ccc 
     }
    </style>
</head>
<body>
    <h1>@yield('title')</h1>
    @section('menubar')
	<h2 class="menutitle">メニュー
	<ul>
	    <li>@show</li>
	</ul>
	<hr size="1">
	<div class="content">
	    @yield('content')
	</div>
	<div class="footer">
	    @yield('footer')
	</div>
</body>
</html>

継承レイアウトの作成

次に、ベースレイアウトを継承して実際の Web ページに使用するテンプレートを作成する。
resources/views 内に hello というディレクトリを作成し、その中に index.blade.php というファイルを作成する。

$ mkdir resources/views/hello

resources/views/hello/index.blade.php

@extends('layouts.base')

@section('title', 'レイアウトの継承')

@section('menubar')
    @parent
    メニューの中身
@endsection

@section('content')
    <p>本文のコンテンツ 1</p>
    <p>本文のコンテンツ 2</p>
    <p>本文のコンテンツ 3</p>
@endsection

@section('footer')
Copyright 2019 U-PIN
@endsection

確認

route/web.php にルートの設定をしたら /hello にアクセスして確認してみる。

コンポーネント

継承を利用したレイアウトでは、親レイアウトの必要な部分に子側のセクションをはめ込んで表示をさせていた。このやり方は全体を一式揃えて作成するには便利な方法になるが、一部を切り離して組み込みたいときには使用できない。
このような場合はコンポーネントを用いる。コンポーネントは 1 つのテンプレートとして独立して用意されるレイアウトの部品となり、コンポーネントはテンプレートから読み込まれ、必要な場所に組み込まれる。

コンポーネントの作成

実際にコンポーネントを作成してみる。
resources/views に components というディレクトリを作成し、その中に message.blade.php というファイルを作成する。

resources/views/components/message.blade.php

<style>
 .message { border:double 4px #ccc; margin:10px; padding:10px; background-color:#fafafa; }
 .msg_title { margin:10px 20px; color:#999; font-size:16pt; font-weight:bold; }
 .msg_content { margin:10px 20px; color:#aaa; font-size:12pt; }
</style>
<div class="message">
    <p class="msg_title">{{$msg_title}}</p>
    <p class="msg_content">{{$msg_content}}</p>
</div>

次に、hello/index.blade.php の content セクションにコンポーネントを組み込む。

resources/views/hello/index.blade.php

@extends('layouts.base')

@section('title', 'レイアウトの継承')

@section('menubar')
    @parent
    メニューの中身
@endsection

@section('content')
    <p>本文のコンテンツ 1</p>
    <p>本文のコンテンツ 2</p>

    @component('components.message')
	@slot('msg_title')
	    CAUTION!
	@endslot
	
	@slot('msg_content')
	    メッセージの表示
	@endslot
    @endcomponent

@endsection

@section('footer')
Copyright 2019 U-PIN
@endsection

確認

実際にコンテンツにアクセスして確認してみる。

サブビュー

コンポーネントは使い勝手の良い部品だが、例えばフッターやサイドバーのように定型のコンテンツは、用意したテンプレートをただはめこんで表示できれば良い、というものだったりする。このように、あるビューから別のビューを読み込んではめ込んだものをサブビューという。
サブビューではコンポーネントで利用可能だったスロットのようなものは使えないが、コントローラからテンプレートに渡された変数等はそのままサブビューのテンプレートで使用可能。また、サブビューを読み込む際に変数を渡すこともできる。

サブビューで読み込む

実際にサブビューとしてコンテンツ内に読み込んでみる。
先に作成した message.blade.php をサブビューで読み込むには @include ディレクティブを使用する。

resources/views/hello/index.blade.php

@extends('layouts.base')

@section('title', 'レイアウトの継承')

@section('menubar')
    @parent
    メニューの中身
@endsection

@section('content')
    <p>コンポーネント</p>
    @component('components.message')
	@slot('msg_title')
	    CAUTION!
	@endslot
	
	@slot('msg_content')
	    メッセージの表示
	@endslot
    @endcomponent
    <hr>
    <p>サブビュー</p>
    @include('components.message', ['msg_title' => 'OK', 'msg_content' => 'サブビューです'])

@endsection

@section('footer')
Copyright 2019 U-PIN
@endsection

確認

実際に確認してみる。