參考:@section與@yield 介紹

2018-02-24 15:52 更新

這篇文章主要介紹了Laravel模板引擎Blade中section的一些標(biāo)簽的區(qū)別介紹,本文講解了@yield@section@show@stop、@append@override的區(qū)別,需要的朋友可以參考下

Laravel 框架中的 Blade 模板引擎,很好用,但是在官方文檔中有關(guān) Blade 的介紹并不詳細(xì),有些東西沒(méi)有寫(xiě)出來(lái),而有些則是沒(méi)有說(shuō)清楚。比如,使用中可能會(huì)遇到這樣的問(wèn)題:

1.@yield@section 都可以預(yù)定義可替代的區(qū)塊,這兩者有什么區(qū)別呢?
2.@section 可以用 @show, @stop, @overwrite 以及 @append 來(lái)結(jié)束,又有什么區(qū)別呢?

本文試對(duì)這些問(wèn)題做一個(gè)比較淺顯但是直觀的介紹。

@yield 與 @section

首先,@yield 是不可擴(kuò)展的,如果你要定義的部分沒(méi)有默認(rèn)內(nèi)容讓子模板擴(kuò)展的,那么用 @yield($name, $default) 的形式會(huì)比較方便,如果你在子模板中并沒(méi)有指定這個(gè)區(qū)塊的內(nèi)容,它就會(huì)顯示默認(rèn)內(nèi)容,如果定義了,就會(huì)顯示你定義的內(nèi)容。非此即彼。

與之相比, @section 則既可以被替代,又可以被擴(kuò)展,這是最大的區(qū)別。比如:
代碼如下:

{{-- layout.master --}}
@yield('title','默認(rèn)標(biāo)題')

@section('content')
默認(rèn)的內(nèi)容
@show

代碼如下:

{{-- home.index --}}
@extends('layout.master')

@section('title')
@parent
新的標(biāo)題
@stop

@section('content')
@parent
擴(kuò)展的內(nèi)容
@stop

上面的例子中,模板用 @yield@section 分別定義了一個(gè)區(qū)塊,然后在子模板中去定義內(nèi)容,由于 @yield 不能被擴(kuò)展,所以即使加上了 @parent 也不起作用,輸出的內(nèi)容只有“新的標(biāo)題”,替換了“默認(rèn)的標(biāo)題”。因此最終生成的頁(yè)面只能是“默認(rèn)的標(biāo)題”或者“新的標(biāo)題”,不能并存。而 @section 定義的部分,由于使用了 @parent 關(guān)鍵字,父模板中的內(nèi)容會(huì)被保留,然后再擴(kuò)展后添加的內(nèi)容進(jìn)去,輸出的內(nèi)容會(huì)是 “默認(rèn)的內(nèi)容 擴(kuò)展的內(nèi)容”。

官方網(wǎng)站上的文檔中并沒(méi)有涉及 @parent 關(guān)鍵字,說(shuō)的是默認(rèn)行為是“擴(kuò)展”,要覆蓋需要用 @override 來(lái)結(jié)束,這是錯(cuò)的,[github 上的最新文檔][docs] 已經(jīng)做了修正。@section 加上 @stop,默認(rèn)是替換(注入),必須用 @parent 關(guān)鍵字才能擴(kuò)展。而 @override 關(guān)鍵字實(shí)際上有另外的應(yīng)用場(chǎng)景。

@show 與 @stop

接下來(lái)再說(shuō)說(shuō)與 @section 對(duì)應(yīng)的結(jié)束關(guān)鍵字,@show, @stop 有什么區(qū)別呢?(網(wǎng)上的部分文章,以及一些編輯器插件還會(huì)提示 @endsection, 這個(gè)在 4.0 版本中已經(jīng)被移除,雖然向下兼容,但是不建議使用)。

@show 指的是執(zhí)行到此處時(shí)將該 section 中的內(nèi)容輸出到頁(yè)面,而 @stop 則只是進(jìn)行內(nèi)容解析,并且不再處理當(dāng)前模板中后續(xù)對(duì)該section的處理,除非用 @override覆蓋(詳見(jiàn)下一部分)。通常來(lái)說(shuō),在首次定義某個(gè) section 的時(shí)候,應(yīng)該用 @show,而在替換它或者擴(kuò)展它的時(shí)候,不應(yīng)該用 @show,應(yīng)該用 @stop。下面用例子說(shuō)明:

