# Blade Templates in Laravel
###### tags: `MCL` `web`
Reference
~ 1. [[1072-會議記錄] Router, View, Controller](https://docs.mcl.math.ncu.edu.tw/books/weekly-meeting/page/week-6-laravel)
2. [[Laravel 5.8] Blade Templates](https://laravel.com/docs/5.8/blade)
本週要討論的主題是 Laravel 中的樣板系統，這個系統可以將一個前端網頁 (針對 HTML 的部分) 組織化，實際意義在於降低 HTML 的重複性，並且可以在多頁面的網站上有相對高的開發品質。
這週實現的 Flow 為 **Routes → View**
## Route for View Flow
```php
// routes/web.php
Route::get('page1', function () {
return view('pages.onepage'); // . 為資料夾層級的概念, 最後一個單字是檔案
});
```
## Blade Templates
> 在開始之前，你可以先在 `resources\views` 下新增三個資料夾：`layouts`, `includes`, `pages`
> ```
> resources\views
> ├── includes
> ├── layouts
> └── pages
> ```
* 檔案放在 `resources\views` 之下，可以自由新增資料夾
* 編譯完的檔案在 `storage\framework\views` (因此需要 `storage` 下的寫入權限)
* HTML 為本體，並且加上 Laravel 的附加功能
* 副檔名為 `.blade.php`
> 我們今天的目標是將一個網頁組織化，這時候我們使用別人寫好的版型做為範例：
> ```
> cd public
> wget http://140.115.26.51:3080/create.zip
> unzip create.zip
> cd create
> cp index.html ../../resources/views/pages/onepage.blade.php
> cp -r css fonts images js scss ../ # public
> chmod -R 777 ..
> ```
接著開始思考我們要如何支解這個 HTML 檔！
### `@include`
有些檔案可能是固定結構的 (比如說 `<head>` 裡面的東西)，這時候我們會希望把這些拉出去成為獨立的檔案，然後再藉由某種形式引進。
這時候你會需要使用 `@include`：
```php
{{-- resources/views/includes/head.blade.php --}}
<title>Create — Onepage Website Template by Colorlib</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
...
```
```php
{{-- resources/views/pages/onepage.blade.php --}}
<!DOCTYPE html>
<html lang="en">
<head>
@include('includes.head')
</head>
<body>
...
</body>
</html>
```
這時候可以重新回去頁面，檢視一下內容是否如剛剛一致。
> 同理，你也可以把 HTML 後段引入 JS 的區段改成上述的形式，Give it a try!
> 建議檔名：`resources/views/includes/scripts.blade.php`
### `@extends`, `@yield`, `@section`
接著你可以檢視一下主頁面，你會發覺網頁中會有一些部分屬於該頁的主要內容，而剩下的部分會在其他頁面上也是相同的呈現。這個時候我們會希望**在多頁面中都使用同樣的樣板，唯讀特定部分需要額外填入。**
這時候你會使用 `@extends` 繼承某個樣板；`@yield` 宣告哪個地方需要填入；`@section` 內放入想要填寫的內容：
```php
{{-- resources/views/layouts/default.blade.php --}}
<!DOCTYPE html>
<html lang="en">
<head>
@include('includes.head')
</head>
<body>
<div class="site-wrap">
...
@yield('content') {{-- 名稱自訂 --}}
...
{{-- @include('includes.footer') --}}
</div>
@include('includes.scripts')
</body>
</html>
```
```php
{{-- resources/views/pages/onepage.blade.php --}}
@extends('layouts.default')
@section('content')
...
@endsection
```
同樣地，再回去檢視一下頁面看看內容是否正常。
### 變數
* 變數可能會從 Controller 來，以我們目前的話是從 Route 提供
```php
Route::get('test{number}', function ($number) {
return view('pages.test', ['number' => $number]);
});
```
並且在 View 當中可以透過下者填塞進 HTML 當中：
```php
{{-- resources/views/pages/test.blade.php --}}
{{ $number }}
```
### `@if`, `@elseif`, `@else`, `@endif`, etc.
* 功能跟你想的一樣，他可以判斷一些變數的條件去做事情
* 更多用法：https://laravel.com/docs/5.8/blade
```php
{{-- resources/views/pages/test.blade.php --}}
@if($number > 1)
<p>
more than one
</p>
@elseif($number < 1)
<p>
less than one
</p>
@else
<p>
equal to one
</p>
@endif
```