Laravel - Difference between @yield and @section?

C

6

41

From the Laravel docs, you can include 'sections' inside layouts using two methods:

<html>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

Since @yield can also pass in some default content using @yield('section', 'Default Content'), is @yield just a shorthand for a @section that does not use @parent?

@section
    <!-- Nothing here -->
@show

What other differences are there?

Chatman answered 16/3, 2015 at 6:1 Comment(0)

S

44

This line clears out the confusion: "Note that views which extend a Blade layout simply override sections from the layout. Content of the layout can be included in a child view using the @parent directive in a section".

So, if you already have a @section defined in the master layout, it will be overriden unless you specify @parent inside the child layout's @section.

But for @yield, it always gets the section from the child layout. That means it always overrides the @yield part, even if it has a default defined as @yield('section', 'Default Content') .

I hope that clears your confusion. Let me know if you have more questions. Thanks

Slaw answered 16/3, 2015 at 6:14 Comment(7)

So to nail this home - @yield is just a shorthand for a @section that do not use @parent? Correct? – Chatman 16/3, 2015 at 6:33

Yes you can put it that way. @yield is always used to get content from a child page unto a master page. So when the Laravel executes your blade file, it first checks if you have extended a master layout, if you have extended one, then it shifts to the master layout and starts getting the @sections that you have overridden and the main content i.e the @yield from the child layout. And of course, finally, it parses the blade format to raw php and gives the output in html/css/js . – Slaw 16/3, 2015 at 6:38

I still don't get it. – Cf 3/4, 2015 at 10:58

@pvaitonis , which part are you still confused with? Let me know. Thanks – Slaw 14/4, 2015 at 12:39

About difference between @include and @yield. – Cf 16/4, 2015 at 17:48

@pvaitonis @include is similar to php's include() function, but it still can have @sections inside it, if it has .blade extension and it will work out the exact same way as a child layout. @yield only gets the appropriate @section from the child layout. – Slaw 17/4, 2015 at 13:35

You should also discuss the use of @stack() and @push(). What is the difference between @yield() and @stack()? – Catnip 4/11, 2019 at 1:2

P

60

Short Answer: Always use @yield unless you want to do something more complicated then providing a default string.

Long Answer: Both @yield and @section .. @show are used to be optionally overwritten whenever you extend the blade template. Everything you can do with @yield can also be done with @section .. @show but not the other way around. Here is what they do:

@yield('main')

Can be replaced by @section('main') .. @endsection
Can be provided with a default string but no HTML! The default string will be shown in the sub-blade-template when no @section('main') .. @endsection is provided.

@section('main') .. @show

Can be replaced by @section('main') .. @endsection
Can be provided with a default HTML code. The default HTML code will be shown in the sub-blade-template when no @section('main') is provided.
Can be replaced by @section('main')@parent .. @endsection and additionally shows the default HTML code.

Here some examples:test.blade.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <h1>This is a test</h1>

    @yield('mainA')
    @yield('mainB', 'This is the alternative 1')
    @yield('mainC', '<p>This is the alternative 2</p>')
    @yield('mainD', 'This is the alternative 3')

    @section('testA')
    @show

    @section('testB')
      This is the alternative 4
    @show

    @section('testC')
      <p>This is the alternative 5</p>
    @show

    @section('testD')
      <p>This is the alternative 6</p>
    @show


  </body>
</html>

here is another file called testA.blade.php which extends the other bladed file:

@extends('test')

@section('mainD')
  <div>
    <p>First replacement!</p>
    <hr>
  </div>
@endsection

@section('testC')
  <div>
    <p>Second replacement!</p>
    <hr>
  </div>
@endsection

@section('testD')
  @parent
  <div>
    <p>Additional content</p>
    <hr>
  </div>
@endsection

And that is the outcome:

Punster answered 1/10, 2017 at 10:4 Comment(1)

This should be the real answer, as it's the most clear and understandable. – Anoint 30/4 at 12:26

S

44

This line clears out the confusion: "Note that views which extend a Blade layout simply override sections from the layout. Content of the layout can be included in a child view using the @parent directive in a section".

So, if you already have a @section defined in the master layout, it will be overriden unless you specify @parent inside the child layout's @section.

But for @yield, it always gets the section from the child layout. That means it always overrides the @yield part, even if it has a default defined as @yield('section', 'Default Content') .

I hope that clears your confusion. Let me know if you have more questions. Thanks

Slaw answered 16/3, 2015 at 6:14 Comment(7)

So to nail this home - @yield is just a shorthand for a @section that do not use @parent? Correct? – Chatman 16/3, 2015 at 6:33

Yes you can put it that way. @yield is always used to get content from a child page unto a master page. So when the Laravel executes your blade file, it first checks if you have extended a master layout, if you have extended one, then it shifts to the master layout and starts getting the @sections that you have overridden and the main content i.e the @yield from the child layout. And of course, finally, it parses the blade format to raw php and gives the output in html/css/js . – Slaw 16/3, 2015 at 6:38

I still don't get it. – Cf 3/4, 2015 at 10:58

@pvaitonis , which part are you still confused with? Let me know. Thanks – Slaw 14/4, 2015 at 12:39

About difference between @include and @yield. – Cf 16/4, 2015 at 17:48

@pvaitonis @include is similar to php's include() function, but it still can have @sections inside it, if it has .blade extension and it will work out the exact same way as a child layout. @yield only gets the appropriate @section from the child layout. – Slaw 17/4, 2015 at 13:35

You should also discuss the use of @stack() and @push(). What is the difference between @yield() and @stack()? – Catnip 4/11, 2019 at 1:2

T

8

The shortest answer:

Use @yield in master if you want to overwrite child data on master layout completely.

Use @section in master if you want to use master and child data together on child with @parent (Or overwrite child data on master layout like @yield)

Tetramethyldiarsine answered 17/1, 2019 at 8:10 Comment(0)

A

5

Basically yield('content') is a marker. For example, in the tag if you put a yield('content'), your saying this section has the name of content and by the way, you can name inside of the parenthesis anything you want. it doesn't have to be content. it can be yield('inside'). or anything you want.

And then in the child page where you want to import html from your layout page, you just say section('name of the section').
for example, if you have marked your header in your layout page as yield('my_head_band') <-- or anything else you want, then in your child page you just say @section('my_head_band').

This would import the header from the layout page into your child page. vice versa with your body section which in this case was named as content.

Hope this helps.

Afterworld answered 9/8, 2017 at 11:9 Comment(0)

S

0

Just to add on something small, @yield basically defines a section to be injected by overwriting the data and it also works if our view @extends the parent view.

Now when we overwrite, we replace an implementation completely with a new implementation, like a company can decide to change/overwrite its entire technology if they realize something went wrong.

It should not be confused with override

Sauls answered 8/2, 2019 at 8:41 Comment(0)

P

0

@yield having default value in second parameter and section doesn't have in master if you want to overwrite child data on master layout completely then you will use @yield.

Use @section in master if you want to use master and child data together on child with @parent (Or overwrite child data on master layout like @yield)

Example

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show
 
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

@extends('layouts.master')
 
@section('title', 'Page Title')
 
@section('sidebar')
    @@parent
 
    <p>This is appended to the master sidebar.</p>
@stop
 
@section('content')
    <p>This is my body content.</p>
@stop

Profusion answered 4/7, 2022 at 17:51 Comment(0)

Recommended topics

Hot tags