[Laravel] 04 - Blade templates

前言

---

1、大綱

From: https://www.imooc.com/video/12509 

 

Blade視圖頁面 --> 編譯 --> 原生PHP --> 並緩存起來。

既然是個模板：通用的「頭部」和「尾部」。

 

2、添加模板文件 (.blade.php)

 

 

 

Blade 模板

---

1、模板繼承

• 定義佈局 - [1]

section, yield, extends, parent四個關鍵字。

[resources/views/layouts.blade.php]

 

• 初步理解關鍵字

@section

定義視圖片斷。

 

@yield

相似佔位符，顯示某個制定section所表明的內容。用子模板去實現它。

不可擴展。只是聲明瞭一個視圖片斷。

 

• 加載佈局

Route --> Controller --> template for view.

[1]  路由

Route::any('section1', ['uses' => 'StudentController@section1']);

 

[2]  控制器

public function section1()
{
　　return view('student.section1');　　// 渲染模板
}

student/section1能夠；student.section1也能夠，但推薦後者。

 

[3]  視圖 加載佈局

新建 resources/views/student/section1.blade.php

Jeff: 這裏，視圖繼承了layouts的內容。

＠extends('layouts')

這樣，便加載了默認 resources/views 下的 layouts.blade.php。

 

• 繼承佈局 - [2]

先經過 @extends 繼承父模板主體。

其實就是「重寫佈局」局部內容。

 

• 若干疑難點

[1] yield與section的區別？

** 初步理解：

- @yield() 能夠理解爲一個佔位符。
- @section('head') 表示一個存儲區域，這個區域內定義的內容，在子模板中能夠經過 @parent 進行調用。

 

** 不能被擴展如何理解：

@yield 不能被擴展，因此即便加上了 @parent 也不起做用，輸出的內容只有「新的標題」，替換了「默認的標題」。

@section 定義的部分，因爲使用了 @parent 關鍵字，父模板中的內容會被保留，而後再擴展後添加的內容進去。

 

[2] @section ... @stop ... @show ... @endsection

Ref: Laravel5.4初試-@yield @section @show @stop @append標籤區別

Ref: Blade 模板中有關 section 的那些事【這纔是原文】

** @endsection

這個在 4.0 版本中已經被移除，雖然向下兼容，可是不建議使用

 

** @show 與 @stop 

@show 指的是執行到此處時將該 section 中的內容輸出到頁面，

@stop 則只是進行內容解析，而且再也不處理當前模板中後續對該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

最終顯示結果：

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

ccc // 來自 page.view
<div class="zoneA">
aaa </div>

<div class="zoneB">

</div>

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

 

一個理解： 

@section('content')
<h1>Test</h1>
@show

is equivalent to

@section('content')
<h1>Test</h1>
@stop

@yield('content')

 

 

2、模板調用PHP 

• view 使用 "變量 from controller"

Controller中定義了一個變量：

public function section1()
{
　　$name = 'sean‘ ;
　　return view('student.section1', [
　　　　'name' => $name
　　]);
}

view的模板文件 [resources/views/student/section1.blade.php]：

@section('content')
    content

    <p>{{ $name }} </p>

@stop

效果以下：

 

• 直接調用php代碼

[1] 視圖中使用代碼以下：

其中最後同樣的or寫法是上一行三元表達式的替代寫法在blade中。

 

[2] 控制器中定義變量。

public function section1()
{
　　$name = 'sean‘;
　　$arr  = ['sean', 'imooc'];

　　return view('student.section1', [
　　　　'name' => $name,
　　　　'arr'  => $arr,
　　]);
}

 

• 轉移字符＠

<p>@{{ $name }}</p>

 

• 模板中註釋

模板的註釋在解析後的html中是看不到的。

<!-- 一二三　-->　　　　＃ php註釋

{{-- 四五六 --}}　　　　# 模板註釋，用於比較隱私的註釋方法

  

 

3、include的使用 

• 相似子函數

引入子視圖，不是都須要，但用的地方也很多。

[1] Create sub-view as common1.blade.php

 

[2] sub-view，至關於 "將被調用" 的子函數。

<p> 我是include {{ $message }}</p>

 

[3] main-view 調用 sub-view 以下。

@include('student.common1', ['message' => '我是錯誤信息'])

這裏，調用了student目錄下的common1.blade.php，並給參數message傳入了一個值：'我是錯誤信息'

 

• 實際使用示範

有點佔位符的意思。

 

 

4、流程控制

• 條件判斷

[1] 視圖中可使用if foreach等。

<br>
@if ($name == 'sean')
　　I'm sean
@elseif ($name == 'imooc')
　　I'm imooc
@else
　　Who am I?
@endif

<br>
@If (in_array($name, $arr))
　　true
@else
　　false
@endif

[2] unless 至關於 if 取反。

<br>
@unless($name == 'sean')
　　I'm sean
@endunless

 

• 循環遍歷

 

方法一

<br>
@for ($i = 0; $i < 10; $i++)
　　<p>{{ $i }}</p>
#endfor


方法二

<br>
@foreach($students as $student)
　　<p>{{ $student->name }}</p>
@endforeach

方法三

<br>
@forelse($students as $student) 　　<p>{{ $student->name }}</p> @empty
　　<p>null</p>
@endforelse

 

 

5、模板中的URL

• 點擊連接後跳轉到這裏

[1]  路由

[app/Http/routes.php]

Route::any('url', ['as' => 'url', 'uses' => 'StudentController@urlTest']);

 

[2] 路由 --> 控制函數

[app/Http/Controllers/StudentController.php]

public function urlTest()
{
　　return 'urlTest';　　
} 

 

• 創建這個連接

在此，section1中添加一個連接：url()

看上去，貌似如下三個調用的分別是Route的那行代碼的三個不一樣的部分。

方式一
<a href="{{ url('url') }}">url()</a>

方式二
<a href="{{ action('StudentController@urlTest') }}">action()</a>　　# 寫得太長

方式三
<a href="{{ route('url') }}">route()</a>

添加後效果：