Laravel Views and Blade

文件範例版本

PHP:7.2

Laravel:5.6

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 }}.
Categories: Laravel