Laravel template engine Blade section of some of the tags of the difference introduction _php tips

The blade template engine in the Laravel framework is good to use, but the introduction of blade in the official document is not detailed, some things are not written, and others are not clear. For example, you might encounter problems with this:

1. What is the difference between @yield and @section that can be predefined as alternative blocks?
2. @section can end with @show, @stop, @overwrite and @append, what is the difference between them?

This paper tries to make a simple but intuitive introduction to these problems.

@yield and @section

First of all, @yield is not extensible, if the part you want to define does not have the default content for the child template to expand, then use the form of @yield ($name, $default) is more convenient, if you do not specify the content of the block in the template, it will display the default content, if defined, It will show you what you define. Either

By contrast, @section can be replaced and expanded, which is the biggest difference. Like what:

Copy Code code as follows:

{{--Layout.master--}}
@yield (' title ', ' default title ')

@section (' content ')
The default content
@show

Copy Code code as follows:

{{--Home.index--}}
@extends (' Layout.master ')

@section (' title ')
@parent
New title
@stop

@section (' content ')
@parent
What's Expanded
@stop

In the example above, the template defines a block with @yield and @section, and then defines the content in the child template, and since the @yield cannot be extended, even if the addition of the @parent does not work, the output is only "new title" and replaces "default caption". Therefore, the resulting page can only be "default title" or "new title" and cannot coexist. In the @section definition, the contents of the parent template are retained and then added after the @parent keyword is used, and the output is "the content of the default content extension."

The document on the official web site does not cover @parent keywords, saying that the default behavior is "extended" and that it is wrong to overwrite the need to end with @override, [the latest document on GitHub][docs] has been amended. @section plus @stop, the default is substitution (injection), which must be extended with @parent keyword. and the @override keyword actually has another application scenario.

@show and @stop

Next to say and @section corresponding to the end of the keyword, @show, @stop What is the difference? (Some articles on the web, as well as some editor plug-ins will also prompt @endsection, which has been removed in version 4.0, although backward-compatible, but not recommended).

@show refers to outputting content from that section to the page when it is executed, while @stop is simply parsing the content and no longer processes subsequent processing of the section in the current template, unless overridden by @override (see the next section). In general, when you first define a section, you should use a @show, and when you replace it or expand it, you should not use the @show, you should use the @stop. The following examples illustrate:

Copy Code code as follows:

{{--Layout.master--}}
<div id= "Zonea" >
@section (' Zonea ')
Aaa
@show


</div>




<div id= "Zoneb" >
@section (' Zoneb ')
Bbb
@stop


</div>




<div id= "Zonec" >
@section (' Zonec ')
Ccc
@show


</div>

Copy Code code as follows:

{{--Page.view--}}
@extends (' Layout.master ')

@section (' Zonea ')
Aaa
@stop

@section (' Zoneb ')
Bbb
@stop

@section (' Zonec ')
Ccc
@show

In Layout.master, the @stop to end "Zoneb", because the entire template system, there is no @show end of the definition of "zoneb", so this block will not be displayed. In Page.view, the ' Zonec ' is defined with @show, which displays the content as soon as it is executed, and continues to overwrite the content according to the template inheritance mechanism, so the final display will be:

Copy Code code as follows:

CCC//From 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 the Zoneb is lost because there is no @show telling the engine to output this part of the content, and the content of the Zonec is displayed two times, and it also destroys the Layout.master page structure, because the @show appears two times.

@append and @override

Just now, @override is not to indicate in the child template that the content replaces the default content of the parent template, but it is otherwise useful, so how is it used? This also involves a section that can be used more than once in a template. Each section that we define, in fact, can occur more than once in subsequent child templates. Like what:

Copy Code code as follows:

{{--master-}}
<div>
@yield (' content ')


</div>

Copy Code code as follows:

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

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

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

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

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

Copy Code code as follows:

<div>
Add one line of content
Add one more line of content
That's enough.
</div>

Three times the specified content is displayed, the key is @append this keyword, it indicates "content here to add", so the content will continue to expand. In the end, the @stop is used to indicate that this section is being processed. If you continue using @append or @stop to specify the contents of this section later, it will not take effect. Unless treated with @override. The meaning of @override is "to cover all the definitions prior to this one". Like what:

Copy Code code as follows:

{{--master-}}
<div>
@yield (' content ')
@yield (' message ')


</div>

Copy Code code as follows:

{{--master-}}
<div>
@section (' content ')
Add one line of content
@append
@section (' content ')
Add one more line of content
@append
@section (' content ')
That's enough, it's over.
@stop
@section (' content ')
No, I said it.
@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:

Copy Code code as follows:

<div>
No, I said it.
</div>

So, in a formal project, sometimes you need to traverse the data to output, you can use @append, and if the traversal to a data found in front of all wrong? Use @override to overturn it all.