【Laravel】Bladeテンプレートでレイアウトを共通化する

2019/12/26

LaravelのBladeテンプレートにて用意されている「継承」と「セクション」という機能で、テンプレートを組み合わせてレイアウトを作成していく方法を軽くまとめておきたいと思います。

継承とセクション

「継承」とは、親ビューの持っている機能を子ビューが使うというイメージです。
ヘッダーやフッターなどの決まった共通部分は基底のテンプレート（親ビュー）に定義して、body の中だけを（子ビュー）で定義するといった使い方をします。

@sectionと@yield

@section

様々な部品を作成（定義）するために使用します。
以下のように記述します。

@section( 名前 )
…表示内容…
@endsection

@section( 名前 )

…表示内容…

@endsection

これで指定した名前でセクションが用意されます。
このセクションは同じ名前の @yield にはめ込まれ表示されます。

また @section は継承したページで @section によって上書きすることも可能との事です（まだ良くわかっていない）。

@yield

@yield はセクションの内容をはめ込んで表示するためのものです。
以下のように使用します。

@yield( 名前 )

1	@yield( 名前 )

@yield で指定した名前のセクションがあると、そのセクションが @yield のところにはめ込まれます。
@yield は配置場所を示すものなので、 @yieldend のようなものは有りません。

レイアウトの作成

最終目的のHTML

親ビューは共通部分を記述し、子ビューにて詳細を記述するのが基本とのこと。
ということで、まずは最終的に記述したいHTMLを作ってからBladeの機能に置き換えてみます。

<DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル｜nodoame.net</title>
<meta name="description" itemprop="description" content="ページごとの説明文を設定します">
<meta name="keywords" itemprop="keywords" content="キーワード1,キーワード2,キーワード3">
<link href="/css/star/layout.css" rel="stylesheet">
<link href="/css/star/index.css" rel="stylesheet">
</head>
<body>

<header class="header">
    ヘッダー
</header>

<div class="contents">
    <!-- コンテンツ -->
    <div class="main">
        <p>コンテンツ内容（各ページにより異なる）</p>
    </div>

    <!-- 共通メニュー -->
    <div class="sub">
        <ul>
            <li><a href="/star">INDEX</a></li>>
            <li><a href="/star/sun">SUN</a></li>
            <li><a href="/star/moon">MOON</a></li>
        </ul>
    </div>
</div>

<footer class="footer">
    フッター
</footer>
</body>
</html>

<head>

<title>ページタイトル｜nodoame.net</title>

</head>

<body>

ヘッダー

</header>

<p>コンテンツ内容（各ページにより異なる）</p>

</div>

<ul>

<li><a href="/star">INDEX</a></li>>

</ul>

</div>

フッター

</footer>

</body>

</html>

ページごとに設定したい内容は以下とします。

titleタグの内容
description
keywords
page.css(ページ毎のCSS)
コンテンツ内容

ベーステンプレート

以下がベースとなるテンプレートファイルです。
プロジェクトディレクトリ/resources/views へ「layout」ディレクトリを作成し、common.blade.php の名称で新規作成します。

<DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>@yield('title')｜nodoame.net</title>
<meta name="description" itemprop="description" content="@yield('description')">
<meta name="keywords" itemprop="keywords" content="@yield('keywords')">
<link href="/css/star/layout.css" rel="stylesheet">
@yield('pageCss')
</head>
<body>

@yield('header')

<div class="contents">
    <!-- コンテンツ -->
    <div class="main">
        @yield('content')
    </div>

    <!-- 共通メニュー -->
    <div class="sub">
        @yield('submenu')
    </div>
</div>

@yield('footer')
</body>
</html>

<head>

<title>@yield('title')｜nodoame.net</title>

@yield('pageCss')

</head>

<body>

@yield('header')

@yield('content')

</div>

@yield('submenu')

</div>

@yield('footer')

</body>

</html>

