Sabbir Ahmed
1 month ago
Laravel Blade Templates Guide: Master Layout Optimization
Laravel is an amazing php framework with so many features and supports which help developers to build amazing applications very efficiently. It’s blade engine is very popular because of it’s swiftness and performance. So when you are working with this framework, you should organize the blade files in proper structure so that it can give the best performance. To achieve that, First step here is to master the layouts properly. Its so important that if you can plan properly on the application architecture and design a beautiful template, it will help you not only in minimizing your codes, but also to enhance performance. In this article, we will see a examples on how we can master laravel layouts in depth.
Mastering Laravel Layouts: Improve Code Reusability and Performance
Its not very easy to demonstrate a laravel template in an article actually. But we will try to explain and understand the key concepts, so that we can apply the knowledge in different environments.
Here is an example of a html home page of which we will have to make e layout in laravel:
<!DOCTYPE html>
<html>
<head>
<title>My Application - Home</title>
<!-- Add your CSS files here -->
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<header>
<h1>My Application</h1>
<!-- Navigation partial could be included here -->
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<div class="container">
<h2>Welcome to the Home Page</h2>
<p>This is the content of the home page.</p>
</div>
<footer>
© 2024 My Application
</footer>
<!-- Add your JS files here -->
<script src="/js/scripts.js"></script>
</body>
</html>
And the example of about page:
<!DOCTYPE html>
<html>
<head>
<title>My Application - About</title>
<!-- Add your CSS files here -->
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<header>
<h1>My Application</h1>
<!-- Navigation partial could be included here -->
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<div class="container">
<h2>About Us</h2>
<p>This is the content of the about page.</p>
</div>
<footer>
© 2024 My Application
</footer>
<!-- Add your JS files here -->
<script src="/js/scripts.js"></script>
</body>
</html>
- Lets plan the layout now
As we can see, we can have home, about or contact 3 different pages here. For each page, you will have to think that, which parts of the codes are common and which are different. If you see the examples above, you would find the parts those are different in every page, are the codes inside div.container. Apart from that, everything is common in every pages.
So we can plan the layout like this, the common parts will go to the master layout and the changing parts will be called as body, they will be at child template.
- Lets make the master template
As planned, lets move the head, header, footer in body in the master template. Under resources/views/layouts, Lets create master.blade.php and add codes like below:
<!-- resources/views/layouts/master.blade.php -->
<!DOCTYPE html>
<html>
<head>
<title>My Application - @yield('title')</title>
<!-- Add your CSS files here -->
</head>
<body>
<header>
<h1>My Application</h1>
@include('partials.navigation')
</header>
<div class="container">
@yield('content')
</div>
<footer>
© 2024 My Application
</footer>
<!-- Add your JS files here -->
</body>
</html>
This will serve as a common template for every page we are extending this layout.
We have kept the title part bit dynamic. With the @yield('title'), we can push a dynamic title from each page if we want. We will see example later.
Then with the @include('partials.navigation'), we have moved the navigation links to another file under resources/views/partials/navigation.blade.php. This way, it will be easier for you to handle codes more peacefully:
<!-- resources/views/partials/navigation.blade.php -->
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Now with the @yield('content'), we are pushing the actual content from child template.
- Creating the Child View
Now, lets create a new child template for under resources/views/home.blade.php, for our home page:
<!-- resources/views/home.blade.php -->
@extends('layouts.master')
@section('title', 'Home')
@section('content')
<h2>Welcome to the Home Page</h2>
<p>This is the content of the home page.</p>
@endsection
With the @extends, we are extending our master template here, so all the code from that template will be available in proper place.
@section directive is pushing a dynamic title “Home” to the master’s @yield('title')
And @section('content') is working to push the main content to the @yield('content') position of the parent layout.
Here is the code for about page under resources/views/about.blade.php:
<!-- resources/views/about.blade.php -->
@extends('layouts.master')
@section('title', 'About')
@section('content')
<h2>About Us</h2>
<p>This is the content of the about page.</p>
@endsection
It is all same for the contact page too. I hope you can get the concept now.
- Code Structuring with Nested Layout
To use a modern and practical layout for any application, you can follow this code structuring to organise the blade files efficiently. This will not just help you to find files and work fast, but also help other developers to quickly sync with your project architecture.
resources/views
├── layouts
│ └── master.blade.php
├── partials
│ └── navigation.blade.php
└── pages
├── home.blade.php
├── about.blade.php
└── contact.blade.php
- Modularize Layout by Using Components
We often want to use pre-designed components like button, card, container box etc in multiple places. This helps to make or write component for once and then use it everywhere. In React and Vue, we see this kind of practices very often. We can also make these kind components in laravel too.
make a new file under resources/views/components/button.blade.php.
<!-- resources/views/components/button.blade.php -->
<button class="btn {{ $class ?? 'btn-primary' }}">
{{ $slot }}
</button>
Now you can use the component anywhere like this:
<!-- Usage in a Blade file -->
<x-button class="btn-secondary">Click Me</x-button>
Mastering Laravel Templates: Using @stack and @push Directives Effectively
After mastering, in many cases, you might need to do something different for specific pages. For example, in your application if you have home, about and contact page, you might need to have some extra css and scripts required in home page but not in other pages. In such case, you can use laravel’s @stack and @push directives. Lets see a quick examples.
- Using @stack in master template
Lets say, we want to inject extra css and js codes from child templates to master, then in master template, we have to define @stack directive in master(resources/views/layouts/app.blade.php) template like below:
<!DOCTYPE html>
<html>
<head>
<title>My Application</title>
<!-- Styles -->
<link rel="stylesheet" href="path/to/your/css">
<!-- Stack for additional styles -->
@stack('styles')
</head>
<body>
<div class="container">
@yield('content')
</div>
<!-- Scripts -->
<script src="path/to/your/js"></script>
<!-- Stack for additional scripts -->
@stack('scripts')
</body>
</html>
You can see @stack('styles') and @stack('scripts') which is an extension actually to this template. These are the placeholders where you can add or inject extra codes in these places from child template. For example, you want to add more css and script for home page, but not for about or contact page, what would you do then? You can opt for this places @push directive in child template.
- Pushing from child with @push
Now, we can push the codes or contents from our child blade with @push directive. Here is an example of child template (resources/views/child.blade.php):
@extends('layouts.app')
@section('content')
<h1>Welcome to My Page</h1>
<p>This is a child view.</p>
@endsection
@push('styles')
<link rel="stylesheet" href="path/to/child-specific/style.css">
@endpush
@push('scripts')
<script src="path/to/child-specific/script.js"></script>
@endpush
- Using Multiple Pushes
You can push multiple items to the same stack from different parts of your application. They will all be included in the order they are pushed in compiled codes.
- An alternative way
You can also achieve the same result with @yield directive. You can go for any way you feel comfortable.
We can achieve that like below. In the master template:
<!DOCTYPE html>
<html>
<head>
<title>My Application</title>
<!-- Styles -->
<link rel="stylesheet" href="path/to/your/css">
<!-- Section for additional styles -->
@yield('styles')
</head>
<body>
<div class="container">
@yield('content')
</div>
<!-- Scripts -->
<script src="path/to/your/js"></script>
<!-- Section for additional scripts -->
@yield('scripts')
</body>
</html>
And in the child blades, you have to use @section instead of @push:
@extends('layouts.app')
@section('content')
<h1>Welcome to My Page</h1>
<p>This is a child view.</p>
@endsection
@section('styles')
<link rel="stylesheet" href="path/to/child-specific/style.css">
@endsection
@section('scripts')
<script src="path/to/child-specific/script.js"></script>
@endsection
Summary
Laravel template mastering is the first step you do when you start coding for the new application. Doing this task needs proper planning and experience, it also depends on the frontend design of the application. Mastering a laravel template helps you to write less code, Also the code management becomes very easy and understandable. The application becomes structured and also helps to blade engines to connect files and generate output efficiently. It all depends on how good you are planning for most of the views. You can also make multiple layouts as you need in a single application and apply separately for different blade files.
We have learnt how to use stack, push and their alternative usages. Sometimes when mastering we use many unwanted css and javascript files which are not mandatory for each page. But just for some specific page, we just do that which is very bad practice. Because calling these files every time the content loads, it kills a significant amount of time and hurts performance, you dont want that as a user. In such cases, using these techniques like stack-push or yield-section is much more better approach and performance friendly.
Thats all from this article. Please share your thoughts in the comment box or give love to this post if you found it helpful.
Wish you a happy day.
Comments