How can I tell Laravel-5 which Javascript files I want to include in a template.
For example, I have my Controller with something like this:
return view('butchery', ['locations' => $locations, 'classTypes' => $classTypes]);
I have my butchery.blade.php template with my html:
#extends('app')
#section('content')
<!-- html here -->
#endsection
...and I have my app.blade.php container template with all my javascript files at the bottom. If I didn't want to include one of the javascript files in my view, how would I do that?
app.blade.php:
<!DOCTYPE HTML>
<!--[if IE 8]><html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
<head></head>
<body>#yield('content')</body>
<script src="/js/mobile-menu.js"></script>
<!-- apply voucher code -->
<script src="/js/voucher-apply.js"></script>
</html>
You should create a section in your template where the scripts should be loaded and use this in your pages to include the required scripts.
Like so:
Template:
<html>
<head>
<title>My page</title>
</head>
<body>
<div class="container">
#yield('content')
</div>
#yield('scripts')
</body>
</html>
Page:
#extends("template")
#section('content')
<h1>Hello world!</h1>
#stop
#section('scripts')
<script src="/path/to/script.js"></script>
#stop
This way you can include the scripts on the page that are needed. Scripts that are needed through the entire template can be added under or above the #yield('scripts').
You can use roumen/asset package. It is quite easy to use and will cover all your needs. Just set default set of assets somewhere (e.g. AppServiceProvider) and then in your controller add additional js files that you need only for this particular page. This is the easies way to manage your stack of assets.
Of course you can do that manually. But hen you have to make your view composer that will share array of js files and compile them in your view. Then again make somewhere array of default js/css files and in controller methods extend them.
Related
I have one file which contain 3 component. for example
<div1></div1>
<div2></div2>
<div3></div3>
#section('script')
<script>
/**
contains div1,div2,div3 dependent script
**/
</script>
Now i have kept separate blade.php for div element
for example,
div1.blade.php
<div1>
</div1>
#section('script')
<script>
// this contain all the script related to div1 like ajax call and other things
</script>
div2.blade.php
<div2>
</div2>
#section('script')
<script>
// this contain all the script related to div2 like ajax call and other things
</script>
div3.blade.php
<div3>
</div3>
#section('script')
<script>
// this contain all the script related to div3 like ajax call and other things
</script>
Now i have included all this blade component into main component
main.blade.php
#section('content')
#include('div1.blade')
#include('div2.blade')
#include('div3.blade')
#endsection
#section('script')
//common script
#endsection
These all i have done and not getting how to load individual component script in main.blade.php
Try to use the below method to achieve your goal.
// main.blade.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
#yield('style')
<title>Hello, world!</title>
</head>
<body>
#yield('content')
#yield('script')
</body>
</html>
Now Extend the above main.blade.php file in your other files.
// other.blade.php
#extend('main')
#section('style')
//your all style files
#endsection
#section('content')
//your page content
#endsection
#section('script')
//your all scripts files
#endsection
I hope it helps.
With Blade it seems the yield does not work with included parts. How can I fill a section defined inside an included part in the parent template?
It seems this is a known issue:
https://github.com/laravel/framework/issues/8970
template-body.blade.php
<body>
#yield('body')
<body>
template-html.blade.php
<html>
#include('template-body')
#yield('other')
</html>
foo.blade.php
#extends('template-html')
#section('body')
Hello World! (does not work)
#endsection
#section('other')
Does work
#endsection
what you are doing will give you an error. you can include pages on the template and other sub pages. it just depends on what you are doing and how you doing it. what you should have done is:
//app.layout
<!DOCTYPE html>
<html>
<head>
<title>#yield('title')</title>
<your-css-files>
#yield('styles')
<your-script files>
#yield('scripts')
</head>
<body>
#include('your page')
#yield('content')
</body>
</html>
then on your pages you do:
#extends(app.layout)
#section('content')
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
#include('your page')
#endsection
on the samepage you can call your styles and scripts as
#section('styles')
//css files
#stop
#section('scripts')
// javascript files
#stop
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.
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
I am new to laravel and blade template engine.
Issue: file form.blade.php
#extends('front.header')
#extends('front.footer')
Loads front/footer.blade.php first and then the contents of front/header.blade.php
Please find attached the snap shot of the View Source.
I have checked few answers in stackoverflow they say about the white space.I dont seem to have any.
Regards,
Jignesh
This is how I would recommend structuring your master template.
front._layouts.master:
<!DOCTYPE html>
<html>
<head>
#include('front._layouts.head')
</head>
<body>
<header>
#include('front._layouts.header')
</header>
<main>
#yield('content')
</main>
<footer>
#include('front._layouts.header')
</footer>
#stack('scripts')
</body>
</html>
Notice the #stack() this can come in useful when you're making a robust part of an application. Stacks allow you to push to named stacks on top of each other.
Follow this steps:
step 1:
resources\views create a file like: master.blade.php
step 2:
resources\views create a folder like: layouts
Inside layout folder create your header & footer file
step 3:
inside master.blade.php write how you design your main template like so.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- your common css here -->
#yield('partial-css')
</head>
<body>
#include('layouts.top-header')
<div class="container">
#yield('content') <!-- this is your common body -->
</div> <!-- /container -->
#include('layouts.footer')
<!-- your common js here or you also define inside the footer page -->
#yield('script') <!-- this is your individual script for all page -->
</body>
</html>
Step 4:
Now you use master page for all other pages like so index.blade.php
#extends('master')
#section('content')
<!-- Here is your main body content -->
#endsection
#section('script')
<!-- Here is your individual script content -->
#endsection
Hope you understand now how blade template works!
You cannot #extends from 2 parents. If you want to include another view, you should use #include instead
Like this :
#include('front.header')
Content
#include('front.footer')
Let us say i have two pages based on laravel and I have different script files for both the pages.Now I am loading all the scripts in index.blade.php.As per the present implementation all the scripts are loaded in both cases.How to load different script files for different pages and also load scripts after the html.
I am not familiar with require.js which was stated as an alternative by #jsxqf in the comments.
I personally have yields in my master-layout (one for js, one for css) which i am adressing using blade. In your views, you could do the same.
File layout/master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
#yield('css-scripts')
</head>
<body>
#yield('content')
</body>
<script src="script.js"></script>
#yield('js-scripts')
</html>
Your views would then extend this layout and put the scripts independently in the corresponding sections like so:
File myview.blade.php
#extends('layout.master')
#section('content')
// your content...
#stop
#section('js-scripts')
// here, you have control over additionally loaded scripts...
<script src="otherscript.js"></script>
#stop
But it looks like require.js might be a good alternative to this approach, which i wasn't aware of until now.
The best approach you can do is creating a section to put optional scripts using stack on your main layout
<html>
<head>
<!-- At the end of head -->
#stack('styles')
</head>
<body>
<!-- At the end of body -->
#stack('scripts')
</body>
</html>
In a normal view which would be your page,
#extends('layouts.app')
#push('styles')
<link rel="stylesheet" href="{{ asset('css/page1.css')}}">
#endpush
#section('content')
// page content
#endsection
#push('scripts')
<script src="{{ asset('js/page1.js')}}"></script>
#endpush
This allows you to add additional optional scripts and styles to your main layout from other views, making it completely safe to organize styles / scripts in your views