Load different css/js for different views in laravel

Question

I am new to laravel. I use laravel 5.6 . I want to use Summernote WYSIWYG editor in only one page(view). Summernote need a css and a js file. I want to load these files only in this view. How do i do that?
Here is how I tried to do that.
master.blade.php file.

<html>

    @include('header')

    <body>

        @yield('content')

        @include('footer')

    </body>
</html>

editor.blade.php file

@extends('master')

    @section('content')
        --- Summernote editor goes here---
    @endsection

    @section('imports')
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

    <!-- include summernote css/js-->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

    <script>
        $(document).ready(function() {
            $('.summernote').summernote();
        });
    </script>
    @endsection

header.blade.php

<head>
    --- other css and file links ---

    @yield('imports')
</head>

As you can see editor.blade.php file extends the master.blade file. And in master file I included the header.blade file which hold all of css links. So I yielded the Summernote js/css in header.blade file. But when it loaded to browser, the yielded content in header.blade file are at the beginning of the <body> tag(which should be in side the <head> tag).
I could just add those files in headr.blade.php file directly. But I wonder if there's a way to do it in this way.

Could you post the actual code for: ---- Summernote css and js file links here --- — Chris Happy
– Chris Happy, Commented Mar 20, 2018 at 23:28

Ikong · Accepted Answer · 2018-03-21 00:47:49Z

3

I usually do this in this way, you don't use the include() blade in the master.blade since it will call to all pages regardless, just yield then in the other page just inject to that yielded section.

master.blade.js

<html>

    @yield('header')

    <body>

        @yield('content')

        @yield('footer')

    </body>
</html>

header.blade.php

 @extends('master')

    @section('header')
            --- CSS here ---
    @endsection

    @section('content')
        --- content here ---
    @endsection

    @section('footer')
        --- scripts here ---
    @endsection

answered Mar 21, 2018 at 0:47

Ikong

2,5704 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Prasad Kavinda Over a year ago

Yeah. That is a really good way to do it. Do you have any idea, why my method is not woking here. Can’t we use yield in included files?

Ikong Over a year ago

as you can see in your code, you have extended "master.blade" in your "editor.blade" which also contains the code that you are yielding (imports) This means all contents will go to the yielded content, which is inside the body.

Prasad Kavinda Over a year ago

Oh right. You mean, we can yield content in only one file. Right?

Ikong Over a year ago

you can yield to many file, but you can't include to extended file that you yielded.

Ikong Over a year ago

for more details about include laravel.com/docs/5.6/blade#including-sub-views

|

Collectives™ on Stack Overflow

Load different css/js for different views in laravel

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related