先にも書きましたが @yield() にて別途作成する内容を配置する仕組みとなっています。
この仕組み（機能）を使って、title、description、keywords、pageCss、header、content、submenu、footerを管理していきます。

スタイルシートは、プロジェクトディレクトリ/public へ「css」ディレクトリを作成してそちらへ配置することとします。

部品レイアウト

ヘッダー、フッター、サブメニュー用の部品レイアウトを作成します。

ヘッダー用（views/layout/header.blade.php）

@section('header')
<header class="header">
    ヘッダー
</header>
@endsection

@section('header')

ヘッダー

</header>

@endsection

サブメニュー用（views/layout/submenu.blade.php）

@section('submenu')
<ul>
    <li><a href="/star">INDEX</a></li>
    <li><a href="/star/sun">SUN</a></li>
    <li><a href="/star/moon">MOON</a></li>
</ul>
@endsection

@section('submenu')

<ul>

<li><a href="/star">INDEX</a></li>

</ul>

@endsection

フッター用（views/layout/footer.blade.php）

@section('footer')
<footer class="footer">
    フッター
</footer>
@endsection

@section('footer')

フッター

</footer>

@endsection

継承レイアウト

先に作成したベースレイアウトを継承して実際のWEBページに使用するテンプレートを用意します。
ページごとに用意するものと捉えればわかりやすいでしょうか。

views/star/index.blade.php

@extends('layout.common')

@section('title', 'インデックスページ')
@section('keywords', 'キーワード1,キーワード2,キーワード3')
@section('description', 'インデックスページの説明文です')
@section('pageCss')
<link href="/css/star/index.css" rel="stylesheet">
@endsection

@include('layout.header')

@section('content')
    <p>このページはインデックスページです。</p>
    <p><img src="/img/star/star.png" width="100" alt="星画像"></p>
@endsection

@include('layout.submenu')

@include('layout.footer')

@extends('layout.common')

@section('title', 'インデックスページ')

@section('keywords', 'キーワード1,キーワード2,キーワード3')

@section('description', 'インデックスページの説明文です')

@section('pageCss')

@endsection

@include('layout.header')

@section('content')

<p>このページはインデックスページです。</p>

@endsection

@include('layout.submenu')

@include('layout.footer')

HTMLらしい記述があまりなく、なんだか戸惑ってしまいます。

@extends()
レイアウトの継承設定として用います。
今回は layoutディレクトリ以下の common.blade.php を使用するという設定です。

@section
@endsection を使用する/しない、２種類の書き方があります。
使用しない場合は、名称に当てはめるテキストを設定します。
上記のサンプルでは内容では、ページごとのCSSを読み込むところで @endsection を使用しています。（6～8行目）

@include
サブビューと呼ばれる機能で、別のビューとして用意したものを読み込ませる機能です。（10行目）

インデックスページの結果

views/star/sun.blade.php

続けて「SUN」「MOON」ページも作成してみます。

@extends('layout.common')

@section('title', '太陽のページ')
@section('keywords', 'キーワード4,キーワード5,キーワード6')
@section('description', '太陽ページの説明文です')
@section('pageCss')
<link href="/css/star/sun.css" rel="stylesheet">
@endsection

@include('layout.header')

@section('content')
    <p>このページは太陽ページです。</p>
    <p><img src="/img/star/sun.png" width="100" alt="太陽画像"></p>
@endsection

@include('layout.submenu')

@include('layout.footer')

@extends('layout.common')

@section('title', '太陽のページ')

@section('keywords', 'キーワード4,キーワード5,キーワード6')

@section('description', '太陽ページの説明文です')

@section('pageCss')

@endsection

@include('layout.header')

@section('content')

<p>このページは太陽ページです。</p>

@endsection

@include('layout.submenu')

@include('layout.footer')

太陽ページの結果

views/star/moon.blade.php

@extends('layout.common')

