Blade模板基础 #

Blade特点
├── 简洁语法
│   ├── {{ }} 输出
│   ├── {!! !!} 原始输出
│   └── @指令
├── 模板继承
│   ├── @extends
│   ├── @yield
│   └── @section
├── 组件系统
│   ├── 组件类
│   └── 匿名组件
└── 编译缓存
    └── 自动编译为PHP

resources/views/
├── layouts/
│   └── app.blade.php
├── components/
│   └── alert.blade.php
├── users/
│   ├── index.blade.php
│   └── show.blade.php
└── welcome.blade.php

<!-- 转义输出 -->
<p>{{ $name }}</p>

<!-- 输出HTML实体 -->
<p>{{ '<script>alert("xss")</script>' }}</p>
<!-- 输出: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt; -->

<!-- 不转义输出（注意XSS风险） -->
<p>{!! $html !!}</p>

<script>
    var user = @json($user);
</script>

<!-- 使用 or 运算符 -->
<p>{{ $name or 'Guest' }}</p>

<!-- 使用 null 合并运算符 -->
<p>{{ $name ?? 'Guest' }}</p>

<p>当前时间: {{ now() }}</p>
<p>格式化日期: {{ $user->created_at->format('Y-m-d') }}</p>
<p>大写: {{ strtoupper($name) }}</p>

<!-- if 语句 -->
@if($user)
    <p>欢迎, {{ $user->name }}</p>
@endif

<!-- if-else 语句 -->
@if($user->isAdmin())
    <p>管理员</p>
@else
    <p>普通用户</p>
@endif

<!-- elseif 语句 -->
@if($score >= 90)
    <p>优秀</p>
@elseif($score >= 60)
    <p>及格</p>
@else
    <p>不及格</p>
@endif

<!-- unless 语句（除非） -->
@unless($user->isAdmin())
    <p>您没有管理权限</p>
@endunless

<!-- isset 和 empty -->
@isset($user)
    <p>用户存在</p>
@endisset

@empty($posts)
    <p>没有文章</p>
@endempty

<!-- 检查是否登录 -->
@auth
    <p>欢迎回来!</p>
@endauth

@guest
    <p>请登录</p>
@endguest

<!-- 指定守卫 -->
@auth('admin')
    <p>管理员登录</p>
@endauth

<!-- for 循环 -->
@for($i = 0; $i < 10; $i++)
    <p>第 {{ $i }} 次</p>
@endfor

<!-- foreach 循环 -->
@foreach($users as $user)
    <p>{{ $user->name }}</p>
@endforeach

<!-- forelse 循环（带空判断） -->
@forelse($posts as $post)
    <p>{{ $post->title }}</p>
@empty
    <p>没有文章</p>
@endforelse

<!-- while 循环 -->
@while($condition)
    <p>循环内容</p>
@endwhile

@foreach($users as $user)
    <tr>
        <td>{{ $loop->index }}</td>          <!-- 索引（从0开始） -->
        <td>{{ $loop->iteration }}</td>      <!-- 迭代次数（从1开始） -->
        <td>{{ $loop->first ? '第一个' : '' }}</td>   <!-- 是否第一个 -->
        <td>{{ $loop->last ? '最后一个' : '' }}</td>  <!-- 是否最后一个 -->
        <td>{{ $loop->count }}</td>          <!-- 总数 -->
        <td>{{ $loop->remaining }}</td>      <!-- 剩余数量 -->
        <td>{{ $loop->even ? '偶数' : '奇数' }}</td>  <!-- 是否偶数索引 -->
        <td>{{ $loop->odd ? '奇数' : '偶数' }}</td>   <!-- 是否奇数索引 -->
        <td>{{ $loop->depth }}</td>          <!-- 嵌套深度 -->
        <td>{{ $user->name }}</td>
    </tr>
@endforeach

