壹、View觀念:
一、larvel 是以MVC為基底設計的框架,所有的View都放在
resources/views資料夾底下
二、所有View的檔名都以*.php為結尾,檔案內容就是一般的HTML程式碼
三、當要顯示對應的頁面時,只要透過View()這個helper function 就可以將內容從Router回傳
至使用者端。特別注意路徑要設定正確,中間資料夾可用[.]區隔,且不需要加副檔名 php
語法:Route::get('
{uri}',function(){ return view('
{path.view_file_name}');});
例子:// routes/web.php
Route::get('/',function(){ return
view('home.index')});
四、若有分類需求,可任意開子資料夾整理
例子://resources/views/home/index.php
<!doctype html>
<html>
<head><!-- 略 --></head>
<body>
<h1>Home</h1>
</body>
</html>
貳、Blade樣板引擎
一、觀念:
laravel 的樣板引擎名為 Blade,只要將原本放在 resources/views 底下的*.php的檔名改成
*.blade.php.畫面輸出時,laravel自動就會使用Blade語法分析器來處理這些檔案的內容.
二、規劃流程:
(一).先定義主Layout:
1.在 resources/views 建立一個 layouts/master.blade.php
2.主Layout 裡定義全站樣板的結構,以及要讓子Layout繼承填充的區塊位置
{{-- resources/views/layouts/master.blade.php --}}
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@include('layouts.partials.navigation')
<div>
@yield('content')
</div>
</body>
</html>
(二).定義共用區塊的內容:
1.在resources/views/layouts 底下新增資料夾partials,裡面新增navigation.blade.php,並
填入導覽列內容
{{-- resources/views/layouts/partials/navigation.blade.php --}}
<nav>
<div>
<ul>
<li>
<a href="{{ route('layouts.master') }}">關於本站</a>
</li>
<li>
<a href="{{ route('layouts.partials.navigation') }}">文章總覽</a>
</li>
<li>
<a href="{{ route('layouts.partials.notification') }}">熱門文章</a>
</li>
</ul>
</div>
</nav>
(三).定義子Layout裡使用主Layout做延伸:
1.在resources/views裡新增 *.blade.php
2.子Layout要先宣告繼承的主Layout,並將要填充的區塊內容複寫進去
@extends('layouts.master')
@section('title','Page Title')
@section('content')
<p>This is my body content.</p>
@endsection
三、寫在routes/web.php的內容為
Route::get('/', ['as'=>'layouts.master',function () {
return view('layouts.master');
}]);
Route::get('/partials/navigtion', ['as'=>'layouts.partials.navigation',function () {
return view('layouts.partials.navigation');
}]);
Route::get('/partials/notification', ['as'=>'layouts.partials.notification',function () {
return view('test');
}]);
四、顯示內容為
五、Blade 語法
(一) @ 開頭:
1.樣板控制
@yield、
@extends
@yield('{section name}')
@include('{view name}')
@extends('{view name}')
@section('{yield name}','{string}')
@section('{yield name}')
@endsection
2.程式邏輯控制
@if、
@foreach
(1)邏輯控制
@if 、@elseif 、@else、 @endif
(2)迴圈
@for($i=0;$i<10;$i++)、@endfor
@foreach(@posts as $post)、@endforeach
@forelse(@posts as $post)、@empty、@endforelse
(二) { 開頭:
1.輸出內容
{{、
{!!
(1).
{{ $string }} 輸出前會做跳脫,安全預設 {{ $name or 'Default' }}
(2).
{!! $html
!!} 輸出不會做跳脫,可用於印出HTML
(3)萬一真的要顯示 {{ 的時候怎麼辦?用
@{{ raw data }}
2.註解
{{--
(三) 命名慣例
慣例僅供參考,Laravel 沒有強制規定要怎麼用,只要符合Laravel原生設定就可以了
1.主樣板放在 layouts 資料夾內
2.區塊樣板放在 partials 資料夾內
3.子樣板放在 {resources} 資料夾內
六、傳遞資料至View顯示
把變數傳給View,讓View顯示動態資料
// routes/web.php
Route::get('/',function(){
$data = [ 'name' => 'Simon' ];
return view('home.index', $data );
});
// resources/views/home/index.blade.php
<!doctype html>
<html>
<head><!-- 略 --></head>
<body>
<h1>My name is {{ $name }} </h1>
</body>
</html>
最後結果
參、樣板製作和抽離
一、調整views結構與命名
參考資料來源:
1.View 與 Blade 樣板引擎