![[ Laravel ] 初心者之路#06 – Views, Blade Templates](https://dometi.com.tw/blog/wp-content/themes/anima/resources/images/headers/laptop.jpg)
撰寫![[ Laravel ] 初心者之路#06 – Views, Blade Templates](https://dometi.com.tw/blog/wp-content/uploads/2018/01/back-end.png)
前言
之前在Laravel專案結構中跟各位介紹過MVC的概念，View就是在MVC中的V，負責的是網站界面的呈現，也是我們所熟知的前端。今天要來跟各位介紹的就是在Laravel中怎麼管理View，以及相當強大且實用的Blade Template
Laravel的Views放在哪裡？
還記得我們之前改過一個檔案叫做welcome.blade.php嗎？沒錯，在/resources/views底下，而這裡就是Laravel專門存放view資料夾
如何召喚使用寫好的View？
還記得web.php這個route裡面寫些什麼嗎？讓我們打開它看看:
有沒有看到一個方法:
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/
根據它的頁面，我們可以將它劃分出幾個區塊，Header, Navigation, Content, Footer。其中Header, Footer在每個頁面都是一樣的，Navigation會根據在哪個頁面，將那個頁面的文字Highlight，Content則是每個頁面都是不一樣的內容
當我們應用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!