代碼如下:

{{-- 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>

代碼如下:

{{-- page.view --}}
@extends('layout.master')

@section('zoneA')
aaa
@stop

@section('zoneB')
bbb
@stop

@section('zoneC')
ccc
@show

layout.master 中,用 @stop 來(lái)結(jié)束 "zoneB",由于整個(gè)模板體系中,沒(méi)有以 @show 結(jié)束的 "zoneB" 的定義,因此這個(gè)區(qū)塊不會(huì)被顯示。而在 page.view 中,用 @show 定義了 'zoneC',這會(huì)在執(zhí)行到這里時(shí)立即顯示內(nèi)容,并按照模板繼承機(jī)制繼續(xù)覆蓋內(nèi)容,因此最終顯示的內(nèi)容會(huì)是:

代碼如下:

ccc // 來(lái)自 page.view
<div class="zoneA">
aaa
</div>

<div class="zoneB">

</div>

<div class="zoneC">
ccc
</div>

從結(jié)果可以看到,zoneB 的內(nèi)容丟失,因?yàn)闆](méi)有用 @show 告訴引擎輸出這部分的內(nèi)容,而 zoneC 的內(nèi)容會(huì)顯示兩次,并且還破壞了 layout.master 的頁(yè)面結(jié)構(gòu),因?yàn)?@show 出現(xiàn)了兩次。

@append 和 @override

剛才說(shuō)到了,@override 并不是在子模板中指明內(nèi)容替換父模板的默認(rèn)內(nèi)容,而是另有用途,那么是如何使用呢?這又涉及到一個(gè) section 在模板中可以多次使用的問(wèn)題。也即我們所定義的每一個(gè) section ,在隨后的子模板中其實(shí)是可以多次出現(xiàn)的。比如:

代碼如下:

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

代碼如下:

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

@section('content')
加一行內(nèi)容
@append

@section('content')
再加一行內(nèi)容
@append

@section('content')
加夠了,到此為止吧。
@stop

在上例中,我在父級(jí)模板中只定義了一個(gè)名為 "content" 的 section,而在子模板中三次指定了這個(gè) section 的內(nèi)容。 這個(gè)例子最終的輸出是:

代碼如下:

<div>
加一行內(nèi)容
再加一行內(nèi)容
加夠了,到此為止吧。
</div>

三次指定的內(nèi)容都顯示出來(lái)了,關(guān)鍵就在于 @append 這個(gè)關(guān)鍵字,它表明“此處的內(nèi)容添加到”,因此內(nèi)容會(huì)不斷擴(kuò)展。而最后用了 @stop,表示這個(gè) section 的處理到此為止。如果在后面繼續(xù)用 @append 或者 @stop 來(lái)指定這個(gè) section 的內(nèi)容,都不會(huì)生效。除非用 @override 來(lái)處理。 @override 的意思就是“覆蓋之前的所有定義,以這次的為準(zhǔn)”。比如:

代碼如下:

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

代碼如下:

{{-- master --}}
<div>
@section('content')
加一行內(nèi)容
@append
@section('content')
再加一行內(nèi)容
@append
@section('content')
加夠了,結(jié)束吧
@stop
@section('content')
都不要了,我說(shuō)的。
@override
</div>

這個(gè)例子和剛才的類(lèi)似,只不過(guò)最后加了一組定義。最終的輸出會(huì)是:

代碼如下:

<div>
都不要了,我說(shuō)的。
</div>

所以,在正式的項(xiàng)目中,有時(shí)候需要對(duì)數(shù)據(jù)進(jìn)行遍歷輸出的,可以使用 @append,而如果遍歷到了某個(gè)數(shù)據(jù)發(fā)現(xiàn)前面的都錯(cuò)了呢?用 @override 就可以全部推翻。


參考地址:http://www.jb51.net/article/60957.htm
不一定是文章源

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)