Laravel

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

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

継承とセクション

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

@sectionと@yield

@section

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

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

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

@yield

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

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

レイアウトの作成

最終目的のHTML

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

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

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

ベーステンプレート

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

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

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

部品レイアウト

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

ヘッダー用(views/layout/header.blade.php)

サブメニュー用(views/layout/submenu.blade.php)

フッター用(views/layout/footer.blade.php)

継承レイアウト

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

views/star/index.blade.php

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

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

@section
@endsectionを用いるのと、用いないという2種類の書き方があります。
用いない場合は、名称に当てはめるテキストを設定します。
ヘッダー部分の内容では、ページごとのCSSを読み込むところで @endsection を使用しています。

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

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

views/star/sun.blade.php

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

太陽ページの結果

views/star/moon.blade.php

月ページの結果

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

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

アクション(app/Http/Controllers/StarController.php)

ルーティング(routes/web.php)

-Laravel
-, , ,