Laravel Blade Templates：The Basics

商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。

從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。

FB粉專會頻繁地更新 Larry 對於商業、社會、人生的觀察與心得，歡迎大家追蹤互動~

******* 以下文章是基於 Laravel 5.3 *******

Laravel Blade 是 Laravel 獨家的 template 引擎。首先我們要知道兩個名詞：master view 與 child view. 可以把每頁相同的部分，例如 <head> 中的部分，放到 master view. 而把每頁實際內容放到 child view. 所以就一般情況而言，多個 child view 會共用一個 master view.

官方文件提供的 master view 範例

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

Extending A Layout

對應的 child view 範例

@extends('layouts.app')

@section('title', 'Page Title')

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection

要使用 master view, child view 的第一行要填入 @extend. 以上面範例來說，master view 是放在 “resources/views/layouts/app.blade.php”, 所以 @extend 參數填的是 layouts.app.

第二，master view 的 @yield, child view 用 @section 來接。child view 可以用 @section @endsection 塞一個區塊到 master view，或是 @section 參數直接填字串。child view 也可以不實作 @section，在 master view 裡就是留空。

第三，master view 的 @section @show, child view 用 @section @parent 來接。child view 的 @parent 可以「接著 master view 的內容寫」，而不是整段替換。child view 也可以只用 @section, 不寫 @parent, 這樣就是整段替換，與上面第二點同。child view 也可以不實作 @section，在 master view 裡就是顯示 @section @show 中間的內容。其實大部分使用時機，上面第二點都可以取代這個 @section @show.

要注意，概念上是 master view 管版面架構，child view 管文字、表單內容。child view 的 @section 內容會填回 master view, 而不是在 child view @section 的程式碼位置顯示。

Displaying Data

Laravel Blade 用兩個大括號來顯示 PHP 變數 {{ $your_variable }}. 而且他會自動通過 PHP htmlentities function, 防止 XSS 攻擊。例如有人留言 “<script>some malicious code</script>”, PHP htmlentities 會把 < > 等符號轉成 html symbol, 呈現給用戶時仍然是 “<script>some malicious code</script>”. 如果沒用 htmlentities 的話，那一段 script 就會跑起來了。

{!! !!} 「不會」通過 PHP htmlentities function. 使用時要特別小心，一般情況「不應該」使用 {!! !!}. 可能極少數情況，想用 Blade template 執行 html code, 例如 <br> 是換行，而 {{ }} 只是把 “<br>” 當字串顯示。

Blade & JavaScript Frameworks

Blade 使用 {{ }} 填入變數，這跟很多 JavaScript Framework 衝到，例如 Angular, Vue. 可以改用 @{{ }}，這樣 {{ }} 就會 serve 到前端，由前端框架來 templating。如果有一大段 @{{ }}，可以使用：

@verbatim
    Hello, {{ name1 }}, {{ name2 }}
    ...
@endverbatim

這樣其中所有 {{ }} 都會交由前端 templating.

Control Structures

Loop, If 等有 PHP 背景的讀者應該都熟悉，這邊不再贅述。提一下 @php @endphp 可以塞一段 native php 到 blade 檔案。

Including Sub-Views

master view 可以使用 @include 來把部分 html 切分出去，例如：

@include('view.name', ['some' => 'data'])

‘view.name’ 是檔案結構路徑，跟 @extends 參數類似，'view.name’ 是指 /resources/views/view/name.blade.php. 也可以傳參數進去 [‘some’ => ‘data’]

被 include 的檔案「不需要」extends master view. 如果 master view 有 include 而被 include 的檔案不存在的話，會出現 error. 可以使用 includeIf 如果不確定被 include 的檔案存不存在。

@includeIf('view.name', ['some' => 'data'])

Stacks

@stack and @push. 官方文件說

“This can be particularly useful for specifying any JavaScript libraries required by your child views”

因為 @yield 和 @section 可以完全達成在 child view 中指定該 child view 要用的 JS library，其實不需要 @stack and @push. @stack and @push 唯一獨特的點在於，可以多次 @push, 但就 larry 的經驗來說，使用時機很少。

以上就是 Laravel Blade 主要的架構與語法。其他 Blade 的 service injection, custom directives 等，使用時機很少，讀者可以自行斟酌讀或不讀。