Blade 模板引擎

Laravel 中文文档 · 2019-01-15 12:13:03

简介

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

点击查看所有 Laravel 中文文档 文章: https://www.codercto.com/courses/l/3.html

查看所有标签

码农书籍
Clean Architecture

Clean Architecture

Robert C. Martin / Prentice Hall / 2017-9-20 / USD 34.99

Practical Software Architecture Solutions from the Legendary Robert C. Martin (“Uncle Bob”) By applying universal rules of software architecture, you can dramatically improve developer producti......一起来看看 《Clean Architecture》 这本书的介绍吧!

码农工具
JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • Tips
    \documentclass{article}
 
\begin{document}
    Hello, World!
     
\end{document}
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3