公開日 最終更新日 Laravel

【Laravel】Bladeでレイアウト共通化




この記事は最終更新日から2年以上経過しています。

htmlの共通部分とコンテンツ部分は分離しておいたほうがいいことが多いですが、Bladeなら簡単に実装できます。

基本的な使い方

共通テンプレートと個別テンプレートに分割

まず共通テンプレートを実装します。
ファイル名はviews/layouts/parent.blade.phpとします。
@yield(‘content’)部分はコンテンツ側で用意した@sectionディレクティブの内容が挿入されます。

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
</head>
<body>
@yield('content')
</body>
</html>

次に個別テンプレートを用意します。
ファイル名はviews/content.blade.phpとします。

@extends('layouts.parent')

@section('content')
child content
@endsection

出力されるHTMLはこんな感じになります。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
</head>
<body>
child content
</body>
</html>

親レイアウトでセクションを定義

親レイアウトでセクションを定義する場合は、@section〜@showとなるので注意が必要です。
親レイアウトで@section〜@endsectionとしてもセクションが定義されるだけで表示されません。
親レイアウトで@endsectionで閉じたセクションは@yieldで呼び出すことはできます。

@extends('layouts.parent')

@section('content')
parent content
@show
{{-- これは@showで表示される --}}

@section('content')
parent content
@endsection
{{-- これでは表示されない --}}
@yield('content')
{{-- これで表示される --}}

親レイアウトで定義されているセクションを子レイアウトから呼び出す

親レイアウトで定義されているセクションを子レイアウトから呼び出す場合、@parentディレクティブを使います。

{{-- 親レイアウト --}}
@extends('layouts.parent')

@section('content')
parent content
@show

{{-- 子レイアウト --}}
@section('content')
-------------
@parent
-------------
@endsection




シェア！

RECOMMENDこちらの記事も人気です。