Blade 模板

简介

Blade 是 Laravel 提供的一个既简单又强大的模板引擎。和其他流行的 PHP 模板引擎不一样,Blade 并不限制你在视图(view)中使用原生 PHP 代码。所有 Blade 视图页面都将被编译成原生 PHP 代码并缓存起来,除非你的模板文件被修改了,否则不会重新编译,这就意味着 Blade 基本上不会给你的应用增加任何额外负担。Blade 视图文件使用 .blade.php 文件扩展名,并且一般被存放在 resources/views 目录。

模板继承

定义一个页面布局模板

使用 Blade 能获得的两个主要好处是 模板继承(template inheritance)视图片断(sections)。我们先通过一个简单的实例认识一下 Blade 模板吧。首先,我们先来看一下命名为 "master" 的页面布局模板。由于大部分网站应用都会在页面之间共享某些相同的布局,所以将这个页面布局定义在一个单独的 Blade 模板中更便于使用。

<!-- Stored in resources/views/layouts/master.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 指令正像其名字所暗示的一样是用来定义一个视图片断(section)的;@yield 指令是用来展示某个指定 section 所代表的内容的。

好了,我们已经定义了一个页面布局模板了,接下来我们定义一个继承页面布局模板的子页面模板。

扩展一个页面布局模板

定义子页面时,你需要使用 Blade 提供的 @extends 指令来为子页面指定其所“继承”的页面布局模板。Views which @extends a Blade layout may inject content into the layout's sections using @section directives. Remember, as seen in the example above, the contents of these sections will be displayed in the layout using @yield:

<!-- Stored in resources/views/child.blade.php -->

@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
    @@parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection

在上面的实例中,sidebar section is utilizing the @@parent directive to append (rather than overwriting) content to the layout's sidebar. The @@parent directive will be replaced by the content of the layout when the view is rendered.

Of course, just like plain PHP views, Blade views may be returned from routes using the global view helper function:

Route::get('blade', function () {
    return view('child');
});

展示数据

You may display data passed to your Blade views by wrapping the variable in "curly" braces. For example, given the following route:

Route::get('greeting', function () {
    return view('welcome', ['name' => 'Samantha']);
});

你可以像下面这样展示 name 变量所代表的内容:

Hello, {{ $name }}.

当然,你不仅仅被局限于展示传递给视图的变量,你还可以展示 PHP 函数的返回值。事实上,你可以在 Blade 模板的双花括号表达式中调用任何 PHP 代码:

The current UNIX timestamp is {{ time() }}.

注意: Blade 中的 {{ }} 表达式的返回值将被自动传递给 PHP 的 htmlentities 函数进行处理,以防止 XSS 攻击。

Blade & JavaScript 框架

由于很多 JavaScript 框架也使用 "花括号" 来表示一个需要在浏览器端解析的表达式,因此,你可以通过使用 @ 符号来告知 Blade 模板引擎保持后面的表达式原样输出。如下所示:

<h1>Laravel</h1>

Hello, @{{ name }}.

在上述实例中,@ 符号将被 Blade 移除,同时,{{ name }} 表达式将被原样输出,这就能够确保在浏览器端被你的 JavaScript 框架解释了。

如果数据存在就将其输出

某些时候你需要输出变量的值,但是在输出前你并不知道这个变量是否被赋值了。我们将这个问题化作代码描述如下:

{{ isset($name) ? $name : 'Default' }}

不过,上面的表达式的确很繁复,幸好 Blade 提供了如下的速记方式:

{{ $name or 'Default' }}

在这个实例中,如果 $name 变量被赋了值,它的值将被输出出来。然而,如果没有被赋值,将输出默认的单词 Default

展示未转义的数据

默认情况下,Blade 的 {{ }} 表达式会自动通过 PHP 的 htmlentities 函数进行处理,以防止 XSS 攻击。如果你不希望自己的数据被转义,请使用如下语法:

Hello, {!! $name !!}.

注意: 务必要对用户上传的数据小心处理。最好对内容中的所有 HTML 使用双花括号进行输出,这样就能转义内容中的任何 HTML 标签了。

Control Structures

In addition to template inheritance and displaying data, Blade also provides convenient short-cuts for common PHP control structures, such as conditional statements and loops. These short-cuts provide a very clean, terse way of working with PHP control structures, while also remaining familiar to their PHP counterparts.

If 表达式

通过 @if@elseif@else@endif 指令可以创建 if 表达式。这些指令其实都有相对应的 PHP 表达式:

@if (count($records) === 1)
    I have one record!
@elseif (count($records) > 1)
    I have multiple records!
@else
    I don't have any records!
@endif

为了使用方面,Blade 还提供了 @unless 指令:

@unless (Auth::check())
    You are not signed in.
@endunless

循环

除了状态表达式,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

引入子视图

Blade 提供的 @include 指令允许你方便地在一个视图中引入另一个视图。所有父视图中可用的变量也都可以在被引入的子视图中使用。

<div>
    @include('shared.errors')

    <form>
        <!-- Form Contents -->
    </form>
</div>

虽然被引入的子视图能够访问父视图的所有可用数据,但是,你还可以向被引入的子视图传递额外的数据:

@include('view.name', ['some' => 'data'])

Note: You should avoid using the __DIR__ and __FILE__ constants in your Blade views, since they will refer to the location of the cached view.

Rendering Views For Collections

You may combine loops and includes into one line with Blade's @each directive:

@each('view.name', $jobs, 'job')

The first argument is the view partial to render for each element in the array or collection. The second argument is the array or collection you wish to iterate over, while the third argument is the variable name that will be assigned to the current iteration within the view. So, for example, if you are iterating over an array of jobs, typically you will want to access each job as a job variable within your view partial.

You may also pass a fourth argument to the @each directive. This argument determines the view that will be rendered if the given array is empty.

@each('view.name', $jobs, 'job', 'view.empty')

注释

Blade 还允许你在视图中添加注释。然而,和 HTML 注释不同的是,Blade 注释不会出现在最终生成的 HTML 中。

{{-- This comment will not be present in the rendered HTML --}}

Service Injection

The @inject directive may be used to retrieve a service from the Laravel service container. The first argument passed to @inject is the name of the variable the service will be placed into, while the second argument is the class / interface name of the service you wish to resolve:

@inject('metrics', 'App\Services\MetricsService')

<div>
    Monthly Revenue: {{ $metrics->monthlyRevenue() }}.
</div>

扩展 Blade

Blade even allows you to define your own custom directives. You can use the directive method to register a directive. When the Blade compiler encounters the directive, it calls the provided callback with its parameter.

下面这个实例将创建一个 @datetime($var) 指令,用于格式化 $var 参数:

<?php

namespace App\Providers;

use Blade;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Perform post-registration booting of services.
     *
     * @return void
     */
    public function boot()
    {
        Blade::directive('datetime', function($expression) {
            return "<?php echo with{$expression}->format('m/d/Y H:i'); ?>";
        });
    }

    /**
     * Register bindings in the container.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

As you can see, Laravel's with helper function was used in this directive. The with helper simply returns the object / value it is given, allowing for convenient method chaining. The final PHP generated by this directive will be:

<?php echo with($var)->format('m/d/Y H:i'); ?>