用途
新着
履歴
分類

blade レイアウトを組むサンプル

blade レイアウトを組むサンプル
htmlのページを構成する際、固定したいパーツや可変したいコンテンツがあります。そんなときに使う機能です。

まず、レイアウトの箱となる以下のようなtest-extend.blade.phpを用意します。

@yield('word')

@yield('content')

@section('add_content')
    <p>共通コンテンツ</p>
@show

このファイルに対して別のファイルが情報を配置することができます。

そして以下のように別ファイルに記述します。仮にこれをtest.blade.phpとします。

@extends('test-extend')

@section('word', '文字列を渡す')

@section('content')
    <p>ここが本文のコンテンツ</p>
@endsection

@section('add_content')
    @parent
    <p>追加するコンテンツ</p>
@endsection

@sectionを使った3パターンの情報の配置の仕方を記述しています。

上から説明すると@extendsの部分は、親とするblade.phpを拡張元としての記述です。

@extends('test-extend')

これでtest-extend.blade.phpを拡張することになります。

値を渡す

@section('word', '文字列を渡す')

文字列を変数に入れるイメージです。

コンテンツを埋める

@section('content')
    <p>ここが本文のコンテンツ</p>
@endsection

複数行のコンテンツを代入するイメージ。

コンテンツを追加する

@section('add_content')
    @parent
    <p>追加するコンテンツ</p>
@endsection

親に書かれた要素を残し、コンテンツを追加することができます。

以上は拡張の例です。

これらを組み合わせて、タイトルの文言受け渡しや、レイアウトのカラム分けをするのが一般的のようです。


コンテンツの挿入

次はコンテンツを挿入する機能です。

test-include.blade.phpを挿入する例

ファイル挿入(変数なし)

ここから→
@include('test-include')
←ここまで<br>

ファイル挿入(変数あり)

ここから→
@include('test-include', ['text' => '変数を渡す'])
←ここまで<br>

変数を与えてコンテンツに変化を加えて挿入することが可能です。

上記はtest-include.blade.phpを読み込んでいる例で、その中身の例はこちらです。

@isset($text)
「{{ $text }}」ことが可能。
@else
変数なし
@endisset

変数を渡すことで、コンテンツを出し分けることが可能です。


最後に

上記の二つを同時に使うと、includeが先に発動します。test.blade.phpが完了してからextendへデータがわたるからのようです。

拡張と挿入でそれぞれ利点がありますが、パーツをディレクトリ分けするなど、わかりやすくシンプルな構成を心がけるのが良さそうです。

公開 2019-08-08 00:45:44
このページの二次元コード
blade レイアウトを組むサンプル

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2024 kipure
Top