Laravel - HTML 渲染在错误的地方答案

【问题标题】：Laravel - HTML rendering in the wrong placeLaravel - HTML 渲染在错误的地方
【发布时间】：2019-06-10 11:34:29
【问题描述】：

我是 Laravel 的新手，我还不太清楚一切是如何运作的。我试图通过包含页面的开头将 appart 代码分成不同的部分，然后在该页面中创建一个 hero 部分，然后是一些 html。

一切都显示了，但页面上的 html 代码呈现在其他一切之上。

这个帖子看起来可能是事情没有被关闭，但我认为一切正常

Including header in wrong place Laravel 4

@include('blocks/scripts')

@extends('blocks/hero')

@section('title')
text here
@stop

@section('subtitle')
another text
@stop

<div class="container">
        <div class="row">
            <div class="col-12">
                   more text
            </div>
            <div class="col-6">
                <h2 class="text-center">header</h2>
                <p class="text-center">more text</p>
            </div>
            <div class="col-6">
                    <h2 class="text-center">header</h2>
                    <p class="text-center">more text</p>
            </div>
        </div>
    </div>

@include('blocks/footer')

这是文件。 HTML 块在“脚本”之后立即呈现，然后是“页脚”，然后显示“英雄”。

顺序应该是scripts->hero->html->footer

@include('blocks/scripts') just has html code
@extends('blocks/hero') has  @yield('title') and @yield('subtitle')
@include('blocks/footer') just text

【问题讨论】：

您能否在问题中添加模板blocks/scripts.blade.php 和blocks/hero.blade.php 的外观？
英雄长这样：<div class="container-fuid mx-0 wlgx_hero"> <div class="row"> <div class="col-12"> @include('blocks/header') <section id="hero_text"> <h1 class="text-center text-white py-5">@yield('title')</h1> <hr class="purple_line pb-3"> <section id="subtitle"> <p class="text-center">@yield('subtitle')</p> </section> </section> </div> </div> </div>
和脚本是这个加上一些用于引导的 cdn css 和一些字体：<!doctype html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
blocks/header 只是有一个非常标准的引导导航栏，只是 html 没有雄辩的

标签： laravel laravel-blade

【解决方案1】：

我更改了一些模板的名称，因为很难理解您在 cmets 中放置的代码。但我认为它可以帮助您组织代码。

您拥有html、head 和body 标签的模板不是要包含的模板，而是从它扩展其他模板，并使用yield。例如@yield ('main-content'):

blocks/main.blade.php：

<!doctype html> 
<html lang="{{ app()->getLocale() }}"> 
    <head> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        @yield('main-content')
    </body>
</html>

blocks/hero.blade.php
这是一个模板，您可以从主模板扩展并使用@section('main-content') 向@yield('main-content') 添加内容：

@extends('blocks/main')
@section('main-content')
<div class="container-fuid mx-0 wlgx_hero"> 
    <div class="row"> 
        <div class="col-12"> 
            @include('blocks/header') 
            <section id="hero_text"> 
                <h1 class="text-center text-white py-5">
                    @yield('title')
                </h1> 
                <hr class="purple_line pb-3"> 
                <section id="subtitle"> 
                    <p class="text-center">
                        @yield('subtitle')
                    </p> 
                </section> 
            </section> 
        </div> 
    </div> 
</div>
@yield('hero-content')
@endsection('main-content')

你问题中的刀片（我不知道名字）反过来可以从hero延伸，并填补他们的收益：

@extends('blocks/hero')

@section('title')
text here
@stop

@section('subtitle')
another text
@stop

@section('hero-content')
<div class="container">
    <div class="row">
        <div class="col-12">
            more text
        </div>
        <div class="col-6">
            <h2 class="text-center">header</h2>
            <p class="text-center">more text</p>
        </div>
        <div class="col-6">
            <h2 class="text-center">header</h2>
            <p class="text-center">more text</p>
        </div>
    </div>
</div>
@stop

最后一个是您必须从路由或控制器返回的视图，以便一切正常。

希望对你有帮助

【讨论】：

我已按照您的指示解决了我的问题。非常感谢您抽出宝贵时间，对于扩展部分和产量的工作方式确实令人困惑。

【解决方案2】：

在刀片文件中，@section('something') 之外的每个直接 HTML 都将呈现在文件顶部。

您需要将@yield('something') 放入扩展文件中，然后使用@section('something') 和@endsection('something') 包装您的HTML 代码，就像使用title 和subtitle 一样。

【讨论】：