Sep 29, 2022

Level 8

Adding js and css files for many pages, but not for all - only with another layout?

Currently I have a single layout file. But now I need to add some css and js files to many of the pages, yet not all.

I don't want to manually go to each page and @push the files to the styles/scripts stacks.

Is my only option to create a second layout for these pages, extend the main layout and add the files there, then extend this second layout in the necessary pages?

tykus

3 years ago

Level 104

Rather than extending a separate layout, you could pass some state to the existing layout to determine which assets should be included; something like:

@extends('layouts.master', ['extraAssets' => true])

// layouts/master.blade.php
@if ($extraAssets)
    <link rel="stylesheet" ...>
    <script src="..."></script>
@endif

1 like

Ligonsker

3 years ago

Level 8

@tykus this is good, I think I will use that instead of what I was thinking about.

I just wonder if what was on my mind is the correct way to extend a layout to a second layout:

Let's say I have the main layout:

<html>
<head>
    <meta ...>
    <meta ...>
    <meta ...>
    
    <title> some title </title>

    <link href=" ... " rel="stylesheet">
    <link href=" ... " rel="stylesheet">
    <link href=" ... " rel="stylesheet">
    <link href=" ... " rel="stylesheet">
</head>
<body>

    <main>
        @yield('content')
    </main>
   
    <script src=" ... "></script>
    <script src=" ... " ></script>
    <script src=" ... " ></script>
    <script src=" ... "></script>

    @stack('scripts')
</body>
</html>

Will it be correct to do that - create extra layout:

@extends('main')

@push('styles')
    // push styles here
@endpush

@push('scripts')
    // push scripts here
@endpush

Then extend the extra layout in some page:

@extends('extra')

@section('content')
    // some content
@endsection

But I think it's not correct, because then on pages where I need to extend the content, it won't be available because I don't think it inherits the layout 2 levels above

tykus

3 years ago

Level 104

@Ligonsker its been a while since I used Blade layouts like this so I don't remember exactly, but there are/were @stop, @endsection and @parent directives which will allow you to decide how content is yielded into defined sections.

1 like

Ligonsker

3 years ago

Level 8

@tykus thanks!

Also, how about this:

@extends('extra')

@section('content')
    @yield('content')
@endsection

that should also solve the ancestor issues? Just not sure what's a good convention with Blade since I didn't do too complex things with it

tykus

3 years ago

Level 104

@Ligonsker

I didn't do too complex things with it

In that case, I wouldn't take this approach...

1 like

Ligonsker

3 years ago

Level 8

@tykus But it's so much easier, I don't have to edit all blade files now 🥲(I do, but it's easier to use the Replace function this way with VS Code or PhpStorm)

Ligonsker

3 years ago

Level 8

Update: I just checked again. The descendant actually inherits from the yield of the master's content:

master layout:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @stack('styles')
    <title>@yield('title')</title>
</head>
<body>
    <main>
        @yield('content')
    </main>
    @stack('scripts')
</body>
</html>

child layout:

@extends('layouts.master')

@push('styles')
   // push the extra styles here
@endpush

// even without adding or yielding content section here

@push('scripts')
   // push the extra scripts here
@endpush

And lastly the page itself:

@extends('layouts.child')
@section('title') Some Page @endsection

@section('content')
    <h1>Some Page</h1>
@endsection

And it worked. Not like I first said that it doesn't inherit from the master layout

Please or to participate in this conversation.