web-dev-qa-db-ja.com

Blade（Laravel 5）で複数のテンプレートを拡張する方法は？

私は次のファイルを持っています：

foo.blade.php

<html>
   <head>
   </head>
   <body>
      <h1>Foo Template</h1>
      @yield('content')
   </body>
</html>

bar.blade.php

<h2>Bar Template</h2>
<div class="bar-content">
@yield('bar-content')
</div>

上記の両方のテンプレートを拡張できる別のファイルを作成したいと思います。例：次のようなもの：

@extends('foo')
@section('content')
     <p>Hello World</p>
     @extends('bar')
     @section('bar-content')
          <p>This is in div.bar-content</p>
     @endsection
@endsection

与えるために：

<html>
   <head>
   </head>
   <body>
      <h1>Foo Template</h1>
      <p>Hello World</p>
      <h2>Bar Template</h2>
      <div class="bar-content">
          <p>This is in div.bar-content</p>
      </div>
   </body>
</html>

これどうやってするの？

laravellaravel-5bladelaravel-blade
9
Yahya Uddin

複数のファイルを使用します。例えば;

layout.blade.php：

@include('header')

@yield('layout_content')

@include('footer')

second.blade.php

@extends('layout')

@section('layout_content')

<div>
@yield('second_content')
</div>

@stop

third.blade.php

@extends('second.blade.php')

@section('second_content')

<h1>Hello World!</h1>

@stop

@yieldを任意の親ファイルに含めることができ、子で使用できます

8
Vishnu M Raveendran

components の使用をお勧めします。これが 例 です。

私にはそう思われる layout/includeは、それらが多数あり、ネストを開始すると、奇妙なロジックになります。コンポーネントは非常に単純です。そこで構築しているこれらのネストされた構造の場合、コンポーネントにもスロットがあります。

2
Arthur Tarasov

少なくともBladeを拡張せずに、ここでやりたいことを行うことは不可能だと思います： https://laravel.com/docs/5.1/blade#extending-blade

私があなたなら、物事を単純にするためにビュー階層を再構築しました。

1
Alexey Mezenin

これが機能するかどうかはわかりませんが、barテンプレートに@includeの代わりに@extendsを試してください。 barのセクションを他のセクションの下に配置します（ネストされていません）。私はこれをテストしなかったので、うまくいくことを願っています;）

//編集：

fooファイルのifステートメントで試してみてください。

<html>
    <head>
    </head>
    <body>
    <h1>Foo Template</h1>
    @yield('content')

    @if(isset($displayBar) && $displayBar == true)
        @include('dashboard.test.bar')
    @endif
    </body>
</html>

そして今、子ビュー：

@extends('dashboard.test.foo')
@section('content')
    <p>Hello World</p>
@endsection

<?php $displayBar = true ?>

@section('bar-content')
    <p>This is in div.bar-content</p>
@endsection
1
seschi98