Blade 模板
Blade 模板引擎
简介
Blade 是 Laravel 提供的一个简单而又强大的模板引擎。和其他流行的 PHP 模板引擎不同,Blade 并不限制你在视图中使用原生 PHP 代码。所有 Blade 视图文件都将被编译成原生的 PHP 代码并缓存起来,除非它被修改,否则不会重新编译,这就意味着 Blade 基本上不会给你的应用增加任何负担。Blade 视图文件使用 .blade.php
作为文件扩展名,被存放在 resources/views
目录。
模板继承
定义布局
Blade 的两个主要优点是 模板继承 和 区块 。为方便入门,让我们先通过一个简单的例子来上手。首先,我们来研究一个「主」页面布局。因为大多数 web 应用会在不同的页面中使用相同的布局方式,因此可以很方便地定义单个 Blade 布局视图:
<!-- 保存在 resources/views/layouts/app.blade.php 文件中 -->
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content')
</div>
</body>
</html>
如你所见,该文件包含了典型的 HTML 语法。不过,请注意 @section
和 @yield
指令。 @section
指令定义了视图的一部分内容,而 @yield
指令是用来显示指定部分的内容。
现在,我们已经定义好了这个应用程序的布局,接下来,我们定义一个继承此布局的子页面。
继承布局
当定义子视图时,你可以使用 Blade 提供的 @extends
命令来为子视图指定应该 「继承」 的布局。 继承 Blade 布局的视图可使用 @section
命令将内容注入于布局的 @section
中。而「主」布局中使用 @yield
的地方会显示这些子视图中的 @section
间的内容:
<!-- 文件保存于 resources/views/child.blade.php -->
@extends('layouts.app')
@section('title', 'Page Title')
@section('sidebar')
@parent
<p>这将追加到主布局的侧边栏。</p>
@endsection
@section('content')
<p>这是主体内容。</p>
@endsection
在上面的例子里,@section
中的 sidebar
使用 @parent
命令在「主」布局的 @section('sidebar')
中增加内容(不是覆盖)。渲染视图时,@parent
指令会被替换为「主」布局中 @section('sidebar')
间的内容。
{tip} 与上一个示例相反,此侧边栏部分以
@endsection
而不是@show
结尾。@endsection
指令只定义一个区块,而@show
则是定义并立即生成该区块。
你也可以通过在路由中使用全局辅助函数 view
来返回 Blade 视图:
Route::get('blade', function () {
return view('child');
});
Components & Slots
Components 和 slots 类似于布局中的 @section
,但其使用方式更容易被人理解。首先,假设我们有一个能在整个应用中被重复使用的「警告」组件:
<!-- /resources/views/alert.blade.php -->
<div class="alert alert-danger">
{{ $slot }}
</div>
{{ $slot }}
变量将包含我们希望注入到组件的内容。然后,我们可以使用 Blade 命令 @component
来构建这个组件:
@component('alert')
<strong>Whoops!</strong> Something went wrong!
@endcomponent
有时为组件定义多个 slots 是很有帮助的。现在我们要对「警报」组件进行修改,让它可以注入「标题」。通过简单地「打印」匹配其名称的变量来显示被命名的 @slot
之间的内容:
<!-- /resources/views/alert.blade.php -->
<div class="alert alert-danger">
<div class="alert-title">{{ $title }}</div>
{{ $slot }}
</div>
现在,我们可以使用 @slot
指令注入内容到已命名的 slot 中,任何没有被 @slot
指令包裹住的内容将传递给组件中的 $slot
变量:
@component('alert')
@slot('title')
Forbidden
@endslot
You are not allowed to access this resource!
@endcomponent
向组件传递数据
需要向组件传递数据的时候,可以给 @component
指令的第二个参数传入一个数组。数组中的数据将在组件模版以变量的形式生效:
@component('alert', ['foo' => 'bar'])
...
@endcomponent
组件别名
子目录中的 Blade 组件,使用别名访问更方便。现在假设有一个 Blade 组件存储在 resources/views/components/alert.blade.php
,可以使用 component
方法给它起个 alert
的别名。通常,在 AppServiceProvider
的 boot
方法中完成这个操作:
use Illuminate\Support\Facades\Blade;
Blade::component('components.alert', 'alert');
组件定义好别名后,使用指令渲染:
@alert(['type' => 'danger'])
You are not allowed to access this resource!
@endalert
也可以不传参数:
@alert
You are not allowed to access this resource!
@endalert
显示数据
传入 Blade 视图的数据,通过双花括号包裹来显示。例如,给出如下路由:
Route::get('greeting', function () {
return view('welcome', ['name' => 'Samantha']);
});
应该这样显示 name
变量的内容:
Hello, {{ $name }}.
当然,不限于显示传入视图的变量内容,还可以输出 PHP 函数结果。实际上,可以在 Blade echo 语句里放置任何 PHP 代码:
The current UNIX timestamp is {{ time() }}.
{tip} Blade
{{ }}
语句会自动调用 PHP 的htmlspecialchars
函数防止 XSS 攻击。
显示未转义数据
默认情况下,Blade {{ }}
语句会自动调用 PHP 的 htmlspecialchars
函数防止 XSS 攻击。不想转义的话,可以使用以下语法:
Hello, {!! $name !!}.
{note} 输出用户提供的数据时,千万要小心。对用户提供的数据,总是要使用双花括号进行显示,防止 XSS 攻击。
渲染 JSON
有时,为了初始化 JavaScript 变量,需要将传入视图的数组进行 JSON 化。例如:
<script>
var app = <?php echo json_encode($array); ?>;
</script>
然而,可以用 @json
Blade 指令替代手动 json_encode
:
<script>
var app = @json($array);
</script>
HTML 实体转换
默认情况下, Blade (和 Laravel 的辅助函数 e
) 会将 HTML 全部转换。要关闭全部转换,可以在 AppServiceProvider
的 boot
方法里调用 Blade::withoutDoubleEncoding
:
<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Blade::withoutDoubleEncoding();
}
}
Blade & JavaScript 框架
由于许多 JavaScript 框架都使用花括号来表示给定的表达式应用在浏览器中显示,你可以使用 @
符号来告知 Blade 渲染引擎你需要保留这个表达式的原始形态。例如:
<h1>Laravel</h1>
Hello, @{{ name }}.
在这个例子中, @
符号最终将会被 Blade 引擎删除;达到不受 Blade 模版引擎影响的目的, 最终 {{ name }}
表达式会保持不变使得 JavaScript 框架可以使用它。
@verbatim
指令
在页面中如果你需要大部分内容展现 JavaScript 变量,你可以使用 @verbatim
指令来包裹 HTML 内容,这样你就不必在每个 Blade 打印语句前加上 @
符号:
@verbatim
<div class="container">
Hello, {{ name }}.
</div>
@endverbatim
结构控制
除了模板继承和显示数据之外, Blade 还提供了常见的 PHP 结构控制语句,比如表达式和循环语句。这些语句与 PHP 语句相似,与其一样清晰简明。
If 语法
你可以使用 @if
、 @elseif
、 @else
和 @endif
指令来构 if
表达式。这些命令的功能等同于 PHP 中的语法:
@if (count($records) === 1)
我有一个记录!
@elseif (count($records) > 1)
我有多个记录!
@else
我没有任何记录!
@endif
为了方便, Blade 还提供了一个 @unless
指令:
@unless (Auth::check())
您还没有登录。
@endunless
除了上述的条件指令之外, @isset
和 @empty
指令也可以视为与 PHP 函数有相同的功能:
@isset($records)
// $records 被定义且不为空...
@endisset
@empty($records)
// $records 是 "empty" 的...
@endempty
身份验证快捷方式
@auth
和 @guest
指令可以用来快速确定当前用户是否已通过身份验证,是否为访客:
@auth
// 用户已通过身份验证...
@endauth
@guest
// 用户没有通过身份验证...
@endguest
如果需要,你可以使用 @auth
和 @guest
指令检查验证 authentication guard :
@auth('admin')
// 用户已通过身份验证...
@endauth
@guest('admin')
// 用户未经过身份验证...
@endguest
部分指令
你可以使用 @hasSection
指令检测某个部分是否包含内容:
@hasSection('navigation')
<div class="pull-right">
@yield('navigation')
</div>
<div class="clearfix"></div>
@endif
Switch 语句
Switch 语句可以通过 @switch
, @case
,@break
, @default
以及 @endswitch
指令来进行构造。
@switch($i)
@case(1)
First case...
@break
@case(2)
Second case...
@break
@default
Default case...
@endswitch
循环
除了条件表达式外,Blade 也支持 PHP 的循环结构。同样,以下这些指令中的每一个都与其 PHP 对应的函数相同:
@for ($i = 0; $i < 10; $i++)
The current value is {{ $i }}
@endfor
@foreach ($users as $user)
<p>This is user {{ $user->id }}</p>
@endforeach
@forelse ($users as $user)
<li>{{ $user->name }}</li>
@empty
<p>No users</p>
@endforelse
@while (true)
<p>I'm looping forever.</p>
@endwhile
{tip} 循环时,你可以使用 循环变量 来获取循环的相关信息,例如判定你是在循环的首次或者末次迭代中。
使用循环时,你也可以结束循环或跳过当前迭代:
@foreach ($users as $user)
@if ($user->type == 1)
@continue
@endif
<li>{{ $user->name }}</li>
@if ($user->number == 5)
@break
@endif
@endforeach
你也可使用单行指令来包含指令声明条件:
@foreach ($users as $user)
@continue($user->type == 1)
<li>{{ $user->name }}</li>
@break($user->number == 5)
@endforeach
循环变量
循环时,可以在循环内使用 $loop
变量。这个变量可以提供一些有用的信息,比如当前循环的索引,当前循环是否为首次迭代,抑或当前循环是否为末次迭代:
@foreach ($users as $user)
@if ($loop->first)
This is the first iteration.
@endif
@if ($loop->last)
This is the last iteration.
@endif
<p>This is user {{ $user->id }}</p>
@endforeach
在一个嵌套的循环中,可以通过使用 $loop
变量的parent
属性来获取父循环中的 $loop
变量:
@foreach ($users as $user)
@foreach ($user->posts as $post)
@if ($loop->parent->first)
This is first iteration of the parent loop.
@endif
@endforeach
@endforeach
$loop
变量也包含了其它各种有用的属性:
属性 | 描述 |
---|---|
$loop->index |
当前循环迭代的索引(从0开始)。 |
$loop->iteration |
当前循环迭代 (从1开始)。 |
$loop->remaining |
循环中剩余迭代数量。 |
$loop->count |
迭代中的数组元素总数。 |
$loop->first |
当前迭代是否为循环中的首次迭代。 |
$loop->last |
当前迭代是否为循环中的末次迭代。 |
$loop->depth |
当前循环的嵌套深度级别。 |
$loop->parent |
在嵌套循环中,父循环的 loop 变量。 |
注释
Blade 也能在视图中定义注释。但是,和 HTML 的注释不同的是,Blade 注释不会被包含在应用程序返回的 HTML 内:
{{-- This comment will not be present in the rendered HTML --}}
PHP
在某些情况下,将 PHP 代码嵌入到视图中很有用。你可以使用 Blade 的 @php
指令在模板中执行一段纯 PHP 代码:
@php
//
@endphp
{tip} 虽然 Blade 提供了这个功能,但频繁地使用意味着你的模版中嵌入了太多的逻辑。
引入子视图
Blade的@include
指令允许你从另一个视图中引入 Blade 视图。所有在父视图的可用变量在被引入的视图中都是可用的。
<div>
@include('shared.errors')
<form>
<!--表单内容 -->
</form>
</div>
被引入的视图会继承父视图中的所有数据,同时也可以向引入的视图传递额外的数组数据:
@include('view.name', ['some' => 'data'])
当然,如果尝试使用 @include
去引入一个不存在的视图,Laravel 会抛出一个错误。如果想引入一个不能确定存在与否的视图,你应当使用 @includeIf 指令:
@includeIf('view.name', ['some' => 'data'])
如果想根据给定的布尔条件来 @include
一个视图,你可以使用 @includeWhen
指令:
@includeWhen($boolean, 'view.name', ['some' => 'data'])
如果想引入给定视图数组中的第一个视图,你可以使用 includeFirst
指令:
@includeFirst(['custom.admin', 'admin'], ['some' => 'data'])
{note} 应当尽量避免在 Blade 视图中使用
__DIR__
和__FILE__
之类的魔术常量,因它们会引用缓存编译的视图路径。
为集合渲染视图
你可以使用 Blade 的 @each
命令将循环及引入写成一行代码:
@each('view.name', $jobs, 'job')
第一个参数是对数组或集合中的每个元素进行渲染的部分视图。第二个参数是要迭代的数组或集合,而第三个参数是将被分配给视图中当前迭代的变量名称。举个例子,如果你要迭代一个jobs
数组,通常会使用子视图中的变量 job
来获取每个job
。当前迭代的 key 将作为子视图中的 key
变量。
你可以在 @each
指令中传入第四个参数。当需要迭代的数组为空时,将会使用这个参数提供的视图来渲染。
@each('view.name', $jobs, 'job', 'view.empty')
{note}通过
@each
渲染的视图不会从父视图继承变量。 如果子视图需要这些变量,则应该使用@foreach
和@include
。
堆栈
Blade 允许你将数据压入命名堆栈中,这些堆栈可以在其他视图或者布局中再进行渲染。这在子视图中指定所需的 JavaScript 库时非常有用:
@push('scripts')
<script src="/example.js"></script>
@endpush
你可以按需多次压栈,通过 @stack
命令中传递堆栈的名称来渲染完整的堆栈内容:
<head>
<!-- 头部内容 -->
@stack('scripts')
</head>
如果想将内容放置在栈顶,你应当使用 @prepend
指令:
@push('scripts')
这里将会排在第二……
@endpush
// 然后……
@prepend('scripts')
此处将会排在第一
@endprepend
服务注入
@inject
指令可从 Laravel 服务容器 中检索服务。 @inject
指令的第一个参数用于存放服务名称,第二个参数则为需要解析的类或者接口名称:
@inject('metrics', 'App\Services\MetricsService')
<div>
Monthly Revenue: {{ $metrics->monthlyRevenue() }}.
</div>
拓展 Blade
Blade 甚至允许你使用 directive
方法来自定义指令。当 Blade 编译器遇到自定义指令时,它将使用指令包含的表达式调用提供的回调。
以下示例创建一个 @datetime($var)
伪指令,该伪指令格式化给定的 DateTime
实例 $var
:
<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* 执行注册后引导服务。
*
* @return void
*/
public function boot()
{
Blade::directive('datetime', function ($expression) {
return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
});
}
/**
* 在容器中注册绑定。
*
* @return void
*/
public function register()
{
//
}
}
如你所见,我们可以链式调用在指令中传递的任何表达式的 format
方法。所以,在这个例子里,该指令最终生成了以下 PHP 代码:
<?php echo ($var)->format('m/d/Y H:i'); ?>
{note} 更新 Blade 指令的逻辑后,你需要删除所有已缓存的 Blade 视图。使用 Artisan 指令
view:clear
来清除被缓存的视图。
自定义 If 语句
编写自定义指令有时候比定义简单、常见的条件语句更复杂,但是它非常必要。因此,Blade 提供了一个 Blade::if
方法,它能使用闭包来快速定义自定义条件指令。例如,定义一个自定义条件来检查当前的应用程序环境。我们可以在 AppServiceProvider
的 boot
方法中这样做:
use Illuminate\Support\Facades\Blade;
/**
* 执行服务的注册后引导。
*
* @return void
*/
public function boot()
{
Blade::if('env', function ($environment) {
return app()->environment($environment);
});
}
一旦你定义了自定义条件之后,就可以很轻松地在模板中使用它:
@env('local')
// 该应用在本地环境中...
@elseenv('testing')
// 该应用在测试环境中...
@else
// 该应用不在本地或测试环境中...
@endenv