![Theme Switcher Image](https://stackcoder.in/images/theme-switcher.png?cb=stackcoder90070)
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.
Upload File From Frontend Server {GuzzleHttp} To REST API Server In PHP {Laravel}
Sass or SCSS @mixin vs @extends vs Placeholder (%)
Simple Way To Create Resourceful API Controller In Laravel
Firebase Cloud Messaging (FCM) Browser Web Push Notifications Using Javascript And PHP
Add Google ADS In AMP (Accelerated Mobile Pages) Website
Facebook Login With PHP Laravel Socialite
Client-Side DataTable, Adding Super Powers To HTML Table
Install Letsencrypt SSL Certificate for RabbitMQ Server and RabbitMQ Management Tool
Laravel Last Executed Query In Plain SQL Statement For Debugging
Relationship Table Data With Route Model Binding In Laravel
Install RabbitMQ with Docker & Running with NodeJS