前言
本篇為Laravel 的學習筆記，主要紀錄 Laravel blade 的用法，重點如下：
- 建立並重複使用
template - 使用
yield及section - 將值傳到
view - {{ }} 幫我們做了什麼？
建立 template
- 建立
template，名為layout，如下<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
// 使用 yield 設定 title 的範圍，並將 Laracasts 設為預設值，若在頁面中沒有特別指定 title 的值時，會自訂套用預設
<title>@yield('title', 'Laracasts')</title>
</head>
<body>
<ul>
<li><a href="/">Welcome</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">contact</a></li>
</ul>
// 使用 yield 設定區塊的範圍，範圍名稱為 content
@yield('content')
</body>
</html>
使用 section
上面已經建立好了
template，所以我們可以在新的頁面直接套用template// 下面我們直接套用名為 layout 的 template
@extends('layout')
// 使用 section ， 在 template 中已經設定好的區塊，插入我們想要的元素。在 title 區塊插入新的值
@section('title', 'Welcome Page')
// 使用 section ， 在 content 區塊插入值
@section('content')
<h1>Welcome here</h1>
// 使用 endsection 來明確範圍
@endsection
重複上面的操作，在多個新頁面上套用
template
將值傳到 view
- 要將值帶到
view其實也很多種做法，以下列舉四種
1.
Route::get('/', function () { |
2.
Route::get('/', function () { |
Route::get('/', function () { |
Route::get('/', function () { |
以上四種做法， Ray 比較常用第一種。
在 view 接值
在
view把剛剛傳過來的值取出，並顯示@extends('layout')
@section('title', 'Welcome Page')
@section('content')
<h1>Welcome here</h1>
<ul>
@foreach ($tasks as $task)
<li>
{{ $task }}
</li>
@endforeach
</ul>
@endsection在
Laravel的blade檔案中，可以在 {{ }} 中使用變數畫面如下：
blade {{ }} 幫我們做了什麼？
- {{ }} 除了可讓我們取得傳過來的變數之外，還自動執行了 `PHP`的 function `htmlspecialchars` ，防止有心人 `XSS` 攻擊。
- 做個實驗，使用
blade:Route::get('/', function () {
$test = '<script>alert("test")</script>';
return view('welcome')->withTasks([
'Go to the school',
'Go to the market',
'Go to work'
])->withTest($test);
});@extends('layout')
@section('title', 'Welcome Page')
@section('content')
<h1>{{ $test }}</h1>
<ul>
@foreach ($tasks as $task)
<li>
{{ $task }}
</li>
@endforeach
</ul>
@endsection
如上面的 code ，我們傳了有著 script tag 的 變數過去
經由瀏覽器渲染出來後，如下：
- 再做個實驗，我們可以使用
{!! !!}來取消htmlspecialchars，慎用！@extends('layout')
@section('title', 'Welcome Page')
@section('content')
<h1>{!! $test !!}</h1>
<ul>
@foreach ($tasks as $task)
<li>
{{ $task }}
</li>
@endforeach
</ul>
@endsection
瀏覽器渲染出來後，如下：
可以看到，該 script 真的被執行了
總結
有關於blade的應用還有很多，之後會繼續更新。
留言