@foreach($categories as $category)
    <h2>{{ $category->name }}</h2>
    @foreach($category->posts as $post)
        <p>{{ $loop->parent->iteration }}.{{ $loop->iteration }} {{ $post->title }}</p>
    @endforeach
@endforeach

<!-- 包含子视图 -->
@include('partials.header')

<!-- 传递数据 -->
@include('partials.user-card', ['user' => $user])

<!-- 包含不存在的视图（不报错） -->
@includeIf('partials.sidebar')

<!-- 条件包含 -->
@includeWhen($showFooter, 'partials.footer')

<!-- 包含第一个存在的视图 -->
@includeFirst(['custom.header', 'partials.header'])

<!-- 渲染集合 -->
@each('partials.user-card', $users, 'user')

<!-- 带空视图 -->
@each('partials.user-card', $users, 'user', 'partials.empty')

{{-- 这是Blade注释，不会输出到HTML --}}

<!-- 这是HTML注释，会输出到页面 -->

@php
    $total = 0;
    foreach($items as $item) {
        $total += $item->price;
    }
@endphp

<p>总价: {{ $total }}</p>

@once
    <script>
        // 只执行一次的代码
    </script>
@endonce

<div @class([
    'alert',
    'alert-success' => $success,
    'alert-danger' => $error,
])>
    消息内容
</div>

<div @style([
    'color: red',
    'font-weight: bold' => $important,
])>
    文本内容
</div>

<input type="checkbox" @checked($user->active)>

<select>
    <option value="1" @selected($user->status === 1)>激活</option>
    <option value="0" @selected($user->status === 0)>禁用</option>
</select>

<button @disabled($formSubmitted)>提交</button>

<input type="text" @readonly($user->isLocked)>

<input type="text" @required($field->required)>

<script>
    var appName = '{{ config('app.name') }}';
    var userId = {{ auth()->id() ?? 'null' }};
</script>

<script>
    var user = @json($user);
    var settings = @json([
        'theme' => 'dark',
        'lang' => 'zh',
    ]);
</script>

<a href="{{ url('/') }}">首页</a>
<a href="{{ url('/users', ['id' => 1]) }}">用户</a>

<a href="{{ route('users.index') }}">用户列表</a>
<a href="{{ route('users.show', $user) }}">用户详情</a>
<a href="{{ route('users.edit', ['user' => 1, 'tab' => 'profile']) }}">编辑</a>

<a href="{{ action([UserController::class, 'index']) }}">用户列表</a>

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
<img src="{{ asset('images/logo.png') }}">

<form method="POST" action="/users">
    @csrf
    <!-- 表单字段 -->
</form>

<meta name="csrf-token" content="{{ csrf_token() }}">

<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>

<!-- 在模板中定义堆栈位置 -->
<head>
    @stack('scripts')
</head>

<!-- 向堆栈添加内容 -->
@push('scripts')
    <script src="/example.js"></script>
@endpush

<!-- 预先添加到堆栈开头 -->
@prepend('scripts')
    <script src="/important.js"></script>
@endprepend

@verbatim
    <div>
        {{ 这不会被Blade处理 }}
        {{ $variable }}
    </div>
@endverbatim

resources/views/
├── layouts/           # 布局模板
│   ├── app.blade.php
│   └── admin.blade.php
├── partials/          # 局部视图
│   ├── header.blade.php
│   ├── footer.blade.php
│   └── sidebar.blade.php
├── components/        # 组件
│   ├── alert.blade.php
│   └── card.blade.php
└── users/             # 模块视图
    ├── index.blade.php
    ├── show.blade.php
    └── form.blade.php

{{-- 不推荐：视图中写业务逻辑 --}}
@if(User::where('role', 'admin')->count() > 0)
    ...
@endif

{{-- 推荐：在控制器中处理 --}}
@if($hasAdmins)
    ...
@endif

{{-- 不推荐：重复的HTML --}}
<div class="alert alert-success">
    {{ $message }}
</div>

{{-- 推荐：使用组件 --}}
<x-alert type="success" :message="$message" />