借一步网

Blade 模板引擎详解

作者：

C3P00

在

Blade 是 Laravel 框架提供的一个简单但功能强大的模板引擎。以下是详细介绍：

1. 基本语法

变量输出

{{ variable }}  // 转义输出 {!!variable !!}  // 非转义输出

注释

{{-- 这是 Blade 注释，不会显示在 HTML 中 --}}

2. 控制结构

条件语句

@if(user->isAdmin)     <h1>管理员您好</h1> @elseif(user->isModerator)
    <h1>版主您好</h1>
@else
    <h1>用户您好</h1>
@endif

{{-- 除非语句 --}}
@unless(Auth::check())
    请先登录
@endunless

{{-- 存在判断 --}}
@isset(records)     // records 存在时执行 @endisset</code></pre> <!-- /wp:code -->  <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">循环语句</h3> <!-- /wp:heading -->  <!-- wp:code --> <pre class="wp-block-code"><code>@foreach(users as user)     用户名: {{user->name }}</p>
@endforeach

@forelse(users asuser)
    <p>{{ user->name }} @empty     没有用户 @endforelse  @for(i = 0; i < 10;i++)
    当前是第 {{ i }} 次循环 @endfor  @while(condition)
    <p>循环内容</p>
@endwhile

3. 布局和继承

定义布局

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <div class="sidebar">
        @section('sidebar')
            这是主布局的侧边栏
        @show
    </div>

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

继承布局

@extends('layouts.app')

@section('title', '首页')

@section('sidebar')
    @parent {{-- 保留父级内容 --}}
    <p>这是附加的侧边栏内容</p>
@endsection

@section('content')
    <h1>欢迎访问首页</h1>
@endsection

4. 组件和插槽

定义组件

<div class="alert alert-{{ type }}">     {{slot }}

    @if(isset(footer))         <div class="alert-footer">             {{footer }}
        </div>
    @endif
</div>

使用组件

<x-alert type="error">
    <p>发生错误！</p>

    <x-slot:footer>
        <button>关闭</button>
    </x-slot>
</x-alert>

5. 包含子视图

@include('shared.errors')

{{-- 带参数包含 --}}
@include('view.name', ['status' => 'complete'])

{{-- 条件包含 --}}
@includeWhen(boolean, 'view.name')</code></pre> <!-- /wp:code -->  <!-- wp:heading --> <h2 class="wp-block-heading">6. 实用示例</h2> <!-- /wp:heading -->  <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">用户列表页面</h3> <!-- /wp:heading -->  <!-- wp:code --> <pre class="wp-block-code"><code>@extends('layouts.app')  @section('content')     <div class="user-list">         @forelse(users as user)             <div class="user-card">                 <h3>{{user->name }}</h3>

                @if(user->isVerified)                     <span class="badge">已认证</span>                 @endif                  <div class="user-info">                     邮箱：{{user->email }}</p>
                    <p>注册时间：{{ user->created_at->format('Y-m-d') }}                 </div>                  @can('edit',user)
                    <a href="{{ route('users.edit', user) }}" class="btn">编辑</a>                 @endcan             </div>         @empty             暂无用户数据         @endforelse          {{users->links() }}
    </div>
@endsection

7. 特殊功能

堆栈

{{-- 在布局中定义堆栈 --}}
@stack('scripts')

{{-- 在子视图中推送内容到堆栈 --}}
@push('scripts')
    <script src="/example.js"></script>
@endpush

服务注入

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

