Laravel Blade模板引擎基础

Blade 是 Laravel 框架自带的简单而强大的模板引擎。它允许在视图中使用原生 PHP 代码，并提供了许多便捷的语法特性，如模板继承、组件、控制结构等。所有 Blade 视图文件都使用 .blade.php 扩展名，并在服务器端被编译为原生 PHP 代码后缓存，直到被修改，因此性能几乎无损。

💡 提示： Blade 的主要优势在于其简洁的语法，以及自动进行 HTML 实体转义，有效防止 XSS 攻击。在 Laravel 11 中，Blade 继续保持了强大的功能和易用性。

1. 显示数据

您可以使用双花括号 {{ $variable }} 来输出变量。Blade 会自动调用 htmlspecialchars 函数转义内容，避免 XSS 攻击。如果需要输出未转义的数据（例如富文本），可以使用 {!! $variable !!}，但务必确保数据是安全的。

示例：基本变量输出


<!-- 控制器传递 $name = 'Laravel 11' -->
<h1>Hello, {{ $name }}!</h1>

<!-- 输出未转义的 HTML (谨慎使用) -->
{!! $htmlContent !!}

如果 $htmlContent 包含 <strong>文本</strong>，使用 {!! !!} 会渲染为粗体，而普通花括号则显示为 HTML 实体。

显示 JavaScript 变量

可以使用 @json 指令将 PHP 变量转换为 JavaScript 对象：


<script>
    var app = @json($userData);
    console.log(app.name);
</script>

2. 控制结构

Blade 提供了丰富的指令来简化 PHP 控制结构的书写，使模板更加清晰。

条件判断


@if ($score >= 90)
    <span class="badge bg-success">优秀</span>
@elseif ($score >= 60)
    <span class="badge bg-warning">及格</span>
@else
    <span class="badge bg-danger">不及格</span>
@endif

{{-- @unless 相当于 if (! ...) --}}
@unless ($isLoggedIn)
    <a href="/login">登录</a>
@endunless

@isset($user)
    <p>用户: {{ $user->name }}</p>
@endisset

循环结构

支持 @for, @foreach, @forelse, @while，并且 @foreach 中提供了 $loop 变量。


{{-- 基本 foreach --}}
@foreach ($users as $user)
    <div>{{ $user->name }}</div>
@endforeach

{{-- forelse 处理空集合 --}}
@forelse ($posts as $post)
    <h3>{{ $post->title }}</h3>
@empty
    <p>暂无文章。</p>
@endforelse

{{-- $loop 变量常用属性 --}}
@foreach ($tasks as $task)
    @if ($loop->first)
        <strong>第一项:</strong>
    @endif
    <div>{{ $task }} <span>索引: {{ $loop->index }}</span></div>
    @if ($loop->last)
        <hr>这是最后一项。
    @endif
@endforeach

3. 模板继承与布局

Blade 通过 @extends、@section、@yield 实现强大的模板继承，这是构建可维护视图的核心。

定义布局文件 (例如：layouts/app.blade.php)


<!-- 主布局 -->
<html>
<head>
    <title>@yield('title', '默认标题')</title>
</head>
<body>
    <div class="container">
        @yield('content')
    </div>
    <footer>@yield('footer')</footer>
</body>
</html>

子页面继承布局


@extends('layouts.app')

@section('title', '关于我们')

@section('content')
    <h1>关于页面</h1>
    <p>这里是内容区域。</p>
@endsection

@section('footer')
    <p>自定义底部信息</p>
@endsection

4. 引入子视图 (@include)

使用 @include 可以在一个视图中包含另一个视图，并可以传递数据。


{{-- 简单引入 --}}
@include('partials.header')

{{-- 传递额外数据 --}}
@include('partials.alert', ['type' => 'success', 'message' => '操作成功！'])

{{-- 如果子视图不存在，使用 @includeIf 避免报错 --}}
@includeIf('custom.view')

5. 组件与插槽

Blade 组件提供了比 @include 更强大的功能，支持类组件和匿名组件，并能通过插槽传递复杂内容。

匿名组件示例 (resources/views/components/alert.blade.php)


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

使用组件


<x-alert type="danger">
    您的账号存在异常，请及时修改密码。
</x-alert>

{{-- 带命名插槽 --}}
<x-card>
    <x-slot:title>用户信息</x-slot:title>
    <p>姓名: {{ $user->name }}</p>
</x-card>

6. 其他常用指令

指令	作用
`@csrf`	生成 CSRF 令牌隐藏域，用于表单提交。
`@method('PUT')`	生成模拟 HTTP 动词的隐藏域。
`@auth / @endauth`	检查用户是否已认证。
`@guest`	检查用户是否未认证。
`@php`	在模板中执行原生 PHP 代码 (不推荐过多使用)。
`{{-- 注释 --}}`	Blade 注释，不会出现在 HTML 源码中。

使用示例


<form method="POST" action="/profile">
    @csrf
    @method('PUT')
    <input type="text" name="name">
    <button>更新</button>
</form>

@auth
    <p>欢迎回来，{{ Auth::user()->name }}</p>
@endauth

@guest
    <a href="/login">登录</a>
@endguest

@php
    // 仅在必要时使用，业务逻辑应放在控制器
    $count = App\Models\Post::count();
@endphp
<span>总文章数：{{ $count }}</span>

7. 最佳实践与注意事项

⚠️ 注意：

避免在 Blade 中编写复杂业务逻辑，应将数据处理放在控制器或模型。
输出用户提供的内容时，优先使用 {{ }} 自动转义，确保安全。
合理使用模板继承与组件，提高代码复用性。
Laravel 11 中 Blade 支持 @vite 指令用于前端资源引入，可结合 Vite 使用。
使用 @once 指令确保某段内容在渲染周期中只被输出一次（常用于引入 CSS/JS）。

@once 示例


@once
    <!-- 仅加载一次的自定义样式 -->
    <link href="/css/custom.css" rel="stylesheet">
@endonce

📚 扩展学习： 您可以查阅 Laravel 11 官方 Blade 文档获取更完整的指令列表和高级特性（如自定义指令、Blade 编译器等）。

上一章: 数据填充与种子下一章: 模板继承与布局

Laravel教程