Blade 模板引擎中常用的指令和标签

时间：2024-10-10 08:34:15

Blade 模板引擎中常用的指令和标签，以及作用和实际使用案例：

1. @extends

  • 作用：继承一个 Blade 模板。通常用于定义一个父布局文件，其他子视图继承这个布局。
  • 示例：
<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    @yield('content')
</body>
</html>

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

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

@section('content')
    <h1>Welcome to the home page!</h1>
@endsection

2. @section 与 @yield

  • 作用：@section 用于定义子视图中的内容，@yield 用于在父模板中定义可被子模板填充的内容区域。
  • 示例：
<!-- resources/views/layouts/app.blade.php -->
<body>
    @yield('content')
</body>

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

@section('content')
    <p>This is the home page content.</p>
@endsection

3. @include

  • 作用：引入另一个视图文件。
  • 示例：
<!-- resources/views/includes/nav.blade.php -->
<nav>
    <ul>
        <li>Home</li>
        <li>About</li>
    </ul>
</nav>

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

@section('content')
    @include('includes.nav')
    <p>Welcome to the home page!</p>
@endsection

4. @if, @elseif, @else, @endif

  • 作用：条件判断。
  • 示例：
@if ($user->isAdmin())
    <p>Welcome, Admin!</p>
@elseif ($user->isMember())
    <p>Welcome, Member!</p>
@else
    <p>Welcome, Guest!</p>
@endif

5. @foreach, @for, @while, @forelse

  • 作用：循环结构，遍历数组或集合。@forelse 提供处理空数组的备用语法。
  • 示例：
@foreach ($users as $user)
    <p>{{ $user->name }}</p>
@endforeach

@forelse ($users as $user)
    <p>{{ $user->name }}</p>
@empty
    <p>No users found.</p>
@endforelse

6. {{ }} 与 {!! !!}

  • 作用：{{ }} 用于输出经过 HTML 实体转义的内容，{!! !!} 用于输出未经转义的 HTML。
  • 示例：
<p>{{ $name }}</p> <!-- 安全输出，HTML 实体被转义 -->
<p>{!! $html !!}</p> <!-- 不转义，允许输出 HTML -->

7. @csrf

  • 作用：生成 CSRF 令牌，用于防止跨站请求伪造攻击。
  • 示例：
<form action="/submit" method="POST">
    @csrf
    <input type="text" name="name">
    <button type="submit">Submit</button>
</form>

8. @auth 与 @guest

  • 作用：@auth 仅在用户已通过身份验证时显示内容，@guest 仅在用户未登录时显示内容。
  • 示例：
@auth
    <p>Welcome back, {{ auth()->user()->name }}!</p>
@endauth

@guest
    <p>Please <a href="/login">login</a>.</p>
@endguest

9. @push 与 @stack

  • 作用：@push 向特定栈中添加内容，@stack 输出栈中的内容，通常用于添加脚本或样式。
  • 示例：
<!-- 在子视图中 -->
@push('scripts')
    <script src="/example.js"></script>
@endpush

<!-- 在父模板中 -->
<body>
    <div class="content">@yield('content')</div>
    @stack('scripts')
</body>

10. @component 与 @slot

  • 作用：@component 用于定义复用组件，@slot 用于组件中的插槽。
  • 示例：
<!-- 定义组件 -->
<div class="alert alert-{{ $type }}">
    {{ $slot }}
</div>

<!-- 使用组件 -->
@component('components.alert', ['type' => 'success'])
    <strong>Success!</strong> Your action was successful.
@endcomponent

11. @includeIf, @includeWhen, @includeUnless

  • 作用：按条件引入视图。@includeIf 视图存在时才引入，@includeWhen 根据条件引入，@includeUnless 当条件不满足时引入。
  • 示例：
@includeIf('includes.nav')

@includeWhen($user->isAdmin(), 'includes.admin')

@includeUnless($user->isGuest(), 'includes.member')

12. @php

  • 作用：在 Blade 模板中编写 PHP 代码块。
  • 示例：
@php
    $message = 'Hello, World!';
@endphp

<p>{{ $message }}</p>

13. @isset 与 @empty

  • 作用：@isset 检查变量是否存在，@empty 检查变量是否为空。
  • 示例：
@isset($name)
    <p>{{ $name }}</p>
@endisset

@empty($records)
    <p>No records found.</p>
@endempty

14. @verbatim

  • 作用：在 @verbatim 区块中的内容不会被 Blade 解析，常用于包含原生 Vue.js 或其他前端框架的模板语法。
  • 示例：
@verbatim
    <div id="app">
        {{ message }}
    </div>
@endverbatim

15. @can 与 @cannot

  • 作用：@can 用于检查当前用户是否有权限执行某个操作，@cannot 检查用户是否没有权限。
  • 示例：
@can('update', $post)
    <button>Edit Post</button>
@endcan

@cannot('update', $post)
    <p>You do not have permission to edit this post.</p>
@endcannot

16. @method 与 @error

  • 作用：@method 用于在表单中伪造 HTTP 动词，@error 用于显示表单验证错误信息。
  • 示例：
<form action="/post/1" method="POST">
    @csrf
    @method('PUT')
    <input type="text" name="title" value="{{ old('title') }}">
    @error('title')
        <p>{{ $message }}</p>
    @enderror
    <button type="submit">Update</button>
</form>

17. @env

  • 作用：检查当前环境。
  • 示例：
@env('local')
    <p>You are in local environment.</p>
@endenv

18. @elseauth 与 @elseguest

  • 作用：@elseauth 在 @auth 块中表示用户未通过身份验证时的分支，@elseguest 在 @guest 块中表示用户已通过身份验证时的分支。
  • 示例：
@auth
    <p>Welcome back, {{ auth()->user()->name }}!</p>
@elseauth
    <p>You are not logged in as an authenticated user.</p>
@endauth

@guest
    <p>Welcome, Guest!</p>
@elseguest
    <p>Welcome, Authenticated User!</p>
@endguest

19. @switch, @case, @break, @default

  • 作用：实现类似 PHP 的 switch 语句。
  • 示例：
@switch($role)
    @case('admin')
        <p>Welcome, Admin!</p>
        @break

    @case('editor')
        <p>Welcome, Editor!</p>
        @break

    @default
        <p>Welcome, User!</p>
@endswitch

20. @json

  • 作用：将 PHP 数组或对象转换为 JSON 格式，并自动安全输出。
  • 示例：
<script>
    var user = @json($user);
</script>

21. @hasSection 与 @show

  • 作用：

检查某个 @section 是否存在，@show 表示立即输出指定 @section 并结束它的定义。

  • 示例：
@hasSection('sidebar')
    <div class="sidebar">
        @yield('sidebar')
    </div>
@endif

@section('sidebar')
    This is the sidebar content.
@show

相关文章