Laravel Blade嵌套布局内容被替换问题求助

你的核心问题是所有层级的布局都复用了同一个content区块名，导致子视图的content直接覆盖了父布局的content区块。要实现子内容嵌入父容器内部，需要在嵌套层级中使用不同的区块名称，让父布局的容器区块里专门预留子内容的渲染位置。

简化示例修正方案 #

先把你的简化示例改对，理解逻辑后再套用到实际项目：

1. layouts/b.blade.php（基础布局） #

保留最顶层的content区块：

<!DOCTYPE html>
<html>
<head>
    <title>基础布局</title>
</head>
<body>
    @yield('content')
</body>
</html>

2. layouts/a.blade.php（中间布局） #

继承基础布局后，在自己的content区块里定义容器，并使用新的区块名（比如page_content）预留子内容位置：

@extends('layouts.b')

@section('content')
    <div class="a-container">
        a blade
        <!-- 这里用新的区块名，让子视图填充内容 -->
        @yield('page_content')
    </div>
@endsection

3. login.blade.php（子视图） #

继承中间布局，只填充page_content区块，而不是覆盖父级的content：

@extends('layouts.a')

@section('page_content')
    login blade
@endsection

此时访问login页面会显示：a blade login blade，符合预期。

实际项目场景修正方案 #

按照层级递进的思路，给每一层嵌套分配独立的区块名：

1. layouts/base_layout.blade.php（最基础HTML布局） #

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title')</title>
    <!-- 引入CSS/JS等基础资源 -->
</head>
<body>
    @yield('content')
</body>
</html>

2. layouts/no_nav.blade.php（无导航布局） #

继承基础布局，定义无导航的外层结构，预留page_content区块：

@extends('layouts.base_layout')

@section('content')
    <div class="no-nav-wrapper">
        @yield('page_content')
    </div>
@endsection

3. layouts/fullscreen_page.blade.php（全屏居中布局） #

继承无导航布局，定义全屏容器，再预留专门的登录内容区块（比如login_content）：

@extends('layouts.no_nav')

@section('page_content')
    <!-- 全屏居中容器 -->
    <div class="fullscreen-container d-flex justify-content-center align-items-center min-vh-100">
        @yield('login_content')
    </div>
@endsection

4. login.blade.php（登录子视图） #

继承全屏布局，只填充login_content区块：

@extends('layouts.fullscreen_page')

@section('title', '登录')

@section('login_content')
    <!-- 登录表单 -->
    <form method="POST" action="{{ route('login') }}">
        @csrf
        <div class="mb-3">
            <label for="email" class="form-label">邮箱</label>
            <input type="email" class="form-control" id="email" name="email" required>
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">密码</label>
            <input type="password" class="form-control" id="password" name="password" required>
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
    </form>
@endsection

为什么@parent不符合需求？ #

@parent的作用是把子视图内容追加到父区块内容之后，而不是嵌入到父区块的指定位置。比如你之前用@parent，会先渲染全屏容器，再渲染登录表单，而不是把表单放在容器内部。只有通过分层定义不同的区块名，才能精准控制子内容的嵌入位置。

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