An introduction to the differences between some section tags in Laravel template engine Blade

The Blade template engine in the Laravel framework is very easy to use, but the introduction of Blade in the official documentation is not detailed. Some things are not written out, and some are not explained clearly. For example, you may encounter the following problems during use:

1. Both @yield and @section can predefine replaceable blocks. What is the difference between the two?
2.@section can be ended with @show, @stop, @overwrite and @append. What is the difference between these three?

This article attempts to give a relatively simple but intuitive introduction to these issues.

@yield and @section

First of all, @yield is not expandable. If the section you want to define does not have default content for the subtemplate to expand, then use @yield($name, $ default) form is more convenient. If you do not specify the content of this block in the subtemplate, it will display the default content. If it is defined, it will display the content you defined. It’s either/or.

In contrast, @section can both be replaced and extended. This is the biggest difference. For example:

{{-- layout.master --}}
@yield('title','默认标题')
 
@section('content')
默认的内容
@show

{{-- home.index --}}
@extends('layout.master')
 
@section('title')
  @parent
  新的标题
@stop
 
@section('content')
  @parent
  扩展的内容
@stop

In the above example, the template uses @yield and @section to define a block respectively, and then defines the content in the sub-template. Since @yield cannot be expanded, even if @ is added parent also doesn't work, the output content is only "new title", replacing the "default title". Therefore, the final generated page can only be "default title" or "new title", but not both. As for the part defined by @section, due to the use of the @parent keyword, the content in the parent template will be retained, and then the content added after expansion will be added, and the output content will be "default content expanded content".

The documentation on the official website does not involve the @parent keyword. It says that the default behavior is "extend". To override it, you need to use @override to end it. This is wrong. [The latest documentation on github ][docs] Corrected. @section plus @stop, the default is replacement (injection), and the @parent keyword must be used to expand. The @override keyword actually has another application scenario.

@show and @stop

Next, let’s talk about the end keywords corresponding to @section. What is the difference between @show and @stop? (Some articles on the Internet and some editor plug-ins will also prompt @endsection. This has been removed in version 4.0. Although it is backward compatible, its use is not recommended).

@show refers to outputting the content in the section to the page when execution reaches this point, while @stop only performs content parsing and will no longer process subsequent processing of the section in the current template unless Override with @override (see next section for details). Generally speaking, when defining a section for the first time, @show should be used, and when replacing it or extending it, @show should not be used, but @stop should be used. The following is an example:

{{-- layout.master --}}
<div id="zoneA">
  @section(&#39;zoneA&#39;)
      AAA
      @show
     
   
</div>
 
 
 
 
<div id="zoneB">
  @section(&#39;zoneB&#39;)
      BBB
      @stop
     
   
</div>
 
 
 
 
<div id="zoneC">
  @section(&#39;zoneC&#39;)
      CCC
      @show
     
   
</div>

{{-- page.view --}}
@extends('layout.master')
 
@section('zoneA')
aaa
@stop
 
@section('zoneB')
bbb
@stop
 
@section('zoneC')
ccc
@show

In layout.master, use @stop to end "zoneB". Since there is no definition of "zoneB" ending with @show in the entire template system, this block cannot will be displayed. In page.view, 'zoneC' is defined with @show, which will display the content immediately when the execution reaches here, and continue to overwrite the content according to the template inheritance mechanism, so the final displayed content will be:

ccc // 来自 page.view
<div class="zoneA">
  aaa
     
   
</div>
 
 
 
 
<div class="zoneB">
   
</div>
 
 
 
 
<div class="zoneC">
  ccc
     
   
</div>

As you can see from the results, the content of zoneB is lost because @show is not used to tell the engine to output this part of the content, while the content of zoneC will be displayed twice, and the page structure of layout.master is also destroyed because @show appears. twice.

@append and @override

As mentioned just now, @override does not specify content in the child template to replace the default content of the parent template, but has another purpose. So how to use it? This again involves the issue that a section can be used multiple times in a template. That is to say, each section we define can actually appear multiple times in subsequent sub-templates. For example:

{{-- master --}}
<div>
  @yield(&#39;content&#39;)
     
   
</div>

{{-- subview --}}
@extends('master')

@section('content')
Add a line of content
@append

@section('content')
Add one more line of content
@append

@section('content')
That's enough. That's it. Bar.
@stop

In the above example, I only defined a section named "content" in the parent template, and specified the content of this section three times in the child template. The final output of this example is:

<div>
加一行内容
再加一行内容
加够了，到此为止吧。
</div>

The content specified three times is displayed. The key lies in the @append keyword, which indicates "the content here is added to", so the content will continue to expand. And @stop is used at the end, indicating that the processing of this section ends here. If you continue to use @append or @stop to specify the content of this section, it will not take effect. Unless handled with @override. @override means "overwrite all previous definitions, and this one will prevail." For example:

{{-- master --}}
<div>
  @yield(&#39;content&#39;)
    @yield(&#39;message&#39;)
     
   
</div>

{{-- master --}}
<div>
  @section(&#39;content&#39;)
    加一行内容
    @append
    @section(&#39;content&#39;)
    再加一行内容
    @append
    @section(&#39;content&#39;)
    加够了，结束吧
    @stop
    @section(&#39;content&#39;)
    都不要了，我说的。
    @override
     
   
</div>

This example is similar to the previous one, except that a set of definitions is added at the end. The final output will be:

<div>
  都不要了，我说的。
</div>

So, in a formal project, sometimes you need to traverse the data for output, you can use @append, and if you traverse a certain data and find that the previous ones are wrong? ? Use @override to override them all.

For more information on the differences between some section tags in the Laravel template engine Blade, please pay attention to the PHP Chinese website!