Laravelレイアウト
共通したデザインのページを使える様になる
@yield(名前) : @sectionの内容をはめ込んで表示させる機能がある
まずベースとなるテンプレートを作る
viewにlayoutフォルダを作成、その中にファイル作成
view/layouts/helloapp.blade.php
{{-- ベースとなるレイアウト用のテンプレート --}}
<html>
<head>
{{-- @yield配置場所を示す場所なのでendセクションはない --}}
<title>@yield('title')</title>
<style>
body {font-size:16px; color:pink; margin:5px;}
</style>
</head>
<body>
<h1>@yield('title')</h1>
@section('menubar')
<h2 class="menutitle">メニュー</h2>
<ul>
<li>@show</li>
</ul>
<hr size="1">
{{-- この部分にコンテントが読み込まれる --}}
<div class="content">
@yield('content')
</div>
{{-- この部分にfooter読み込まれる --}}
<div class="footer">
@yield('footer')
</div>
</body>
</html>
@sectionは2種類の書き方がある
view/index
{{-- extendで継承する ベースレイアウトにそって内容を入れていく --}}
@extends('layouts.helloapp')
<!-- sectionは2種類書き方がある -->
<!-- ① セクション名、 設定するテキスト値-->
@section('title', 'INDEX')
{{-- ② endセクションで囲う --}}
@section('menubar')
{{-- 親(継承)の表示を指示できる --}}
@parent
インデックスページ
@endsection
ブラウザで見ると下記の様な表示になる
'view/layouts/helloapp.blade.php'を継承した'view/index'のページ
<h1>INDEX</h1>
<h2>メニュー</h2>
<ul>
<li>インデックスページ</li>
</ul>
@components
一部を切り離して作成、組み込みたい時に
下記が部品の様な役割
view/components/message
<div class="message">
<p class="msg_title">{{$msg_title}}</p>
<p class="msg_content">{{$msg_content}}</p>
</div>
view/index
{{-- どのテンプレートか指定している'view/components/message' --}}
@component('components.message')
{{-- スロットは{{}}で指定された変数に値を設定できる --}}
@slot('msg_title')
これはメッセージ
@endslot
@slot('msg_content')
これもメッセージ
@endslot
@endcomponent
<p>これはメッセージ</p>
<p>これもメッセージ</p>
includeサブビュー
componentsと似ているが単純にテンプレートを表示させるのみの場合有効
@slotなどはサブビューで利用できない
@include(テンプレート名, [値の指定])
view/index
@include('components.message', ['msg_title'=>'OK', 'msg_content'=>'NOT OK'])
<p>OK</p>
<p>NOT OK</p>