Level 88
This looks really good! One point of improvement. You're using @stacks for the javascript part, why not use that for stylesheets as well? You're doing the same thing in the end for both parts ;)
Dec 22, 2017
5
Level 13
Blade @stack('scripts') and @push('scripts') - Am I doing it right?
I'm currently working on setting up the blade hierarchy for my upcoming app and need some help setting up the order right:
Requirements:
-
The sidebar will be available on most of the pages, but not all.
-
Some of the pages will need custom JS injections and Stylesheets as well.
My main layout for the site: app.blade.php
<html>
<head>
<title><title>@yield('title') - SiteName</title></title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@yield('stylesheets') <!-- Child will insert custom childsheets as required -->
</head>
<body>
<div id="container">
@yield('sidebar')
@yield('content')
</div>
@stack('scripts')
</body>
</html>
Example Child template: child.blade.php
@extends('layouts.app')
@section('title', 'Custom Page Title')
@section('stylesheets')
<link rel="stylesheet" href="custom/css/required/by/child">
@endsection
@section('sidebar')
<div class="sidebar">
<div>Some sidebar stuff</>
</div>
@endsection
@section('content')
@endsection
@push('scripts')
<script src="custom/js/required/by/child"></script>
@endpush
Am I doing this right?
Level 13
@bobbybouwmann - Thank you for quick response. I didn't know @stacks can be used for stylesheets. Would that be like:
in child.blade.php
@push('scripts')
<script src="custom/js/required/by/child"></script>
<link rel="stylesheet" href="custom/css/required/by/child">
@endpush
Until now, I never loaded stylesheets towards the bottom of </body>; but maybe I'm an idiot (╯°□°）╯︵ ┻━┻
Question 2: I'm bit confused about the sidebar section. What if I've to dynamically set the contents of the sidebar - say, only a part of the sidebar while the rest of the sidebar remains the same on all the pages? For example, If I'm on post/write page, I might expect an entry in the sidebar for Writing Tips. How'd that work in above template?
2 likes
Level 88
You have have multiple stacks
// Layout
<head>
@stack('stylesheets')
</head>
<body>
@stack('scripts')
</body>
// Child
@push('stylesheets')
<link rel="stylesheet" href="custom/css/required/by/child">
@endpush
@push('scripts')
<script src="custom/js/required/by/child"></script>
@endpush
12 likes
Level 7
You can also use conditional logic for the sidebar in the app.blade.php. Something like:
@if (in_array(Route::currentRouteName(),
[
'dashboard',
'another_route',
'third_route'
]))
//include sidebar here
@endif
Please or to participate in this conversation.