元素在laravel中的网页上以相反的顺序显示

在 laravel/resources/view/layout文件夹中,我有header.blade.php和footer.blade.php。


我在/resources/view名为page1.blade.php.


第1页是 @extends('layout.haeder') @extends('layout.footer')


当我看到http://127.0.0.1:8000/page1


问题是所有元素都以相反的顺序显示。从上到下显示;首先显示页脚,然后是页眉。我该怎么办?


资源/视图/第1页


@extends('layout.header')

@extends('layout.footer')

路线/网络


Route::get('/page1', function () {

    return view('page1');

});


GCT1015
浏览 168回答 1
1回答

慕的地10843

在里面/resources/view/layout创建一个新的刀片文件,例如名为main.blade.php. 这是你的布局。取决于您的需要,它应该是这样的:<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Example</title></head><body>@include('partials.header')@yield('content')</body></html>在main.blade.php我们使用的内部@include(partials.header),它基本上是一个刀片文件所在,/resources/view/partials它是一个部分文件,因此您可以多次使用它(例如在另一个布局中)它可以包含这样的东西(或任何你想要的东西):<nav>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="/">Nav 1</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="/">Nav 2</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="/">Nav 3</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul></nav>在你page1.blade.php可以扩展(使用)您构建的布局,并添加它独特的内容(这是更换部件@yield('content')的main.blade.php布局),因此,它可以是这样的:@extends('layout.main')@section('content)<h1>Hello World</h1><p>this is page content ... </p>@endsection最后,当您在浏览器中输入page1 时,Laravel 会为您呈现一个包含以下内容的页面:<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Example</title></head><body><nav>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="/">Nav 1</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="/">Nav 2</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="/">Nav 3</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul></nav><h1>Hello World</h1><p>this is page content ... </p></body></html>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript