我尝试在其他布局中使用多个布局，但它们的内容被替换了？

问题描述 投票：0回答：1

TL；博士 布局：

views
-login.blade.php
-layouts
 -a.blade.php
 -b.blade.php

登录.blade.php

@extends('layouts.a')

@section('content')
    login blade
@endsection

a.blade.php

@extends('layouts.b')

@section('content')
    a blade
    @yield('content')
@endsection

b.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    b blade
    @yield('content')
</body>
</html>

如果您打开相应的 URL，您将看到以下内容：

b blade login blade

因此 

a blade
˛ 被 
login blade
取代。

TS;博士 我有这样的布局：

views
- login.blade.php
-layouts>
 -base_layout.blade.php
 -fullscreen_page.blade.php
 -no_nav.blade.php

看起来像这样：

登录

@extends('layouts.fullscreen_page')

@section('content')
    <div class="shadow rounded-2 p-4 m-4 bg-white" style="min-width: 20vw; max-width: 90vw;">
        <div class="text-center">
            <h2>Login</h2>
            <p class="text-muted">Welcome to the website.</p>
        </div>
        <div class="form-floating mb-3">
            <input type="email" name="email" id="email" class="form-control is-invalid" autocomplete="off"
                placeholder="E-mail">
            <label for="email">E-mail</label>
        </div>

        <div class="form-floating mb-3">
            <input type="password" name="password" id="password" class="form-control is-invalid" placeholder="Password">
            <label for="password">Password</label>
        </div>

        <input type="submit" value="Login" class="btn btn-primary col-sm col-12">
    </div>
    <p class="text-muted">Copyright &copy; 2023</p>
@endsection

全屏

@extends('layouts.no_nav_layout')

@section('content')
    <div class="d-flex flex-column justify-content-center align-items-center"
        style="min-height: 100vh; background-color: #F6F9FF;">
        @yield('content')
    </div>
@endsection

无导航

@extends('layouts.base_layout')

@section('content')
    @yield('content')
@endsection

基本布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>@yield('title')</title>
    @vite(['resources\css\app.css', 'resources\js\app.js'])
</head>

<body>
    @yield('content')
</body>

</html>

但是，如果我按照粘贴代码的方式进行操作，

fullscreen_page
的内容将被登录内容替换。

我查看了 

@parent
指令，但该指令将登录内容放置在全屏内容的下方，我想将其放在里面，而不是在其下方。

我有什么遗漏的吗？

laravel laravel-blade laravel-10
1个回答
0
投票

问题的原因是您在嵌套布局中使用 

@yield
指令。为了实现您想要的效果（登录内容位于 fullscreen_page 内容内），您应该将 
@parent
指令与 
@section
指令结合使用。在您的代码中进行以下更改： fullscreen_page.blade.php：

@extends('layouts.no_nav_layout')

@section('content')
    <div class="d-flex flex-column justify-content-center align-items-center"
        style="min-height: 100vh; background-color: #F6F9FF;">
        @parent
    </div>
@endsection

no_nav.blade.php：

@extends('layouts.base_layout')

@section('content')
    @parent
@endsection
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.