Zi 字媒體
2017-07-25T20:27:27+00:00
Laravel Views and Blade
PHP:7.2
Laravel:5.7
View 是在 Laravel 中是扮演 顯示層 的角色,負責將你顯示與邏輯拆開,讓 Controller 只留有需求邏輯。View 的內容通常都是 HTML ,檔案存放在 resources/views 底下;不過,通常顯示層不單單只有包含固定的顯示,可能會有一些顯示邏輯需要處理,這時候就必須透過 Blade 的語法協助處理。
Blade 是一個功能很完整的 template engine ,View 可以透過 Blade 的語法進行一些顯示邏輯的操作,例如:變數代入、判斷式等等。所有的 Blade Views 都會被編譯成 PHP 的程式碼並做 cache(storage/framework/views),直到它們被改動為止。Blade Views 的副檔名是以 .blade.php 為命名。
Basic View
View 的使用很簡單,只要在 resources/views 的目錄裡建立檔案,再從 Controller 或 Route 裡使用 view() method 就可以呼叫了。
resources/views/test.blade.php
TEST
This is a test
Controller
namespace App\Http\Controllers;
class TestController extends Controller
{
public function test()
{
// view() 代入參數為檔名的 prefix,路徑預設是從 resources/views 開始
return view('test');
}
}
Blade
利用 Blade 語法進行基本顯示邏輯的處理。
resources/views/pages/test.blade.php
{{-- Blade 的註解,不會被 include 進 HTML 中 --}}
{{-- 利用 {{ }} 語法代入變數 --}}
Hello, I am {{ $name }}
{{-- Blade If Statements --}}
{{-- @if、@elseif、@else、@endif --}}
@if ('Man' === $gender)
Man
@else
Woman
@endif
{{-- Blade Loops --}}
Which one do you like
@foreach ($items as $item)
{{ $item }}
@endforeach
Current Value
@for ($i = 0; $i < 10; $i++)
The current value is {{ $i }}
@endfor
Controller
public function test()
{
// view 的目錄選擇以 dot 為分格符號
// 代入 view 要使用到的變數
return view('pages.test', [
'name' => 'JohnsonLu',
'gender' => 'Man',
'items' => ['Milk', 'Tea']
]);
}
Layouts
網頁在設計上一定會有一個主要的樣板(Layouts),各個頁面都會在這個樣板之下做資料的呈現,樣板為了可以 reuse ,開發者習慣把樣板抽離出來成為獨立的檔案,再由各頁面去引用。而 Blade 當然也有提供這樣子的功能。
resources/views/layouts/app.blade.php
App Name - @yield('title')
@section('page-name')
This page is:
@show
@yield('content')
resources/views/test.blade.php
{{-- 繼承 layouts.app --}}
@extends('layouts.app')
{{-- 定義 title section 的 value --}}
@section('title', 'Test Page')
{{-- 搭配 @parent 指令繼承 layouts 的 page-name section,並繼續顯示內容 --}}
@section('page-name')
@parent
Index Page
@endsection
{{-- 定義 content section 的內容 --}}
@section('content')
This is my body content.
@endsection
{{-- 透過 @include 指令引用其他的 section --}}
{{-- resources/views/include/example.blade.php --}}
@include('include.example')
接著介紹一下以上範例中使用到的 Balde @yield、@section 指令。@yield 負責顯示 section 內容,@section 負責定義要顯示的內容。
Notice:Section 中 @endsection 和 @show 的差異分別是:@endsection 區塊單純只是定義內容,如果 @yield 沒有使用到該 Section,就不會顯示。@show 結尾的 Section 作用跟 @yield 很類似,會直接顯示區塊中的內容,差別在於它可以從一樣的 Section name 搭配 @parent 繼承顯示不同的內容。
Blade 與 JavaScript Frameworks
許多 JavaScript Frameworks 的顯示語法也是以 {{}}(curly braces)為主,但這樣一來,HTML 中會分不清是 Blade 還是 JavaScript Framework 的語法,因此 Blade 提供了跳脫字符 @ 解決這個問題。
Laravel
{{-- 利用 @ 跳脫,Blade 並不會處理這段,而是直接完整顯示 {{ name }} 在 HTML 中 --}}
Hello, @{{ name }}.
Categories: Laravel
Tags: LaravelPHP
分類
Android
AngularJS
Chrome
Database
MySQL
DataStructure
Editor
Vim
Firefox
Git
Hadoop
Language
Go
Java
JavaScript
jQuery
jQueryChart
Node.js
Vue
PHP
Laravel
ZendFramework
Python
Mac
Network
Cisco
DLink
Juniper
Oauth
Server
Apache
Share
Unix
FreeBSD
Linux
WebDesign
Bootstrap
CSS
HTML
Wordpress
Search
搜尋:
寫了
5860316篇文章,獲得
23313次喜歡