LaravelのテンプレートエンジンであるBladeについてのまとめを備忘録として残しておきます。
必要だと思ったことは随時追加していく予定です。
継承について
Bladeでは共通の部分(<head></head>やヘッダー、フッター等)をテンプレート化して、そのテンプレートを継承することで共通部分を自由に使い回すことができます。
@yieldと@sectionについて
<!-- 継承元 -->
<html>
<head>
<title>タイトル</title>
</head>
<body>
<header>ヘッダー</header>
<div class="container">
@yield('content')
</div>
<footer>フッター</footer>
</body>
</html>
上記のように共通部分を記述したテンプレートを作成し、このテンプレートの可変部分を継承先のファイルで記述していくといった形です。
@yield('content')の部分に継承先での拡張内容が挿入されます。
<!-- 継承先 -->
@extends('layouts.hoge')
@section('content')
<p>可変部分です</p>
@endsection
テンプレートを継承するには@extendsディレクティブを使用します。
@extends('layouts.hoge')といった形でに継承元のテンプレートを指定します。
@sectionから@endsectionの間のコードが継承元の@yield('content')に挿入されます。
@yield
またタイトルを可変部分にすることもあるでしょう。
<!-- 継承元 -->
<html>
<head>
<title>@yield('titile')</title>
</head>
<body>
<header>ヘッダー</header>
<div class="container">
@yield('content')
</div>
<footer>フッター</footer>
</body>
</html>
@yield('titile')としてタイトルも継承先から挿入するようにします。
<!-- 継承先 -->
@extends('layouts.hoge')
@section('title', 'タイトルです')
@section('content')
<p>可変部分です</p>
@endsection
こちらは@section('content')とは少し書き方が異なります。
このように挿入部分を第二引数として指定することもできるのです。
文字列のみ挿入する際はこちらの方が簡潔ですね。
@yield('titile','default')のように第二引数にデフォルト値も設定できるようです。
@section
さらに継承元の@sectionを継承先で展開することもできます。
<!-- 継承元 -->
<html>
<head>
<title>@yield('titile')</title>
</head>
<body>
<header>ヘッダー</header>
<ul>
@section('list')
<li>list1</li>
@show
</ul>
<div class="container">
@yield('content')
</div>
<footer>フッター</footer>
</body>
</html>
@section~@showとすることで継承先での展開が可能になります。
<!-- 継承先 -->
@extends('layouts.hoge')
@section('title', 'タイトルです')
@section('list')
@parent
<li>list2</li>
@endsection
@section('content')
<p>可変部分です</p>
@endsection
継承元の同じ引数の@sectionディレクティブの中で、@parentを使用することで継承元の@section~@show間が展開されます。
また、@parentを使用せず
@section('list')
<li>list2</li>
@endsection
とすることで、継承元のコードをシンプルに上書きすることができます。
また@section~@showの間に記述したコードは継承元で@sectionを用いて呼び出さなくても、そのまま展開されます。
まだまだまとめきれていない内容もありますので、今後も継続してBladeについて学んでいく所存です。