Laravel Views and Blade
PHP:7.2
Laravel:5.7
View 是在 Laravel 中是扮演 顯示層
的角色,負責將你顯示與邏輯拆開,讓 Controller 只留有需求邏輯。View 的內容通常都是 HTML ,檔案存放在 resources/views
底下;不過,通常顯示層不單單只有包含固定的顯示,可能會有一些顯示邏輯需要處理,這時候就必須透過 Blade 的語法協助處理。
Blade 是一個功能很完整的 template engine ,View 可以透過 Blade 的語法進行一些顯示邏輯的操作,例如:變數代入、判斷式等等。所有的 Blade Views 都會被編譯成 PHP 的程式碼並做 cache(storage/framework/views
),直到它們被改動為止。Blade Views 的副檔名是以 .blade.php
為命名。
Basic View
View 的使用很簡單,只要在 resources/views
的目錄裡建立檔案,再從 Controller 或 Route 裡使用 view() method 就可以呼叫了。
resources/views/test.blade.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
</head>
<body>
<h2>This is a test</h2>
</body>
</html>
Controller
namespace App\Http\Controllers;
class TestController extends Controller
{
public function test()
{
// view() 代入參數為檔名的 prefix,路徑預設是從 resources/views 開始
return view('test');
}
}
Blade
利用 Blade 語法進行基本顯示邏輯的處理。
resources/views/pages/test.blade.php
{{-- Blade 的註解,不會被 include 進 HTML 中 --}}
{{-- 利用 {{ }} 語法代入變數 --}}
<h2>Hello, I am {{ $name }}</h2>
{{-- Blade If Statements --}}
{{-- @if、@elseif、@else、@endif --}}
@if ('Man' === $gender)
<h4>Man</h4>
@else
<h4>Woman</h4>
@endif
{{-- Blade Loops --}}
<h4>Which one do you like<h4>
<ul>
@foreach ($items as $item)
<li>{{ $item }}</li>
@endforeach
</ul>
<h4>Current Value</h4>
@for ($i = 0; $i < 10; $i++)
The current value is {{ $i }}<br>
@endfor
Controller
public function test()
{
// view 的目錄選擇以 dot 為分格符號
// 代入 view 要使用到的變數
return view('pages.test', [
'name' => 'JohnsonLu',
'gender' => 'Man',
'items' => ['Milk', 'Tea']
]);
}
Layouts
網頁在設計上一定會有一個主要的樣板(Layouts),各個頁面都會在這個樣板之下做資料的呈現,樣板為了可以 reuse ,開發者習慣把樣板抽離出來成為獨立的檔案,再由各頁面去引用。而 Blade 當然也有提供這樣子的功能。
resources/views/layouts/app.blade.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>App Name - @yield('title')</title>
</head>
<body>
@section('page-name')
<h3>This page is:</h3>
@show
<div class="container">
@yield('content')
</div>
</body>
</html>
resources/views/test.blade.php
{{-- 繼承 layouts.app --}}
@extends('layouts.app')
{{-- 定義 title section 的 value --}}
@section('title', 'Test Page')
{{-- 搭配 @parent 指令繼承 layouts 的 page-name section,並繼續顯示內容 --}}
@section('page-name')
@parent
<p>Index Page</p>
@endsection
{{-- 定義 content section 的內容 --}}
@section('content')
<p>This is my body content.</p>
@endsection
{{-- 透過 @include 指令引用其他的 section --}}
{{-- resources/views/include/example.blade.php --}}
@include('include.example')
接著介紹一下以上範例中使用到的 Balde @yield
、@section
指令。@yield
負責顯示 section 內容,@section
負責定義要顯示的內容。
Notice:Section 中 @endsection 和 @show 的差異分別是:
@endsection
區塊單純只是定義內容,如果@yield
沒有使用到該 Section,就不會顯示。@show
結尾的 Section 作用跟@yield
很類似,會直接顯示區塊中的內容,差別在於它可以從一樣的 Section name 搭配 @parent 繼承顯示不同的內容。
Blade 與 JavaScript Frameworks
許多 JavaScript Frameworks 的顯示語法也是以 {{}}
(curly braces)為主,但這樣一來,HTML 中會分不清是 Blade 還是 JavaScript Framework 的語法,因此 Blade 提供了跳脫字符 @
解決這個問題。
<h1>Laravel</h1>
{{-- 利用 @ 跳脫,Blade 並不會處理這段,而是直接完整顯示 {{ name }} 在 HTML 中 --}}
Hello, @{{ name }}.