发表更新软件开发 / Laravel5 分钟读完 (大约745个字)0次访问

18 视图与模板引擎之布局的使用

在上一篇文章中，我们介绍了如何在Laravel中通过视图将数据传递给前端。这次，我们将深入探讨如何使用布局来组织和管理视图，提升应用的可维护性和可读性。在Laravel中，使用视图和模板引擎的关键之一，就是充分利用布局。

什么是布局？

在Laravel中，布局（Layouts）可以被视为一个“框架”，为多个视图提供一个一致的结构。它通常用于定义网页的头部、底部、导航栏及侧边栏等通用部分，从而避免在每个视图中重复相同的代码。

使用布局的基本步骤

1. 创建布局文件

首先，在 resources/views 目录中创建一个新的布局文件，例如 app.blade.php。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <header>
        <h1>我的Laravel应用</h1>
        <!-- 这里可以放置导航栏 -->
    </header>

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

    <footer>
        <p>&copy; {{ date('Y') }} 我的Laravel应用</p>
    </footer>
</body>
</html>

2. 使用布局

接下来，我们在一个视图中使用这个布局。例如，我们可以创建一个 home.blade.php 视图文件：

1
2
3
4
5
6
7
8
9
<!-- resources/views/home.blade.php -->
@extends('layouts.app')

@section('title', '首页')

@section('content')
    <h2>欢迎来到首页</h2>
    <p>这里是一些关于Laravel的信息。</p>
@endsection

在这个例子中，我们使用了 @extends 指令来指定使用的布局文件，并通过 @section 定义了页面特定的内容。每个部分可以使用 @yield 来在布局文件中进行调用。

3. 路由设置

为了展示这个视图，我们需要设置相应的路由。在 routes/web.php 中添加：

1
2
3
4
5
use Illuminate\Support\Facades\Route;

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

4. 查看效果

现在，当我们访问应用的主页面 / 时，就会看到使用布局生成的页面。在此页面上，标题为“首页”，主内容区显示“欢迎来到首页”。

为什么使用布局？

  1. 避免代码重复：使用布局可以避免在多个视图中重复相同的HTML结构。
  2. 提高可维护性：当需要更新网站的整体设计时，只需更新布局文件，所有依赖此布局的视图都会自动更新。
  3. 提高一致性：布局提供了一个一致的结构，使得网站的各个部分看上去更加协调统一。

结论

在本篇文章中，我们学习了如何在Laravel中创建和使用布局。这一技术不仅能减少代码的重复，还能提升应用的可维护性。使用布局是Laravel视图层设计的重要组成部分。

在下一篇文章中，我们将探讨Eloquent ORM中的Eloquent模型，帮助您更有效地与数据库交互。敬请期待！

18 视图与模板引擎之布局的使用

https://zglg.work/laravel-zero/18/

作者

AI免费学习网(郭震)

发布于

2024-08-15

更新于

2024-08-16

许可协议

#

分享转发

学习下节

复习上节

交流

更多教程加公众号

更多教程加公众号

加入星球获取PDF

加入星球获取PDF

打卡评论

×