Laravel Extending layouts
In Laravel Blade, extending layouts is a feature that allows you to create a base layout for your application and then build upon it with specific content in individual views. This promotes reusability and helps keep your templates organized by separating layout structure from content.
1. Creating a Base Layout
First, create a base layout file in the resources/views/layouts directory. This file will serve as the foundation for your other views.
Example: resources/views/layouts/app.blade.php
<!DOCTYPE html> <html> <head> <title>@yield('title')</title> <!-- Include CSS, JavaScript, etc. --> </head> <body> <header> @include('partials.header') <!-- Include a partial for the header --> </header> <main> @yield('content') <!-- Content from child views will be injected here --> </main> <footer> @include('partials.footer') <!-- Include a partial for the footer --> </footer> </body> </html>
2. Extending the Base Layout
In your child views, you can extend the base layout and define sections that will be injected into the layout's @yield directives.
Example: resources/views/home.blade.php
@extends('layouts.app') @section('title', 'Home Page') @section('content') <h1>Welcome to the Home Page</h1> <p>This is the content of the home page.</p> @endsection
3. Sections and @yield
@section: Defines a section of content that will replace the corresponding@yielddirective in the base layout.@yield: Placeholder in the base layout where the section content will be inserted.
Example:
In the base layout (app.blade.php):
<!DOCTYPE html> <html> <head> <title>@yield('title', 'Default Title')</title> </head> <body> <header> @include('partials.header') </header> <main> @yield('content') </main> <footer> @include('partials.footer') </footer> </body> </html>
In the child view (home.blade.php):
@extends('layouts.app') @section('title', 'Home Page') @section('content') <h1>Welcome to the Home Page</h1> <p>This is the content of the home page.</p> @endsection
4. Adding Additional Sections
If your base layout has multiple @yield directives, you can define corresponding sections in your child views.
Example:
Base Layout (app.blade.php):
<!DOCTYPE html> <html> <head> <title>@yield('title', 'Default Title')</title> @yield('head') </head> <body> <header> @include('partials.header') </header> <main> @yield('content') </main> <footer> @include('partials.footer') </footer> </body> </html>
Child View (home.blade.php):
@extends('layouts.app') @section('title', 'Home Page') @section('head') <link rel="stylesheet" href="/css/home.css"> @endsection @section('content') <h1>Welcome to the Home Page</h1> <p>This is the content of the home page.</p> @endsection
5. Stacking Sections
Blade also supports stackable sections that allow you to push content into a stack in the layout.
Base Layout (app.blade.php):
<!DOCTYPE html> <html> <head> <title>@yield('title', 'Default Title')</title> @stack('styles') </head> <body> <header> @include('partials.header') </header> <main> @yield('content') </main> <footer> @include('partials.footer') </footer> @stack('scripts') </body> </html>
Child View (home.blade.php):
@extends('layouts.app') @section('title', 'Home Page') @push('styles') <link rel="stylesheet" href="/css/home.css"> @endpush @section('content') <h1>Welcome to the Home Page</h1> <p>This is the content of the home page.</p> @endsection @push('scripts') <script src="/js/home.js"></script> @endpush
Summary
Extending layouts in Laravel Blade allows you to create a base structure for your application and build upon it with specific content in individual views. By using @extends, @section, and @yield, you can maintain a consistent look and feel across your application while keeping your code modular and easy to manage. The ability to define additional sections and stack content further enhances the flexibility of Blade templates.