@section('title', '月のページ')
@section('keywords', 'キーワード7,キーワード8,キーワード9')
@section('description', '月ページの説明文です')
@section('pageCss')
<link href="/css/star/moon.css" rel="stylesheet">
@endsection

@include('layout.header')

@section('content')
    <p>このページは月ページです。</p>
    <p><img src="/img/star/moon.png" width="100" alt="月画像"></p>
@endsection

@include('layout.submenu')

@include('layout.footer')

@extends('layout.common')

@section('title', '月のページ')

@section('keywords', 'キーワード7,キーワード8,キーワード9')

@section('description', '月ページの説明文です')

@section('pageCss')

@endsection

@include('layout.header')

@section('content')

<p>このページは月ページです。</p>

@endsection

@include('layout.submenu')

@include('layout.footer')

月ページの結果

アクションとルーティング

コントローラー（アクション）と、ルーティングはそれぞれ以下の通りとします。
これで正解なのかが今のところまだ解りきっていないので、間違っている場合は訂正したいと思います。

アクション（app/Http/Controllers/StarController.php）

public function index()
{
    return view('star.index');
}


public function sun()
{
    return view('star.sun');
}


public function moon()
{
    return view('star.moon');
}

public function index()

{

return view('star.index');

}

public function sun()

{

return view('star.sun');

}

public function moon()

{

return view('star.moon');

}

ルーティング（routes/web.php）

Route::get('/star', 'StarController@index');
Route::get('/star/sun', 'StarController@sun');
Route::get('/star/moon', 'StarController@moon');

Route::get('/star', 'StarController@index');

Route::get('/star/sun', 'StarController@sun');

Route::get('/star/moon', 'StarController@moon');

PHPフレームワーク Laravel入門

created by Rinker

-Laravel
-Blade, セクション, レイアウト, 継承

: 【Laravel】掲示板を作成する（3）一覧画面、詳細画面の作成

Laravelによる掲示板の作成、第３回です。今回は「一覧画面の作成」と「詳細画面の作成」についてポストしたいと思います。

: 【Laravel】掲示板を作成する（7）クエリーの調整（Eagerロード）、キーワード検索機能

Laravelによる掲示板の作成、第7回です。今回は『N+1』問題を解決するEagerロードというクエリーの調整方法と、一覧画面にキーワード検索機能を追加してみたいと思います。

: 【Laravel】掲示板を作成する（4）新規投稿機能、コメント投稿機能

Laravelによる掲示板の作成、第4回です。今回は「新規投稿」機能と「コメント」機能についてポストしたいと思います。

: 【Laravel】ルーティング、ビューの整理

Laravelのインストールが終わりましたが、どこにビューファイルが有るのか、どうすればテスト用のファイルを表示することが出来るのかなどを引き続き学習したいと思います。

: 【Laravel】フォームでPOST通信してみる

今回はフォーム画面からPOST通信する基礎をさらってみたいと思います。

PREV: 【PHP】オブジェクト形式のデータを作成する方法
NEXT: 【VS Code】カーソル行の背景色を変更する方法

【Laravel】Bladeテンプレートでレイアウトを共通化する

継承とセクション

@sectionと@yield

@section

@yield

レイアウトの作成

最終目的のHTML

ベーステンプレート

部品レイアウト

ヘッダー用（views/layout/header.blade.php）

サブメニュー用（views/layout/submenu.blade.php）

フッター用（views/layout/footer.blade.php）

継承レイアウト

views/star/index.blade.php

インデックスページの結果

views/star/sun.blade.php

太陽ページの結果

views/star/moon.blade.php

月ページの結果

アクションとルーティング

アクション（app/Http/Controllers/StarController.php）

ルーティング（routes/web.php）

【DIY】2x4や1x4など、SPF材サイズ早見表 (564,962)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (279,680)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (257,922)

【歴史】江戸幕府歴代将軍一覧 (143,590)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (133,250)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (131,309)