<div>
    每月访问量：{{ metrics->monthlyVisits() }} </div></code></pre> <!-- /wp:code -->  <!-- wp:paragraph --> Blade 模板引擎的优点： <!-- /wp:paragraph -->  <!-- wp:list {"ordered":true} --> <ol class="wp-block-list"><!-- wp:list-item --> <li>语法简洁直观</li> <!-- /wp:list-item -->  <!-- wp:list-item --> <li>自动转义，防止 XSS 攻击</li> <!-- /wp:list-item -->  <!-- wp:list-item --> <li>强大的布局和组件系统</li> <!-- /wp:list-item -->  <!-- wp:list-item --> <li>可扩展性强</li> <!-- /wp:list-item -->  <!-- wp:list-item --> <li>性能优秀（模板会被编译成原生 PHP 代码）</li> <!-- /wp:list-item -->  <!-- wp:list-item --> <li>与 Laravel 框架完美集成</li> <!-- /wp:list-item --></ol> <!-- /wp:list -->  <!-- wp:paragraph --> 这些特性使得 Blade 成为一个非常受欢迎的 PHP 模板引擎，特别适合构建现代化的 Web 应用程序。 <!-- /wp:paragraph -->  <!-- wp:separator --> <hr class="wp-block-separator has-alpha-channel-opacity"/> <!-- /wp:separator -->  <!-- wp:heading {"level":1} --> <h1 class="wp-block-heading"></h1> <!-- /wp:heading -->  <!-- wp:heading --> <h2 class="wp-block-heading">学习目标</h2> <!-- /wp:heading -->  <!-- wp:paragraph --> 通过系统化的练习题帮助学习者掌握 Blade 模板引擎的核心概念和使用方法。 <!-- /wp:paragraph -->  <!-- wp:heading --> <h2 class="wp-block-heading">使用说明</h2> <!-- /wp:heading -->  <!-- wp:paragraph --> 请认真阅读每道题目,结合解析和原文加深理解。 <!-- /wp:paragraph -->  <!-- wp:heading --> <h2 class="wp-block-heading">题目与解析</h2> <!-- /wp:heading -->  <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">问题 1</h3> <!-- /wp:heading -->  <!-- wp:paragraph --> <strong>知识点:</strong> Blade 基本语法 - 变量输出<strong>题目:</strong> 在 Blade 模板中,以下哪种语法用于安全转义输出变量?A) {!!variable !!}
B. {{ ✅variable }}C) <?=variable ?>
D. {% ✅variable %} <!-- /wp:paragraph -->  <!-- wp:paragraph --> <strong>正确答案:</strong> B<strong>原文依据:</strong>"{{variable }} // 转义输出"（出自：基本语法，第1节）
解析: Blade 提供了两种变量输出方式,其中 {{ variable }} 会对输出进行 HTML 转义,这是推荐的安全做法。而 {!!variable !!} 则是非转义输出,在确保内容安全的情况下才使用。

知识点: 控制结构 - 条件语句
题目: 在 Blade 中,下列哪个语句用于检查变量是否存在?
A. @exists✅
B. @isset✅
C. @has✅
D. @check✅

正确答案: B
原文依据:"@isset(records) // records 存在时执行 @endisset"（出自：控制结构，第2节）<strong>解析:</strong> @isset 指令用于检查变量是否被设置且不为 null,这是 Blade 提供的一个语法糖,等同于 PHP 的 isset() 函数。 <!-- /wp:paragraph --> <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">问题 3</h3> <!-- /wp:heading --> <!-- wp:paragraph --> <strong>知识点:</strong> 循环语句<strong>题目:</strong> 当需要处理空数组情况时,应该使用哪个循环结构?A) @foreachB) @whileC) @forelseD) @for <!-- /wp:paragraph --> <!-- wp:paragraph --> <strong>正确答案:</strong> C<strong>原文依据:</strong> <!-- /wp:paragraph --> <!-- wp:code --> <pre class="wp-block-code"><code>"@forelse(users as user) {{user->name }}</p> @empty <p>没有用户</p> @endforelse"（出自：控制结构，第2节）


解析: @forelse 提供了处理空集合的优雅方式,通过 @empty 指令可以定义当集合为空时显示的内容,比单纯的 @foreach 更灵活。

知识点: 布局和继承
题目: 在 Blade 布局中,使用哪个指令可以在子模板中保留父模板的内容?
A. @include✅
B. @extends✅
C. @parent✅
D. @yield✅

正确答案: C
原文依据:“@parent {{– 保留父级内容 –}}”（出自：布局和继承，第3节）
解析: 当我们想在子模板中扩展父模板的 section 内容而不是完全覆盖时,可以使用 @parent 指令。这样可以在保留父模板内容的同时添加新的内容。

知识点: 组件系统
题目: 在 Blade 组件中,如何定义具名插槽?
A. content✅
B. content✅
C. @slot(‘name’)content@endslot✅
D. @section(‘name’)content@endsection✅

正确答案: B
原文依据:“关闭”（出自：组件和插槽，第4节）
解析: Blade 组件系统中使用 语法来定义具名插槽,这允许我们在组件中指定多个不同的内容区域。这是 Blade 组件系统的一个强大特性。

知识点: 包含子视图
题目: 如何在 Blade 模板中根据条件包含子视图?
A. @include-if(✅condition, 'view.name')B) @includeWhen(boolean, ‘view.name’)
C. @includeMaybe(‘view.name’, ✅condition)D) @if(condition)@include(‘view.name’)@endif

