Laravel模板引擎Blade中section的一些標籤的區別介紹

                                   Laravel模板引擎Blade中section的一些標籤的區別介紹

     主要介紹了Laravel模板引擎Bladesection的一些標籤的區別介紹,本文講解了@yield @section@show @stop@append @override的區別,需要的朋友可以參考下。

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

1.@yield @section 都可以預定義可替代的區塊,這兩者有什麼區別呢?

2.@section 可以用 @show, @stop, @overwrite 以及 @append 來結束,這三者又有什麼區別呢?

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

@yield @section

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

與之相比, @section 則既可以被替代,又可以被擴展,這是最大的區別。比如:

代碼如下:

`-- layout`.`master--`

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

 

@section('content')

默認的內容

@show

 

代碼如下:

`-- home`.`index--`

@extends('layout.master')

@section('title')

@parent

新的標題

@stop

 

@section('content')

@parent

擴展的內容

@stop

 

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

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

@show @stop

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

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

代碼如下:

`-- layout`.`master--`

<divid="zoneA">

@section('zoneA')

AAA

@show

</div>

 

<divid="zoneB">

@section('zoneB')

BBB

@stop

</div>

 

<divid="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" 的定義,因此這個區塊不會被顯示。而在 page.view 中,用 @show 定義了 'zoneC',這會在執行到這裏時立即顯示內容,並按照模板繼承機制繼續覆蓋內容,因此最終顯示的內容會是:

 

複製代碼代碼如下:

ccc // 來自 page.view

<divclass="zoneA">

aaa

 

 

</div>

 

<divclass="zoneB">

 

</div>

 

<divclass="zoneC">

ccc

</div>

 

從結果可以看到,zoneB 的內容丟失,因爲沒有用 @show 告訴引擎輸出這部分的內容,而 zoneC 的內容會顯示兩次,並且還破壞了 layout.master 的頁面結構,因爲 @show 出現了兩次。

@append @override

剛纔說到了,@override 並不是在子模板中指明內容替換父模板的默認內容,而是另有用途,那麼是如何使用呢?這又涉及到一個 section 在模板中可以多次使用的問題。也即我們所定義的每一個 section ,在隨後的子模板中其實是可以多次出現的。比如:

 

代碼如下:

`-- master --`

<div>

@yield('content')

</div>

 

代碼如下:

`-- subview --`

@extends('master')

 

@section('content')

加一行內容

@append

 

@section('content')

再加一行內容

@append

 

@section('content')

加夠了,到此爲止吧。

@stop

 

在上例中,我在父級模板中只定義了一個名爲 "content" section,而在子模板中三次指定了這個 section 的內容。這個例子最終的輸出是:

 

代碼如下:

<div>

加一行內容

再加一行內容

加夠了,到此爲止吧。

</div>

 

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

代碼如下:

`-- master --`

<div>

@yield('content')

@yield('message')

</div>

 

代碼如下:

 

`-- master --`

<div>

@section('content')

加一行內容

@append

@section('content')

再加一行內容

@append

@section('content')

加夠了,結束吧

@stop

@section('content')

都不要了,我說的。

@override

</div>

 

這個例子和剛纔的類似,只不過最後加了一組定義。最終的輸出會是:

代碼如下:

<div>

都不要了,我說的。

</div>

 

所以,在正式的項目中,有時候需要對數據進行遍歷輸出的,可以使用 @append,而如果遍歷到了某個數據發現前面的都錯了呢?用 @override 就可以全部推翻。

 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章