Laravel 实现公共页面加载：视图布局技术详解

gitbox 2025-06-18

Laravel 在 Views 中加载公共页面的实现方法

Laravel 是一款功能强大的 PHP 框架，提供了便捷的方式来加载和管理公共页面。在项目开发过程中，通常会有多个视图需要共享相同的头部和尾部内容。为了避免在每个视图中重复编写这些内容，Laravel 提供了布局视图（Layout View）技术，允许我们将公共的头部和尾部代码集中到一个布局文件中，其他视图通过继承这个布局文件来实现代码复用。

下面，我们将介绍如何使用 Laravel 的布局视图技术来实现公共页面的加载。

步骤1：创建公共布局文件

首先，在 `resources/views/layouts` 文件夹中创建一个名为 `app.blade.php` 的布局文件。这个文件将作为我们所有视图共享的公共布局文件。在布局文件中，我们将定义公共的头部和尾部 HTML 代码，并使用 `@yield` 指令为页面的特定区域预留内容。


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <!-- 公共头部内容 -->
    </header>
    @yield('content')
</main>

<footer>
    <!-- 公共尾部内容 -->
</footer>

在这个布局文件中，我们使用了 `@yield('title')` 和 `@yield('content')` 指令，分别为页面的标题和内容区域预留了空间。接下来，我们将在视图文件中使用这些占位符。

步骤2：创建视图文件并继承布局

接下来，我们在 `resources/views` 文件夹中创建一个新的视图文件，例如 `home.blade.php`，并在其中继承我们刚刚创建的公共布局文件。


@extends('layouts.app')
<p>@section('title', '首页')</p>
<p>@section('content')<br>
<h1>欢迎来到我的主页！</h1><br>
<p>这里是我的个人博客，欢迎来访！</p><br>
@endsection<br>

在这个视图文件中，我们通过 `@extends('layouts.app')` 指令继承了 `app.blade.php` 布局文件，并通过 `@section('title', '首页')` 指令填充了 `@yield('title')` 预留的空间。接着，我们使用 `@section('content')` 指令填充了 `@yield('content')` 预留的内容区域。

步骤3：生成最终 HTML 内容

当 Laravel 渲染这个视图文件时，它会自动将填充的内容插入到公共布局文件的相应位置，最终生成的 HTML 内容如下：


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <header>
        <!-- 公共头部内容 -->
    </header>
    <h1>欢迎来到我的主页！</h1>
    <p>这里是我的个人博客，欢迎来访！</p>
</main>

<footer>
    <!-- 公共尾部内容 -->
</footer>

小结

通过 Laravel 的布局视图技术，我们可以有效地避免在多个视图中重复编写公共的头部和尾部代码。通过创建一个公共布局文件并在视图中使用 `@extends` 和 `@section` 指令，我们能够轻松地将公共内容整合到多个视图中，提高了代码的复用性和维护性。