close

构建布局 Laravel- 创建灵活且可维护的界面

在 中 Laravel，布局在构建 Web 应用程序的用户界面中起着重要作用。 布局表示网页的整体结构，包括 header、 footer  和 等常见部分 sidebar。 在本文中，我们将探讨如何构建布局以 Laravel 创建灵活且可维护的界面。

首先，让我们为我们的网站创建一个基本布局。 首先创建一个 app.blade.php 在 目录中命名的文件。 该文件将作为整个网站的主要布局。 resources/views/layouts

以下是该文件的示例内容 app.blade.php： 

<!DOCTYPE html>  
<html>  
<head>  
    <title>@yield('title')</title>  
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">  
</head>  
<body>  
    <header>  
        <h1>Header</h1>  
    </header>  
  
    <nav>  
        <ul>  
            <li><a href="/">Home</a></li>  
            <li><a href="/about">About</a></li>  
            <li><a href="/contact">Contact</a></li>  
        </ul>  
    </nav>  
  
    <main>  
        @yield('content')  
    </main>  
  
    <footer>  
        <p>Footer</p>  
    </footer>  
  
    <script src="{{ asset('js/app.js') }}"></script>  
</body>  
</html>

在此布局中，我们使用 @yield 指令来定义布局内的动态部分。 例如， @yield('title') 允许孩子 覆盖并设置页面标题。 同样， 允许子元素 插入页面的主要内容。 views @yield('content') views

创建布局后，我们可以创建 使用此布局的子级。 例如，要创建具有类似布局的页面，请 在目录中 创建名为 的文件 。 该文件将扩展  布局并定义页面的特定内容 ： views about about.blade.php resources/views app.blade.php about 

@extends('layouts.app')  
  
@section('title', 'About')  
  
@section('content')  
    <h2>About Page</h2>  
    <p>This is the about us page.</p>  
@endsection

在上面的例子中，我们使用 @extends 指令来继承 app.blade.php  布局。 接下来，我们使用指令来定义  页面的  和部分 @section 的具体内容。 title content

最后，我们需要定义将 URL 链接到相应. views

例如，在该 routes/web.php  文件中，您可以添加以下路由： 

Route::get('/', function() {  
    return view('welcome');  
});  
  
Route::get('/about', function() {  
    return view('about');  
});

在此示例中，“/”URL 链接到 welcome.blade.php view，而 /about URL 链接到 about.blade.php view.

总之，构建布局 Laravel 允许您为 Web 应用程序创建共享界面并管理常见部分，例如 header、 footer 和 sidebar。 通过使用布局和子元素 ，您可以在. views Laravel