[ Laravel ] 初心者之路#06 – Views, Blade Templates

前言

之前在Laravel專案結構中跟各位介紹過MVC的概念,View就是在MVC中的V,負責的是網站界面的呈現,也是我們所熟知的前端。今天要來跟各位介紹的就是在Laravel中怎麼管理View,以及相當強大且實用的Blade Template

 

Laravel的Views放在哪裡?

還記得我們之前改過一個檔案叫做welcome.blade.php嗎?沒錯,在/resources/views底下,而這裡就是Laravel專門存放view資料夾

view location

 

如何召喚使用寫好的View?

還記得web.php這個route裡面寫些什麼嗎?讓我們打開它看看:

route content

有沒有看到一個方法:

view('welcome');

這個就是我們召喚view的方式!

view($view_name) 是一個全域的方法,你可以在任何地方呼叫它,它會傳回在/views下的view

$view_name 是你想要使用的view的名字,像是如果你想要使用welcome.blade.php,它的名字就會是’welcome’

 

如果今天/views底下的view開始變多,勢必需要以資料夾去進行分類、管理。讓我們來試試看建立一個資料夾,命名為frontend,並且將welcome.balde.php放入frontend之中

 

這時,如果只是直接重新整理頁面,可就會顯示找不到view的錯誤囉!這是因為當view的路徑變化時, $view_name 也必須做一些小小的改變讓我們把web.php做一些修正:

Route::get('/', function () {
    return view('frontend.welcome');
});

此時重新整理一下你的頁面,就可以看見原本的welcome畫面啦!

所以當我們改變了view的路徑時,我們就必須去根據view的路徑變更傳給view()的名稱,資料夾可用斜線/或是點.來區隔都可以,我個人覺得斜線有點不方便閱讀,所以都是採用點.的方式

view('frontend/welcome');
view('frontend.welcome');

 

傳參數給View

為了讓頁面可以動態變換一些內容,我們會傳一些變數給View讓它顯示出來,讓我們來動手試試看!

將web.php做點小修改:

Route::get('/', function () {
    return view('frontend.welcome', ['name' => '大帥哥']);
});

然後將welcome.blade.php也修改一下:

<div class="title m-b-md">
    很高興見到你,{{$name}}
</div>

重新整理頁面後是不是看到很有趣的畫面呢XD

這就是傳遞參數的有趣厲害之處,你可以根據後端的資料,動態顯示前端的頁面

讓我們仔細看看它的內容:

view($view_name, $data)

要特別注意的是, $data 必須是一個鍵值對應(key/value pairs)的陣列,一個key對應到一個value,讓你在view中可以用 {{$key}} 的方式使用,像是範例中的’name’對應到’大帥哥’,然後在view中便可用 {{$name}} 去印出’大帥哥’

 

Blade Template簡介

Blade是Laravel的樣板引擎,Blade可以讓頁面有繼承的概念,讓頁面能夠輕易地拆分成區塊(section),並且重複使用,減少一般寫前端時可能會有許多重複的內容。

舉個例子來說,讓我們看看這個網頁(這也是我們之後將採用的前端樣板)

https://blackrockdigital.github.io/startbootstrap-business-casual/

page

根據它的頁面,我們可以將它劃分出幾個區塊,Header, Navigation, Content, Footer。其中Header, Footer在每個頁面都是一樣的,Navigation會根據在哪個頁面,將那個頁面的文字Highlight,Content則是每個頁面都是不一樣的內容

 

當我們應用Blade Template之後,它可以被這樣劃分

blade template

這有點像是物件導向中繼承的概念

有一個master.blade.php,它先include header, navbar, footer,留下一個content等著被實作(@yield)

而頁面home, about, product, store去繼承master(@extends),再各自去實作出content的內容

 

如此一來,可以大幅減少重複的內容,並且各個檔案都清楚被劃分,相當方便維護

 

Blade 語法

按照上面的範例,我這邊實際寫出簡單的架構給各位看看

master.blade.php

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <title>Coffee Shop-@yield('title')</title>
</head>
<body>
    @include('frontend.layouts.header')
    @include('frontend.layouts.navbar')
    @yield('content')
    @include('frontend.layouts.footer')
</body>
</html>

 

home.blade.php

@extends('frontend.layouts.master')

@section('title', 'Home')   {{-- 因應不同頁面給予不同title --}}

@section('content')
    {{-- 這邊放Home頁面的內容 --}}
@endsection

@include($name) – 插入 $name view

@yield($name) – 等待被繼承後填入內容

@extends($name) – 繼承 $name view

@section($name) – 將內容填入 @yield($name) ,繼承的樣板中必須要有對應的yield

 

以上就是基礎的blade樣板語法,我們會在下一篇文章實際練習一次!

 

Blade控制語法

除了上述的基本語法之外,還有其他進階的語法可以使用,像是我們熟知的if判斷式、loop迴圈等等,以下就列出範例給各位參考

  • if判斷
@if (count($records) === 1)
    I have one record!
@elseif (count($records) > 1)
    I have multiple records!
@else
    I don't have any records!
@endif

 

  • switch判斷
@switch($i)
    @case(1)
        First case...
        @break

    @case(2)
        Second case...
        @break

    @default
        Default case...
@endswitch

 

 

  • Loop迴圈,有基本的for, foreach, while,還有比較特別的forelse
@for ($i = 0; $i < 10; $i++)
    The current value is {{ $i }}
@endfor

@foreach ($users as $user)
    <p>This is user {{ $user->id }}</p>
@endforeach

@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>No users</p>
@endforelse

@while (true)
    <p>I'm looping forever.</p>
@endwhile

 

  • 當然迴圈中也有continue跟break
@foreach ($users as $user)
    @continue($user->type == 1)
    <li>{{ $user->name }}</li>
    @break($user->number == 5)
@endforeach

 

總結

好的,這次的教學就到這邊結束!

讓我們複習一下今天的內容

  • view在Laravel的位置
  • 用全域方法view()呼叫view的
  • view()配合參數傳遞
  • Blade Templates介紹
  • Blade的基本語法
  • Blade的控制語法

我們下一篇將會帶各位實際操作,以Laravel的Blade Templates去製作我們這系列網站的前端。

關於Blade語法有興趣的,可以到官方文件去看看唷~

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

 

See you!

Leave a Comment