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

Laravel 框架中的 Blade 模板引擎，很好用，但是在官方文檔中有關 Blade 的介紹并不詳細，有些東西沒有寫出來，而有些則是沒有說清楚。比如，使用中可能會遇到這樣的問題：

和 @section 都可以預定義可替代的區(qū)塊，這兩者有什么區(qū)別呢？

可以用 @show, @stop, @overwrite 以及 @append 來結束，這三者又有什么區(qū)別呢？

本文試對這些問題做一個比較淺顯但是直觀的介紹。

@yield 與 @section

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

與之相比， @section 則既可以被替代，又可以被擴展，這是最大的區(qū)別。比如：

代碼如下:

{{-- layout.master --}}

@yield('title','默認標題')

@section('content')

默認的內(nèi)容

@show

代碼如下:

{{-- home.index --}}

@extends('layout.master')

@section('title')

@parent

新的標題

@stop

@section('content')

@parent

擴展的內(nèi)容

@stop

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

官方網(wǎng)站上的文檔中并沒有涉及 @parent關鍵字，說的是默認行為是“擴展”，要覆蓋需要用 @override 來結束，這是錯的，[github 上的最新文檔][docs] 已經(jīng)做了修正。@section 加上 @stop，默認是替換（注入），必須用 @parent 關鍵字才能擴展。而@override 關鍵字實際上有另外的應用場景。

@show 與 @stop

接下來再說說與 @section 對應的結束關鍵字，@show, @stop 有什么區(qū)別呢？（網(wǎng)上的部分文章，以及一些編輯器插件還會提示 @endsection, 這個在 4.0 版本中已經(jīng)被移除，雖然向下兼容，但是不建議使用）。

@show 指的是執(zhí)行到此處時將該 section 中的內(nèi)容輸出到頁面，而 @stop 則只是進行內(nèi)容解析，并且不再處理當前模板中后續(xù)對該section的處理，除非用 @override覆蓋（詳見下一部分）。通常來說，在首次定義某個 section 的時候，應該用 @show，而在替換它或者擴展它的時候，不應該用 @show，應該用 @stop。下面用例子說明：

代碼如下:

{{-- 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 來結束 "zoneB"，由于整個模板體系中，沒有以 @show 結束的 "zoneB" 的定義，因此這個區(qū)塊不會被顯示。而在 page.view 中，用 @show 定義了 'zoneC'，這會在執(zhí)行到這里時立即顯示內(nèi)容，并按照模板繼承機制繼續(xù)覆蓋內(nèi)容，因此最終顯示的內(nèi)容會是：

復制代碼 代碼如下:

ccc // 來自 page.view

<div class="zoneA">

aaa

</div>

<div class="zoneB">

</div>

<div class="zoneC">

ccc

</div>

從結果可以看到，zoneB 的內(nèi)容丟失，因為沒有用 @show 告訴引擎輸出這部分的內(nèi)容，而 zoneC 的內(nèi)容會顯示兩次，并且還破壞了 layout.master 的頁面結構，因為 @show 出現(xiàn)了兩次。

@append 和 @override

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

代碼如下:

{{-- master --}}

<div>

@yield('content')

</div>

代碼如下:

{{-- subview --}}

@extends('master')

@section('content')

加一行內(nèi)容

@append

@section('content')

再加一行內(nèi)容

@append

@section('content')

加夠了，到此為止吧。

@stop

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

代碼如下:

<div>

加一行內(nèi)容

再加一行內(nèi)容

加夠了，到此為止吧。

</div>

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

代碼如下:

{{-- master --}}

<div>

@yield('content')

@yield('message')

</div>

代碼如下:

{{-- master --}}

<div>

@section('content')

加一行內(nèi)容

@append

@section('content')

再加一行內(nèi)容

@append

@section('content')

加夠了，結束吧

@stop

@section('content')

都不要了，我說的。

@override

</div>

這個例子和剛才的類似，只不過最后加了一組定義。最終的輸出會是：

代碼如下:

<div>

都不要了，我說的。

</div>

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

更多信息請查看IT技術專欄