(Laravel) bladeのレイアウトの使い方

(Laravel) bladeのレイアウトの使い方

 

本記事では、Laravelのbladeのレイアウトの使い方について紹介していく。

なお、bladeの使い方以前に、laravelのビューの基本については以下の記事にて使い方を紹介しているため、こちらも参考にして欲しい。

 

bladeの「レイアウト」とは

bladenの「レイアウト 」とは、
viewにあらかじめ決めておく、大まかな表示内容や区画のことだ。

laravelのbladeのレイアウトの画像

 

 

bladeの「継承」と「セクション」

bladeのレイアウトを理解する上で重要な概念が、「継承」「セクション」だ。
両者について具体的に説明していく。

 

bladeの「継承」とは

bladeの継承とは、
既存のテンプレートのレイアウトを継承して新しいテンプレートを作成することだ。継承した新しいテンプレートでは、継承元にない要素を追加するだけでテンプレートを作成することができる。

laravelのbladeの継承の画像

 

親レイアウトを継承する書式

継承をするためには、子レイアウトから、親レイアウトを読み込む必要がある。
継承を行う書式は下記。

# 子レイアウト(.blade.php)の始めに記述する。

@extends('親レイアウト名')
※/resources/views/からのパスで指定する。
※blade.phpは省略できる。
laravelのbladeの継承の書式の画像

 

bladeの「セクション」とは

bladeのセクションとは、テンプレートに用意した区画のことだ。

継承元(親レイアウト)にセクションを用意しておいて、継承した子のテンプレートではセクションの中身を書いていけば、同じようなレイアウトのテンプレートを簡単に作ることができる。

laravelのbladeのセクションの画像

 

レイアウトに使用するディレクティブ

では次に、レイアウトに使用するディレクティブというものについて、解説していく。

ディレクティブとはある特定の機能を持った範囲を明示する機能のことだが、
ディレクティブ自体はblade特有の機能ではなく、laravel全体で様々なディレクティブが存在する。ディレクティブについての理解は以下の記事を参考にして欲しい。

そんなディレクティブの中から、bladeに関連するディレクティブのみを紹介しますというお話になる。

 

@yieldディレクティブ

@yieldディレクティブは、親レイアウトに指定するディレクティブで、
子レイアウトで記述するセクションの内容が埋め込まれる場所を示す。子レイアウトのどのセクションを埋め込むかは、セクション名を指定しておくことで判別する。

#親レイアウト

@yield(‘セクション名A’)  #子レイアウトの「「セクション名A」のセクションが埋め込まれる場所

@yield(‘セクション名B’)  #子レイアウトの「「セクション名B」のセクションが埋め込まれる場所

@yield(‘セクション名C’)  #子レイアウトの「「セクション名C」のセクションが埋め込まれる場所
laravel-blade-yield-image

 

@sectionディレクティブ

@sectionディレクティブは、子レイアウトに指定するディレクティブで、
親レイアウトに対応する@yield(‘セクション名’)のディレクティブ名があった場合、そこに埋め込まれて表示される内容を記述するセクションだ。

#子レイアウト


@section(‘セクション名’)    #親の@yield('セクション名')の場所に埋め込まれる

    //表示内容

@endsection

以下のような書き方も可能だ。

@section(’セクション名’, 表示内容 )
laravel-blade-section-image

 

ちなみに親レイアウトに同じセクション名の@sectionディレクティブが存在した場合、子レイアウトのsectionで内容が上書きされる

 

bladeのレイアウトまとめ

 

bladeのレイアウトまとめ
  • bladenの「レイアウト 」とは、viewにあらかじめ決めておく、大まかな表示内容や区画のことだ。
  • bladeのレイアウトを理解する上で重要な概念が、「継承」と「セクション」だ。
  • bladeの継承とは、既存のテンプレートのレイアウトを継承して新しいテンプレートを作成することだ。子レイアウトから、親レイアウトを読み込む必要がある。
  • bladeのセクションとは、テンプレートに用意した区画のことだ。
  • bladeで使用するディレクティブには、@yieldディレクティブと@sectionディレクティブが存在する。

 

 

記事が気に入った方はシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。