How to Load Common Pages in Laravel Views: Layouts Implementation Guide

gitbox 2025-06-18

How to Load Common Pages in Laravel Views

Laravel is a powerful PHP framework that offers convenient ways to manage and load common pages. In many development projects, there is often a need to share the same header and footer content across multiple views. To avoid repeating this code in every view, Laravel provides the Layouts feature, which allows us to define a common layout file for headers and footers, and then extend this layout in the views where they are needed.

In this article, we will explore how to implement Laravel's layout feature to load common pages efficiently.

Step 1: Create a Common Layout File

First, create a new layout file named `app.blade.php` in the `resources/views/layouts` folder. This file will serve as the common layout for all views. In the layout file, we will define the common header and footer HTML code and use the `@yield` directive to reserve space for specific content in the page.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <!-- Common header content -->
    </header>
    @yield('content')
</main>

<footer>
    <!-- Common footer content -->
</footer>

In this layout file, we use the `@yield('title')` and `@yield('content')` directives to reserve space for the page title and content area, respectively. These spaces will be filled in the individual view files later.

Step 2: Create View Files and Extend the Layout

Next, create a new view file in the `resources/views` folder, such as `home.blade.php`, and extend the layout file we just created.


@extends('layouts.app')
<p>@section('title', 'Homepage')</p>
<p>@section('content')<br>
<h1>Welcome to My Homepage!</h1><br>
<p>This is my personal blog. Feel free to explore!</p><br>
@endsection<br>

In this view file, we extend the layout using the `@extends('layouts.app')` directive. Then, we use the `@section('title', 'Homepage')` directive to fill the `@yield('title')` space and `@section('content')` to fill the `@yield('content')` space with the page content.

Step 3: Generated Final HTML Content

When Laravel renders this view, it will automatically insert the filled content into the layout's reserved spaces, generating the following final HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homepage</title>
</head>
<body>
    <header>
        <!-- Common header content -->
    </header>
    <h1>Welcome to My Homepage!</h1>
    <p>This is my personal blog. Feel free to explore!</p>
</main>

<footer>
    <!-- Common footer content -->
</footer>

Conclusion

Laravel's view layout feature provides a clean and efficient way to avoid redundant code when sharing common header and footer content across multiple views. By creating a common layout file and using the `@extends` and `@section` directives, you can easily integrate shared content into various views, improving code reusability and maintainability.