こちらの記事は以下の書籍を参考に執筆しました
Bladeには例アンツを継承してテンプレをセクションとして組み合わせてレイアウトを作成する機能がある。
レイアウトの作成
レイアウトの定義と継承
多くのページがあるサイトでは共通したデザインが表示される。
サイト全体を統一したデザインでレイアウトするためにBladeには継承とセクションがある。
継承とは
PHPのクラスの継承と同じ。
既存のテンプレを継承して新しいテンプレを作ること
セクションとは
継承でページをデザインするとき、ページ内の要素として活用されてるもの。
@secsionと@yield
セクション利用のための2つのディレクティブ
@section
レイアウトで様ざなま区画を定義する。
@section(名前)
...表示内容...
@endsection
これで指定した名前でセクションが用意される。
セクションは同じ名前の@yieldにはめ込まれ表示される。
@yield
セクション内容をはめ込んで表示する。
@yield(名前)
@yieldは記載場所を示すもので**@endyieldはない**。
ページレイアウトを作成する
例を見てみる。
resources/views/layoutでhelloapp.balde.phpを作成する。
そこに書いていく
<html >
<head>
<title>@yield('title')</title>
<style>
body{
font-size:16pt;color:#999;margin:5px;
}
h1{
font-size:50px;
text-align:right;
color:#f6f6f6f6;
margin:-20px 0px -30px 0px;
letter-spacing:-4pt;
}
ul{
font-size:12pt;
}
hr{
margin:25px 100px;
border-top:1px dashed #ddd;
}
.menutitle{
font-size:14px;
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">メニュー</h2>
<ul>
<li>@show</li>
</ul>
<hr size="1">
<div class="content">
@yield('content')
</div>
<div class="footer">
@yield('footer')
</div>
</body>
</html>
ここでいくつかのディレクティブが設定されている。
@section('menubar')
これはメニュー表示の区画。
セクションは玖珂を定義するものだが、一番土台とアンルレイアウトで@sectionを用意する場合は。@endsectionではなく**@showでセクションを終わりにする。**
継承レイアウトの作成
@extends('layouts.helloapp')
@section('title','Index')
@section('menubar')
@parent
インデックスページ
@endsection
@section('content')
<p>ここが本文のコンテンツ</p>
<p>必要なだけ記述ができる</p>
@endsection
@section('footer')
copyright 2020 tuyano.
@endsection
HTMLらしくない表記になった。
@extendsについて
@extends('layouts.helloapp')
layoutsフォルダのhelloapp.blade.indexファイルをロードし、親レイアウトとして継承する。
@sectionの書き方
2つの方法がある。
単純に表示させるだけ
@section('title','Index')
'title'という名前のセクションに'Index'というテキスト値を設定。
@endsectionを併用した書き方
@section('menubar')
@parent
インデックスページ
@endsection
親レイアウトに'menubar'という@yieldがあればそこにはめ込まれて表示されるわけだが、
親レイアウトに'menubar'という@yieldはなく、@sectionがある。
この場合@sectionは上書きされる。
@parentは親レイアウトのセクションを示す。
@sectionの上書きがされるとき、親のセクションも残したい場合は@parentで親のセクションをはめ込んで表示できる。
これで表示してみるとhelloapp.blade.phpに、index.blade.phpに用意したセクションがはめ込まれて表示されていることが確認できる。
このようにレイアウトを継承するkとで子にはセクションに表示する内容だけを書けばいいことになり、お暗示レイアウトでページが表示される。
コンポ−ネントについて
継承を利用することで全体を同じデザインにすることができるが、時には一部を切り離したいこともある。
コンポ−ネントは1つのテンプレとして独立して用意されるレイアウト用の部品。
@componentディレクティブ
コンポーネントは普通のテンプレとして作成する。書き方に違いはない。
作成したコンポーネントは@componentで表示場所を設定できる。
@component(名前)
...コンポ−ネネントの表示内容
@component
名前はviewsフォルダのファイル名で指定される。
/views/components/ok.blade.php
ならcomponents.okで指定できる。
コンポーネントを作成する
<style media="screen">
.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="mes_title">{{$msg_title}}</p>
<p class="msg_content">{{$msg_content}}</p>
</div>
コンポーネントを読み込む
messageコンポーネントをテンプレにに読み込んで表示する。
@section('content')の部分を修正
@section('content')
<p>ここが本文のコンテンツ</p>
<p>必要なだけ記述できる</p>
@component('components.message')
@slot('msg_title')
CAUTION!
@endslot
@slot('msg_content')
これはメッセージの表示
@endslot
@endcomponent
@endsection
スロットについて
$msg_titleや$msg_contentに値を送っているのがスロット
{{}}で指定した変数に値を設定する。
@slot(名前)
...設定する内容
# endslot