How to create a reusable Blade template in Laravel
Blade templates in Laravel provide a powerful way to create dynamic and reusable views for our web applications. By using Blade, we can easily organize our views, promote code reusability, and maintain a consistent layout across our application. We will explore the steps to create reusable Blade templates in Laravel, empowering us to build scalable and maintainable web applications.
Let’s understand this with the help of an example:
The header is a reusable Blade component that is being extended (used) by multiple pages of a website. This helps us avoid redundancy and maintain a consistent layout and functionality across the entire website. By creating the header as a reusable Blade component, any changes or updates made to the header’s code or design are automatically reflected on all pages that extend it.
This not only saves development time, but also ensures a seamless user experience, as visitors encounter a familiar and cohesive header no matter which page they navigate to. The ability to modify the reusable Blade components’ behavior in one central location simplifies maintenance and debugging, making the website more manageable and scalable in the long run.
Creating a reusable Blade layout
A Blade layout serves as a master template for your application’s views. It defines the common structure that will be shared across multiple pages. To create a reusable layout, navigate to the resources/views directory and create a new file named layout.blade.php.
<!DOCTYPE html>
<html>
<head>
<title>@yield('title', 'My Laravel App')</title>
</head>
<body>
<header>
<!-- Include header content or navigation bar here -->
<div>Welcome to my Laravel app</div>
</header>
<main>
@yield('content')
</main>
<footer>
<!-- Include footer content here -->
</footer>
</body>
</html>Explanation
Line 4: We set up a basic HTML structure with placeholders using the
@yielddirective.Line 13: The
@yielddirective allows us to define sections where specific content will be injected when extending the layout.
Extending the reusable layout
To utilize the reusable layout in other views, we’ll extend it using the @extends and @section directives. Let’s create a new view for the home page and another for the about page.
@extends('layout')
@section('content')
<p>This is the homepage of our awesome application.</p>
@endsectionExplanation
Line 1: The
@extendsdirective is used to specify which layout to extend.Lines 3–5: The
@sectiondirective defines the content that will replace the corresponding@yieldin the layout.
Conclusion
By creating reusable Blade templates in Laravel, we can enhance code organization, foster code reusability, and maintain consistency throughout our application’s user interface. Utilizing the power of Blade’s directives, such as @extends, @section, and @include, we can efficiently manage our views and streamline the development process.
Free Resources