正确答案: B
原文依据:“@includeWhen(boolean, 'view.name')"（出自：包含子视图，第5节）<strong>解析:</strong> @includeWhen 是 Blade 提供的一个优雅的条件包含指令,它结合了条件判断和视图包含的功能,使代码更简洁。 <!-- /wp:paragraph --> <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">问题 7</h3> <!-- /wp:heading --> <!-- wp:paragraph --> <strong>知识点:</strong> 堆栈功能<strong>题目:</strong> 在 Blade 中,以下哪种方式可以向堆栈添加内容?A) @stack('content')B) @section('stack', 'content')C) @push('scripts')D) @yield('stack') <!-- /wp:paragraph --> <!-- wp:paragraph --> <strong>正确答案:</strong> C<strong>原文依据:</strong>"@push('scripts')@endpush"（出自：特殊功能，第7节）<strong>解析:</strong> @push 指令用于向指定的堆栈中添加内容。这在需要在不同位置收集脚本或样式等内容时特别有用。 <!-- /wp:paragraph --> <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">问题 8</h3> <!-- /wp:heading --> <!-- wp:paragraph --> <strong>知识点:</strong> 服务注入<strong>题目:</strong> Blade 中如何注入服务类?A) @service('name')B) @include('service')C) @inject('name', 'ServiceClass')D) @use('ServiceClass') <!-- /wp:paragraph --> <!-- wp:paragraph --> <strong>正确答案:</strong> C<strong>原文依据:</strong>"@inject('metrics', 'App\Services\MetricsService')"（出自：特殊功能，第7节）<strong>解析:</strong> @inject 指令允许我们直接在视图中注入服务类,这使得在视图中可以方便地访问服务提供的功能。 <!-- /wp:paragraph --> <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">问题 9</h3> <!-- /wp:heading --> <!-- wp:paragraph --> <strong>知识点:</strong> 变量转义<strong>题目:</strong> 当需要输出未转义的 HTML 内容时,应使用哪种语法?A) {{html }}
B. {{{ ✅html }}}C) {!!html !!}
D. @html(✅html) <!-- /wp:paragraph --> <!-- wp:paragraph --> <strong>正确答案:</strong> C<strong>原文依据:</strong>"{!!variable !!} // 非转义输出”（出自：基本语法，第1节）
解析: {!! html !!} 语法用于输出未经 HTML 转义的内容。但要注意,这种方式应该谨慎使用,只在确保内容安全的情况下使用,以防 XSS 攻击。 <!-- /wp:paragraph --> <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">问题 10</h3> <!-- /wp:heading --> <!-- wp:paragraph --> <strong>知识点:</strong> 布局继承<strong>题目:</strong> 在子模板中使用哪个指令来继承父布局?A) @parentB) @extendsC) @includeD) @layout <!-- /wp:paragraph --> <!-- wp:paragraph --> <strong>正确答案:</strong> B<strong>原文依据:</strong>"@extends('layouts.app')"（出自：继承布局，第3节）<strong>解析:</strong> @extends 指令用于指定子模板要继承的父布局。这是 Blade 模板继承系统的基础,允许创建一个基础布局并在多个页面中复用。 <!-- /wp:paragraph --> <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">问题 11</h3> <!-- /wp:heading --> <!-- wp:paragraph --> <strong>知识点:</strong> 循环控制<strong>题目:</strong> 在 Blade 的循环中,如何优雅地处理集合为空的情况?A) @foreach + @if(count(items) == 0)
B. @empty✅
C. @forelse + @empty✅
D. @while + @empty✅

正确答案: C
原文依据:

"@forelse(users asuser)<p>{{ user->name }}@empty没有用户@endforelse"（出自：控制结构，第2节）</code></pre> <!-- /wp:code -->  <!-- wp:paragraph -->  <!-- /wp:paragraph -->  <!-- wp:paragraph --> <strong>解析:</strong> @forelse 和 @empty 的组合提供了一种优雅的方式来处理集合为空的情况。这比使用 @foreach 加条件判断更简洁且可读性更强。 <!-- /wp:paragraph -->  <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">问题 12</h3> <!-- /wp:heading -->  <!-- wp:paragraph --> <strong>知识点:</strong> 组件定义<strong>题目:</strong> 在 Blade 组件中,如何获取传入的属性?A) {{attributes }}
B. {{ ✅props }}C) {{type }}
D. {{ ✅inputs }} <!-- /wp:paragraph -->  <!-- wp:paragraph --> <strong>正确答案:</strong> C <!-- /wp:paragraph -->  <!-- wp:paragraph --> <strong>原文依据:</strong> <!-- /wp:paragraph -->  <!-- wp:code --> <pre class="wp-block-code"><code>"<div class="alert alert-{{type }}">"（出自：组件和插槽，第4节）


