iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
1
Modern Web

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

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

  • 分享至 

  • xImage
  •  

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

嗯⋯⋯

陷入沈思

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 來建立固定的樣板模式,學會了怎麼從後端傳輸資料進入畫面,還學會了怎麼使用基礎的控制語法來操作畫面。

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


上一篇
[Day 5] 猝不及防的自動測試教學!怎麼用 Laravel 撰寫自動測試
下一篇
[Day 7] 需要用到 Controller 了!淺聊一下網頁 MVC 框架的概念
系列文
Laravel 6.0 初體驗!怎麼用最新的 laravel 架網站!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ckp6250
iT邦好手 1 級 ‧ 2019-11-26 17:35:14

學而時習之,不亦樂乎。
謝謝老師。

我要留言

立即登入留言