Laravel Blade带参数@section布局异常：内容位置错误排查

我有两个Blade模板文件：home.blade.php和customers.blade.php，需求是从Customer模型获取数据，生成包含20行数据的HTML表格，并且表格要嵌套在指定的div结构中。

使用无参数的@yield('content')配合@section('content')...@endsection时，表格内容能正确嵌套到目标div里；但改用带参数的@section('content', $pageNumber)（此时需要移除@endsection）时，表格的HTML内容会被渲染到页面顶部，导致浏览器解析后div结构顺序错乱。

代码示例 #

home.blade.php #

<?php
    $pageNumber = 1;
?>

<div
    class="body_right-wrapper_content-viewer"
    style="
        flex: 1;
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
        border-radius: 21px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    "
>
    @yield('content',$pageNumber)
</div>

customers.blade.php #

<?php
    $pageNumber = 1;
?>

@extends('home')
@section('content',$pageNumber)
    <div
        class="content_table-wrapper"
        style="
            width: 100%;
            height: 100%;
            min-width: 1000px;
            min-height: 600px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 10px 10px 10px 10px;
        "
    >
        <table></table>
    </div>

Blade的@section('name', $value)语法是直接将指定区块的内容设置为$value的字符串值，而非定义一个包含后续HTML内容的区块。当你在@section('content',$pageNumber)之后写HTML代码时，这些代码不属于任何@section区块，会被Blade优先输出在父模板内容的前面，最终导致结构错乱。

而无参数的@section('content')...@endsection是正确定义区块内容的方式，Blade会把包裹的HTML内容替换到父模板的@yield('content')位置。

如果你需要传递$pageNumber参数并正常渲染HTML区块，有两种可行方案：

方案1：使用标准@section语法，复用父模板变量 #

父模板中定义的$pageNumber可以直接在子模板的@section区块中使用，无需在子模板重新定义：

修改后的customers.blade.php #

@extends('home')

@section('content')
    <div
        class="content_table-wrapper"
        style="
            width: 100%;
            height: 100%;
            min-width: 1000px;
            min-height: 600px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 10px 10px 10px 10px;
        "
    >
        <table>
            {{-- 循环生成20行客户数据 --}}
            @for ($i = 1; $i <= 20; $i++)
                <tr>
                    <td>{{ $pageNumber }}</td>
                    <td>{{ \App\Models\Customer::inRandomOrder()->first()->name ?? '示例客户' }}</td>
                    {{-- 按需添加其他字段 --}}
                </tr>
            @endfor
        </table>
    </div>
@endsection

方案2：控制器传参（更规范的实现） #

不在模板内直接定义$pageNumber，而是在控制器返回视图时传递参数，同时直接获取客户数据：

控制器代码示例 #

public function customers()
{
    $pageNumber = 1;
    // 获取20条客户数据
    $customers = \App\Models\Customer::limit(20)->get();
    
    return view('customers', compact('pageNumber', 'customers'));
}

修改后的home.blade.php #

<div
    class="body_right-wrapper_content-viewer"
    style="
        flex: 1;
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
        border-radius: 21px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    "
>
    @yield('content')
</div>

修改后的customers.blade.php #

@extends('home')

@section('content')
    <div
        class="content_table-wrapper"
        style="
            width: 100%;
            height: 100%;
            min-width: 1000px;
            min-height: 600px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 10px 10px 10px 10px;
        "
    >
        <table>
            <thead>
                <tr>
                    <th>页码</th>
                    <th>客户名称</th>
                    {{-- 按需添加其他表头 --}}
                </tr>
            </thead>
            <tbody>
                @foreach ($customers as $customer)
                    <tr>
                        <td>{{ $pageNumber }}</td>
                        <td>{{ $customer->name }}</td>
                        {{-- 按需添加其他客户字段 --}}
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection

• @yield('content', $default)的作用是：当子模板未定义@section('content')时，显示$default作为默认内容；如果子模板定义了该区块，会替换成区块内容。
• 不要混用@section('name', $value)和后续的HTML内容，这种写法仅适用于给区块设置简单的字符串默认值，而非包含复杂HTML的区块。

内容的提问来源于stack exchange，提问作者Hacker Rhino