Laravel Bladeによるレイアウト入門

2020年8月1日

PHP

コンタクト画面とアバウト画面の2つの画面の作成を例に、Bladeテンプレートによる画面のレイアウトをできるだけ単純化して説明してみます。

 

用意するディレクトリとファイルの構成です。

 

おおまかな構成は下記のイラストの様になります。各画面の基となる親テンプレートを用意して、そこに各画面の詳細項目を流し込んでいくイメージです。

 

 

1.  2つの画面(コンタクト/アバウト)の親となるbase.blade.phpを用意します。子となるcontact.blade.phpおよびabout.blade.phpには、@extendsディレクティブに親のテンプレートを指定します。

2. @yieldディレクトリには、子側で定義された@sectionディレクティブの内容が挿入されます。

3. @includeディレクトリを利用して他のBladeビューを取り込むことができます。今回は各画面で共通となるヘッダーおよびフッターを取り込んでいます。

4. 2と同じように子側で定義した@sectionディレクティブの内容(上記ではcontentセレクション)を挿入しています。contentセレクションは@endsectionで終わっていることに注意して下さい。

 

今回はコントローラーを用意せず、直接routes/web.phpに各ビューを指定します。

 

/contactおよび/aboutにアクセスして、最終的に出力されるソースです。

 

 

 

各Bladeのソースコード


 

resources/views/layouts/base.blade.php

 

resources/views/pages/contact.blade.php

 

resources/views/pages/about.blade.php

 

resources/views/includes/header.blade.php

 

resources/views/includes/footer.blade.php

 

 

関連ページ

Laravel 7.x〜コンポーネント(Components)で部品化

 

 

参照ページ


 

Laravel 7.x Bladeテンプレート

 

 

 

LINEで送る
Pocket

定番本
定期本
 
Copyright © 2020 思考の葉 All Rights Reserved.  プライバシーポリシー