laravel 中layout模板-526互联

Blade布局是指具有多个公共部分的布局，可以在整个应用程序中使用，无需为此加载多个文件。公共区域包括页眉、页脚、侧边栏等。它包括Blade语法。
我们也使用相同的文件夹结构/resources/views来存储布局。让我们创建一个简单的基本Blade布局。在/resources/views/layouts/app.blade.php创建一个文件
app.blade.php

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the common sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

现在，让我们看看如何使用内部应用程序。创建一个文件/resources/views/about-us.blade.php。在这个视图文件中，我们需要为动态占位符扩展和添加内容。
about-us.blade.php

@extends('layouts.app')

@section('title', 'About Us')

@section('sidebar')
    @parent <!-- Includes parent sidebar -->

    <p>About us page sidebar</p>
@stop

@section('content')
    <p>This is about us content page.</p>
@stop

@extends('layouts.app') 从layouts文件夹扩展布局。
同样，我们可以创建多个应用程序视图，并根据页面放置页面内容。
在布局中包含部分文件
要包含部分文件或子视图，我们使用@include指令。该指令允许我们将子视图渲染到其他视图中。我们可以包含主Blade布局，也可以包含在任何视图文件中。
假设我们有一个名为slider.blade.php的滑块文件到/resources/views/partials/slider.blade.php文件中，该文件包含滑块的 HTML 代码。现在我们要包含到欢迎页面布局中。
关于-us.blade.php

@extends('layouts.app')

@section('title', 'About Us')

@section('sidebar')
    @parent <!-- Includes parent sidebar -->

    <p>About us page sidebar</p>
@stop

@section('content')
 
    @include('partials.slider')

    <p>This is about us content page.</p>
@stop

@include('partials.slider') 包括部分文件滑块partials 文件夹。

如何访问公共文件
所有公共可访问文件都应放在公共目录中。假设我们已经创建并存储了一些文件作为/public/assets/css/style.css和/public/assets/js/script.js。
有多种方法可以将公共资产文件附加到布局和查看文件。我们将使用其中之一作为URL::to()添加到布局中。这是来自使用 Illuminate\Support\Facades\URL Facade。
添加查看文件为 –

<link rel="stylesheet" type="text/css" href="{{ URL::to('assets/css/style.css') }}">
  
<script type="text/javascript" src="{{ URL::to('assets/js/script.js') }}"></script>

添加样式和 javascripts 以查看文件
我们正在使用@stack指令来放置诸如 javascript 和样式表文件之类的资产。这对于指定子视图和样式文件所需的任何 JavaScript 库特别有用。
layout blade文件

<html>
    <head>
        <title>App Name - @yield('title')</title>

        @stack('styles')<!-- To include style links -->
    </head>
    <body>
        @section('sidebar')
            This is the common sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>

        @stack('scripts') <!-- To include script links -->
    </body>
</html>

在任何视图文件中扩展布局。
任何视图文件可以使用

@extends('layouts.app')

@section('title', 'About Us')

@push('styles')
    <link rel="stylesheet" href="/assets/css/style.css"/>
    <style>
      /* css code */
    </style>
@endpush

@section('sidebar')
    @parent <!-- Includes parent sidebar -->

    <p>About us page sidebar</p>
@stop

@section('content')
 
    @include('partials.slider')

    <p>This is about us content page.</p>
@stop

@push('scripts')
    <script src="/assets/js/script.js"></script>
    <script>  
     // .. custom js code
    </script>
@endpush

资源文件应该放在/public/assets/css和/public/assets/js文件夹中。
我们希望本文能帮助您以非常详细的方式了解 Laravel 8 布局和视图。