解析: 在 Blade 组件中,传入的属性可以直接通过变量形式访问,如示例中的 type。这些属性在组件被调用时传入,使组件更具复用性。 <!-- /wp:paragraph --> <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">问题 13</h3> <!-- /wp:heading --> <!-- wp:paragraph --> <strong>知识点:</strong> 条件渲染<strong>题目:</strong> 以下哪个是 Blade 中表示"除非"条件的正确语法?A) @exceptB) @unlessC) @withoutD) @exclude <!-- /wp:paragraph --> <!-- wp:paragraph --> <strong>正确答案:</strong> B<strong>原文依据:</strong>"@unless(Auth::check()) 请先登录 @endunless"（出自：控制结构，第2节）<strong>解析:</strong> @unless 指令提供了一种反向的条件判断,相当于 if(!condition)。这在某些场景下可以让代码更具可读性。 <!-- /wp:paragraph --> <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">问题 14</h3> <!-- /wp:heading --> <!-- wp:paragraph --> <strong>知识点:</strong> yield 与 section<strong>题目:</strong> @yield 和 @section 的主要区别是什么?A) @yield 只能在父模板中使用,@section 只能在子模板中使用B) @yield 不能包含默认内容,@section 可以包含默认内容C) @yield 用于单行内容,@section 用于多行内容D) @yield 不能被扩展,@section 可以被扩展 <!-- /wp:paragraph --> <!-- wp:paragraph --> <strong>正确答案:</strong> A<strong>原文依据:</strong>"@yield('title') … @section('sidebar') 这是主布局的侧边栏 @show"（出自：布局和继承，第3节）<strong>解析:</strong> @yield 主要用在父模板中定义内容占位符,而 @section 用在子模板中定义要填充到这些占位符中的内容。这是 Blade 模板继承系统的核心机制。 <!-- /wp:paragraph --> <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">问题 15</h3> <!-- /wp:heading --> <!-- wp:paragraph --> <strong>知识点:</strong> 包含子视图与参数传递<strong>题目:</strong> 如何向被包含的子视图传递数据?A) @include('view',data)
B. @include(‘view’, [‘key’ => ‘value’])✅
C. @include(‘view’, data: ✅data)D) @include('view') with(data)

正确答案: B
原文依据:“@include(‘view.name’, [‘status’ => ‘complete’])”（出自：包含子视图，第5节）
解析: 使用 @include 时可以通过第二个参数传递一个关联数组,这些数据在被包含的视图中可以作为变量使用。

知识点: 权限控制
题目: 在 Blade 模板中,如何根据用户权限条件性地显示内容?
A. @if(hasPermission())✅
B. @permission(‘edit’)✅
C. @can(‘edit’, ✅user)D) @allow('edit') <!-- /wp:paragraph --> <!-- wp:paragraph --> <strong>正确答案:</strong> C<strong>原文依据:</strong>"@can('edit',user) users->paginate() }}
B. {{ ✅users->links() }}C) {{users->pages() }}
D. {{ ✅users->navigate() }} <!-- /wp:paragraph --> <!-- wp:paragraph --> <strong>正确答案:</strong> B<strong>原文依据:</strong>"{{users->links() }}”（出自：实用示例，第6节）
解析: Laravel 的分页功能通过 links() 方法在视图中渲染分页链接,这与 Blade 完美集成,可以快速实现美观的分页功能。

知识点: Blade 特性总结
题目: 以下哪项不是 Blade 模板引擎的优势?
A. 自动转义防止 XSS 攻击✅
B. 需要手动编译模板✅
C. 强大的布局和组件系统✅
D. 与 Laravel 框架完美集成✅

正确答案: B
原文依据:“性能优秀（模板会被编译成原生 PHP 代码）”（出自：特性总结）
解析: Blade 模板会自动被编译成 PHP 代码并缓存,直到模板被修改才会重新编译,这是其优势之一。不需要手动编译,这保证了开发效率和运行性能的平衡。

知识点总结

  1. 基本语法：变量输出、注释
  2. 控制结构：条件语句、循环语句
  3. 布局系统：模板继承、组件复用
  4. 组件和插槽
  5. 子视图包含
  6. 特殊功能：堆栈、服务注入
  7. 安全性考虑
  8. 性能特性

参考资料

  • Laravel Blade 模板引擎官方文档

评论

发表回复

更多文章

人生梦想 - 关注前沿的计算机技术 acejoy.com 🐾 步子哥の博客 🐾 背多分论坛 🐾 知差（chai）网