[Day 6] 優化網頁外觀！淺聊 blade 樣板

第 11 屆 iThome 鐵人賽

DAY 6

Modern Web

Laravel 6.0 初體驗！怎麼用最新的 laravel 架網站！系列第 6 篇

11th鐵人賽 php laravel

ReccaChao

2019-09-08 21:34:35

11446 瀏覽

分享至

寫好自動測試之後，我們回過頭來看看之前的網頁。

嗯⋯⋯

陷入沈思

Laravel 雖然能直接編寫網頁 HTML 也還不錯，但是作為一個框架，難道沒有針對前端的一些協助，讓編寫網頁外觀更簡單的一些方式嗎？

當然有！這就是 Laravel 的 blade engine！讓我們一起來學學怎麼使用吧！

Blade Engine

如 Lucas 邦友在 Day 4 的留言內提到的，Blade 是 Laravel 使用的模板引擎，可以使用更簡潔的方式來產生前端的外觀。

Layout

設計網頁時，通常我們會使用某些外觀樣板，保證網頁大致的外觀相同。然後在特定頁面內，我們再填入每個頁面各自的內容。

利用 Laravel 的 Blade Engine，我們可以很容易達成這件事情

首先，我們建立 resources/views/layouts 資料夾。這個資料夾之後可以用來裝不同的模板

完成後，我們建立 resources/views/layouts/app.blade.php 檔案：

<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <div class="sidebar" style="width: 15%; float: left; background-color:#aaa;">
            側邊欄
        </div>

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

在這裡，我們用 @yield() 這個語法，標記出之後引用的頁面希望顯示內容的位置。

然後，我們建立 resources/views/about_us.blade.php：

@extends('layouts.app')

@section('content')
    <p>嗨！大家好！</p>
@endsection

相信聰明的讀者都看得出來，我們在這裡用 @section('content') @endsection 標記出我們希望顯示在 @yield('content') 裡面的內容

接著，我們建立一個 route 來呈現這個畫面。在 routes/web.php 裡面，我們加上：

Route::get('/about_us', function () {
    return view('about_us');
});

就這樣！

現在，我們來看看畫面呈現的樣子

blade demo

雖然有點不好看，不過我們可以看出來，利用 @extends('layouts.app') 這個語法，about_us.blade.php 這個樣板確實成功的引用了 layouts/app.blade.php 裡面的檔案

這樣，我們就能很簡單的在每個頁面裡，引用各自的模板樣式了！

顯示資料

能夠利用 layout 的方式，來讓網頁共用相同的模板確實不錯。不過作為網頁，總是要顯示一些後端送過去的資料才對嘛。

幸好！Laravel 的 Blade Engine 在這件事情上非常簡單！我們利用前面的 about_us 來做練習。

首先，我們稍微改寫一下 resources/views/about_us.blade.php：

@extends('layouts.app')

@section('content')
    <p>嗨！大家好！我們是{{$name}}</p>
@endsection

然後，就是從後端送出 $name 的內容了。我們這裡改寫 routes/web.php 使其送出內容：

Route::get('/about_us', function () {
    return view('about_us', ['name' => 'Laravel 6.0 範例']);
});

這樣！我們就成功的將資料傳到 blade 裡面了！

blade demo

畫面上的字成功地變成了「嗨！大家好！我們是Laravel 6.0 範例」

控制語法

能將資料從後端傳到前端之後，我們可以做的操作選項就變得更豐富了。

以下簡單介紹幾個常用的控制語法：

if 判斷

在 blade 裡面使用 if 判斷的範例如下：

@if (count($records) === 1)
    有一筆資料!
@elseif (count($records) > 1)
    有多筆資料!
@else
    沒有資料!
@endif

switch 判斷

對應 if，在 blade 裡面使用 switch 判斷的範例如下：

@switch(count($records))
    @case(1)
        有一筆資料!
        @break

    @case(2)
        有二筆資料!
        @break

    @default
        有資料
@endswitch

迴圈

在 blade 裡面使用迴圈的範例如下：

// fore 迴圈
@for ($i = 0; $i < 10; $i++)
    現在迴圈跑到 {{ $i }}
@endfor

// foreach 迴圈
@foreach ($users as $user)
    現在 user id 為 {{ $user->id }}
@endforeach

// while 迴圈
@while (true)
    無窮迴圈
@endwhile

常用的幾個控制語法都在這邊了，但是筆者這邊要說明，並不是全部的語法都在這邊介紹完畢。Blade Engine 還有很多厲害的語法，各位可以去 https://laravel.com/docs/5.8/blade 研究一番，相信收穫會很豐富的。

這裏，我們學會了怎麼使用 blade 的 layout 來建立固定的樣板模式，學會了怎麼從後端傳輸資料進入畫面，還學會了怎麼使用基礎的控制語法來操作畫面。

希望各位讀者們覺得看了今天這篇文章能有收穫！我們明天見！