
Good content takes time and effort to come up with.
Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.
Hello! You amazing people, I am back with a new article where I will discuss on @stack
, @push
& @prepend
directive in Laravel Blade templating.
There will be a lot of different opinions on how to use the blade template directives. It may vary from developer to developer. In this article, I will do my best to make you understand some of my knowledge on @stack, @push & @prepend.
@yield
& @section
)Most of the time while your working on Laravel blade templating you use @yield
as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel Blade Templating Demo</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
@yield('stylesheets')
</head>
<body>
@yield('content')
@yield('javascripts')
</body>
</html>
You will extend all your child templates with @section directive as follows
@extends('layouts.master')
<!-- Start of Stylesheets -->
@section('stylesheets')
<style>
.text-green{ color: #008000; }
</style>
@endsection
<!-- Start of Javascript -->
@section('javascripts')
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
@endsection
<!-- Start of content -->
@section('content')
Some random content
@endsection
Basically @yield
will be replaced with @section
content.
NOTE: You can't use same sections directives twice in your blade template ie @section('javscripts') or @section('stylesheets')
. If you try to use then only the first one will work.
Consider, if you would like to add anything before the @yield or after that @yield directive, or if your child blade template has partials where you would like to add something then it will be nightmare.
Can't prepend or append to the parent @yield directive. Can be achieved with @parent directive, but not completely and even few beginners find it complicated.
@stack
, @push
& @prepend
)But don't worry @stack @push @prepend
will come to your rescue.
@stack
- It is basically a basket that hold's all the things that are pushed from the child blade template. You may push to a stack as many times as needed.
To render the complete stack contents, pass the name of the stack to the @stack directive
@push
- This is used to append the codes to parent template @stack directive
@prepend
- If you would like to put anything before @stack code then you will use @prepend to put the content before it.
Blade template allows you to push to named stacks which can be rendered somewhere else in another view or layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Upload</title>
@stack('stylesheets')
</head>
<body>
@yield('content')
@stack('javascripts')
</body>
</html>
Now you can use this as follows
@extends('layouts.master')
@push('stylesheets')
<style>
body{ background: green; }
</style>
@endpush
@push('stylesheets')
<style>
body{ color: #fff; }
</style>
@endpush
@prepend('stylesheets')
<style>
body{ font-weight: bold; }
</style>
@endprepend
@section('content')
some content
@endsection
If you have observed carefully we have used @push('stylesheets')
2 times. Oh! Yes, that works perfectly fine.
@prepend
directive will prepend its content above its top 2 @push('stylesheets')
directives
NOTE: Basically you can use @stack with Javascripts a lot. For Eg: If you want to prepend some libraries from the master blade template.
Ya I know it's the least used in templating as many of them might not have come across. But ya it's totally worth using in your next project.
Hope you enjoyed the article. Please share it with your friends.
Integrate Google Translate Into Your Website
What Is Method Chaining In PHP?
Laravel Custom Maintenance Page
Install Letsencrypt SSL Certificate for RabbitMQ Server and RabbitMQ Management Tool
Sass or SCSS @function vs @mixin
Generate RSS Feeds in PHP Laravel
What Is Laravel Resourceful Controllers?
Securely Connect Server MYSQL DB From Sequel Pro / MYSQL Workbench
Stripe Payment Integration With Laravel
Create A Composer Package? Test It Locally And Add To Packagist Repository
PHP extension ext-intl * is missing
What Is Composer? How Does It Work? Useful Composer Commands And Usage