Laravel 5框架學習之Blade 簡介

2024-05-04 23:34:01

字體：大中小

來源：轉載

供稿：網友

本文給大家帶來的是Laravel5框架學習系列文章的第4篇，主要向大家簡單介紹下Blade,為什么要介紹它呢，因為laravel的模版引擎采用了blade模版引擎，so....

在多個頁面中我們可能包含相同的內容，像是文件頭，鏈接的css或者js等。我們可以利用布局文件完成這個功能。

讓我們新建一個布局文件，例如 views/layout.blade.php

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

</head>

<body>

<div class="container">

@yield('content')

</div>

</body>

</html>

我們創建了不解的結構，引入了bootstrap，注意 @yield 是blade的布局占位符，未來我們的頁面內容將填充到這里，修改 about.blade.php

@extends('layout')

@section('content')

<h1>About {{ $first }} {{ $last }}</h1>

@stop

上面的代碼表示我們使用布局文件 layout.blade.php，然后在 content 段中添加內容。

在 routes.php 中添加：

Route::get('about', 'PagesController@about');

Route::get('contact', 'PagesController@contact');

在 PagesController.php 中添加：

public function contact() {

return view('pages.contact');

}

新建視圖 pages/contact.blade.php

@extends('layout')

@section('content')

<h1>Contact Me!</h1>

@stop

Check it out!

在布局文件中我們可以添加多個 @yield , 比如在 layout.blade.php 中添加 @yield('footer') ：

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

</head>

<body>

<div class="container">

@yield('content')

</div>

@yield('footer')

</body>

</html>

比如 contact.blade.php 中有一段腳本，就可以放在這個段中。

@extends('layout')

@section('content')

<h1>Contact Me!</h1>

@stop

@section('footer')

<script>

alert('Contact from scritp')

</script>

@stop

訪問contact會有對話框，而about仍然是普通顯示

使用 @if 進行判斷

@extends('layout')

@section('content')

@if ($first = 'Zhang')

<h1>Hello, Zhang</h1>

@else

<h1>Hello, nobody</h1>

@endif

@stop

也可以視同 @unless 等同于 if !，還有 @foreach 等。

public function about()

{

$people = [

'zhang san',

'li si',

'wang wu'

];

return view('pages.about', compact('people'));

}

@extends('layout')

@section('content')

<h1>Person:</h1>

<ul>

@foreach($people as $person)

<li>{{ $person }}</li>

@endforeach

</ul>

@stop

有一種情況，數據可能來自數據庫，集合可能是空，像是這樣：

復制代碼代碼如下:

$people = [];

處理這種情況，請添加 @if 處理

@extends('layout')

@section('content')

@if (count($people))

<h1>Person:</h1>

<ul>

@foreach($people as $person)

<li>{{ $person }}</li>

@endforeach

</ul>

@endif

<h2>Other info</h2>

@stop