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` 指令，我們能夠輕鬆地將公共內容整合到多個視圖中，提高了代碼的複用性和維護性。