レイアウトの作成

むらかみ

レイアウト

　最初に作ったレイアウト（ベースレイアウト）を継承して新しいテンプレートを作成する。ベースレイアウトで表示しているものは全て継承先のテンプレートでも表示され、sectionで足りないところを補うだけで同じレイアウトのページをたくさん作ることができる。

ベースレイアウト
@section〜@showや@yieldを用いて作成する。

継承レイアウト
@section('title' , 'Index')とすると、@yield('title')にIndexを表示する。
@sectionは上書きすることが可能で、@parentで継承元の@sectionを上書きすることができる。

ベースレイアウト
<html>

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

<body>
   <h1>@yield('title')</h1>
   @section('menubar')
   <h2　class="menutitle">※メニュー</h2>
   <ul>
       <li>@show</li>
   </ul>
   <div class="content">@yield('content')</div>
</body>

</html>
　
継承レイアウト
@extends('layouts.helloapp')
@section('title','Index')
@section('menubar')
    @parent
    インデックスページ
@endsection
 
@section('content')
    <p>ここが本文のコンテンツです</p>
@endsection

コンポーネント

　全体を統一して作成するのに便利なレイアウトとは異なり、一部分を統一した作りにしたいときに使うのがコンポーネントである。例えばヘッタやフッタは統一したものを用いたいがコンテンツ部分はそれぞれ違うものを使いたいとき、ヘッタとフッタをコンポーネントで準備する。
　componentsフォルダにmessage.blade.php（コンポーネントのベース）ファイルを作った場合、@components('フォルダ名 . ファイル名')で継承先へ組み込むことができる。また、@slot('変数名')〜@endsoltとすることで、ベースとなるファイルの変数へ〜が入る。下の例で言うとmessage.blade.phpの<p class="msg_title">{{$msg_title}}</p>
→<p>class="msg_title">CAUTION!</p>になる。

message.blade.php(ベースファイル)
<div class="message">
    <p class="msg_title">{{$msg_title}}</p>
    <p class="msg_content">{{$msg_content}}</p>
</div>
 
index.blade.php(継承先のファイル)
@section('content')
    @component('components.message')
        @slot('msg_title')
        CAUTION!
    @endsolt
    @component('components.message')
        @slot('msg_content')
        CAUTION!
    @endslot
@endsection

サブビュー

コンポーネントで使ったmessage.blade.phpをサブビューとして用いる。
@include('テンプレート名' , [値の指定])

@include('components.message' ,
    ['msg_title'=>'TITTLE' , 'msg_content' => 'サブビューです'])

この記事が気に入ったらサポートをしてみませんか？