Laravel Blade Template basics
Laravel PHP

Laravel Blade Templates:The Basics

商業,創業,美食,葡萄酒,閱讀,網路科技。

這是我的 FB粉專 以及 IG,我比較常使用 Threads,歡迎大家追蹤互動~

https://laravel.com/docs/5.3/blade

******* 以下文章是基於 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 等,使用時機很少,讀者可以自行斟酌讀或不讀。

商業,創業,美食,葡萄酒,閱讀,網路科技。

這是我的 FB粉專 以及 IG,我比較常使用 Threads,歡迎大家追蹤互動~