Blade 模板

简介

Blade 是 Laravel 内置的一款简洁而强大的模板引擎。不同于某些 PHP 模板引擎，Blade 不限制你在模板中使用原生 PHP 代码。所有 Blade 模板都会被编译为 PHP 代码并进行缓存，因此几乎不会给应用带来额外开销。 Blade 模板文件使用 .blade.php 扩展名，通常存放在 resources/views 目录下。

Blade 编译流程

下图展示 .blade.php 文件如何被转换为 HTML 响应。文件一旦编译就会被缓存，因此同一模板的第二次及以后的请求会跳过编译。

Route::get('/', function () {
    return view('greeting', ['name' => '太郎']);
});

显示数据

要显示传给 Blade 视图的数据，可将变量放在双大括号内。

你好，{{ $name }}。

Blade 的 {{ }} 会自动通过 PHP 的 htmlspecialchars 转义，从而防御 XSS 攻击。

除了变量，也可以显示 PHP 函数的结果。

当前 UNIX 时间戳：{{ time() }}

输出未转义数据

若要跳过转义，请使用 {!! !!} 语法。

你好，{!! $name !!}。

展示用户输入的数据时，务必使用 {{ }} 以启用自动转义。在不可信的输入上使用 {!! !!} 会带来 XSS 风险。

与 JavaScript 框架共存

如果 JavaScript 框架也使用大括号，可用 @ 让 Blade 跳过该渲染。

<h1>Laravel</h1>

你好，@{{ name }}。

此时 @ 会被 Blade 移除，{{ name }} 会原样发送到浏览器，由 JavaScript 框架渲染。

想比较是以 Blade 为主，还是拓展到 Livewire 或 Inertia，可以参阅前端。

Blade 指令

条件分支（if 语句）

@if (count($records) === 1)
    有 1 条记录。
@elseif (count($records) > 1)
    有多条记录。
@else
    没有记录。
@endif

@unless 可以表达「若非……则」的条件。

@unless (Auth::check())
    尚未登录。
@endunless

判断变量是否定义或不为 null 可以使用 @isset 和 @empty。

@isset($records)
    // $records 已定义且不为 null
@endisset

@empty($records)
    // $records 为「空」
@endempty

认证相关指令

@auth
    // 已认证用户看到的内容
@endauth

@guest
    // 未认证用户看到的内容
@endguest

Switch 语句

@switch($i)
    @case(1)
        第 1 个分支...
        @break

    @case(2)
        第 2 个分支...
        @break

    @default
        默认分支...
@endswitch

循环

Blade 提供了处理循环的便利指令。

@for ($i = 0; $i < 10; $i++)
    当前值：{{ $i }}
@endfor

@foreach ($users as $user)
    <p>用户：{{ $user->name }}</p>
@endforeach

@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>没有用户</p>
@endforelse

@while (true)
    <p>无限循环。</p>
@endwhile

在循环中可通过 @break 与 @continue 控制循环。

@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

循环变量

在 @foreach 循环中可以通过 $loop 变量获取循环信息。

@foreach ($users as $user)
    @if ($loop->first)
        这是第一次循环。
    @endif

    @if ($loop->last)
        这是最后一次循环。
    @endif

    <p>用户：{{ $user->name }}</p>
@endforeach

属性	说明
`$loop->index`	当前循环下标（从 0 开始）
`$loop->iteration`	当前循环次数（从 1 开始）
`$loop->remaining`	剩余循环次数
`$loop->count`	数组的元素数
`$loop->first`	是否为第一次
`$loop->last`	是否为最后一次
`$loop->even`	是否为偶数次
`$loop->odd`	是否为奇数次
`$loop->depth`	当前循环嵌套深度
`$loop->parent`	嵌套循环时的父循环变量

注释

Blade 注释不会包含在渲染后的页面里。

{{-- 该注释不会包含在渲染后的 HTML 中 --}}

布局

使用组件构建布局

Laravel 推荐使用 Blade 组件构建布局。首先创建一个布局组件：

<!-- resources/views/components/layout.blade.php -->
<html>
    <head>
        <title>{{ $title ?? '应用名' }}</title>
    </head>
    <body>
        <header>
            <nav>
                <!-- 导航 -->
            </nav>
        </header>

        <main>
            {{ $slot }}
        </main>
    </body>
</html>

然后创建使用该布局的视图：

<!-- resources/views/dashboard.blade.php -->
<x-layout>
    <x-slot:title>仪表盘</x-slot>

    <h1>仪表盘</h1>
    <p>欢迎！</p>
</x-layout>

使用模板继承构建布局

传统的做法是使用 @extends、@section、@yield 的模板继承。 定义父布局：

<!-- resources/views/layouts/app.blade.php -->
<html>
    <head>
        <title>应用名 - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            默认侧边栏
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

子视图继承布局：

<!-- resources/views/child.blade.php -->
@extends('layouts.app')

@section('title', '子页面')

@section('sidebar')
    @parent

    <p>追加到侧边栏的内容</p>
@endsection

@section('content')
    <p>正文内容</p>
@endsection

使用 @parent 可以在保留父布局 @section 内容的同时进行追加。

引入子视图

使用 @include 指令可以把一个 Blade 视图嵌入到另一个视图中。父视图中可用的所有变量在被引入的视图中同样可用。

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

    <form>
        <!-- 表单内容 -->
    </form>
</div>

也可以额外传入变量。

@include('view.name', ['status' => 'complete'])

表单的 CSRF 保护

在 web 路由中发送 POST、PUT、PATCH、DELETE 请求的 HTML 表单，必须包含 @csrf 指令。

<form method="POST" action="/profile">
    @csrf

    <!-- 表单字段 -->
</form>

要在表单中发送 PUT、PATCH、DELETE 请求时，请使用 @method。

<form method="POST" action="/post/1">
    @csrf
    @method('DELETE')

    <button type="submit">删除</button>
</form>

实际运维中的 CSRF 保护，包括 Origin 校验、X-CSRF-TOKEN / X-XSRF-TOKEN 头等，请参阅 CSRF 保护。

小结

以下汇总了 Blade 模板引擎的主要功能。

显示数据

使用 {{ $variable }} 输出带转义，{!! $variable !!} 输出不转义。

条件分支

@if、@elseif、@else、@endif、@unless、@isset、@empty、@auth、@guest。

循环

@for、@foreach、@forelse、@while，以及使用 $loop 变量控制。

布局

组件模式（<x-layout> 和 {{ $slot }}）或模板继承（@extends、@section、@yield）。

子视图

使用 @include 将视图作为可复用组件嵌入。

入门

基础

请求处理

数据库

认证

辅助函数与外部通信

测试与部署

AI 开发辅助

简介

Blade 编译流程

显示数据

输出未转义数据

与 JavaScript 框架共存

Blade 指令

条件分支（if 语句）

认证相关指令

Switch 语句

循环

循环变量

注释

布局

使用组件构建布局

使用模板继承构建布局

引入子视图

表单的 CSRF 保护

小结

​简介

​Blade 编译流程

​显示数据

​输出未转义数据

​与 JavaScript 框架共存

​Blade 指令

​条件分支（if 语句）

​认证相关指令

​Switch 语句

​循环

​循环变量

​注释

​布局

​使用组件构建布局

​使用模板继承构建布局

​引入子视图

​表单的 CSRF 保护

​小结

简介

Blade 编译流程

显示数据

输出未转义数据

与 JavaScript 框架共存

Blade 指令

条件分支（if 语句）

认证相关指令

Switch 语句

循环

循环变量

注释

布局

使用组件构建布局

使用模板继承构建布局

引入子视图

表单的 CSRF 保护

小结