In my favorite templating frameworks they typically have the ability to nest layouts. Is this something that is possible in Blade?
For example...
master.blade.php
<html>
<head><!-- stuff --></head>
<body>
#yield('content')
</body>
</html>
nav.blade.php
#extend('master')
<nav>
<!-- nav content -->
</nav>
#yeild('content')
breadcrumb.blade.php
#extend('nav')
<breadcrumb>
<!-- breadcrumb content -->
</breadcrumb>
#yield('content')
home.blade.php
#extend('nav')
#section('content')
<home>
<!-- content -->
</home>
#endsection
about.blade.php
#extend('breadcrumb')
#section('content')
<about>
<!-- content -->
</about>
#endsection
The reason I love this format is that it makes it extremely elegant (IMO) to be able to choose your injection point!
Have a one off landing page...reference master
For the homepage...reference nav
For any subpages (about/nav/product) reference breadcrumb
The layouts cascade and 'content' gets rebuilt with the compiled html as it goes up the tree.
Is this possible? I'm hoping to avoid doing #include in the layouts as I personally find them cumbersome and a bit of an eye sore especially when you get to elements that are repeated often, but not everywhere (breadcrumbs).
EDIT: Based on answers.
Ideally 'content' would be rebuilt and passed up the chain of nested layouts. i.e. If you have the homepage which references nav.blade.php the homepage content gets added to the nav layout and compiled. Then since the nav layout references master.blade.php the compiled layout would be passed up to master and built again. No duplicating of any content.
I'm not sure I get what you're after here. For instance in home.blade.php you extend "nav", which in turn extends "master", but both "master" and "nav" yield content, so the <home> content will render twice.
So, what is your expected output? I'm not sure "home" or "about" should really extend "nav" or "breadcrumb". I think of these two as sort of structural layout components, so it does make sense to me to include them in the master layout. In "nav" you can define a section to extend when your view needs a breadcrumb.
For instance:
master.blade.php
<html>
<head><!-- stuff --></head>
<body>
#include('nav')
#yield('content')
</body>
</html>
nav.blade.php
<nav>
<!-- nav content -->
#yield('breadcrumb')
</nav>
home.blade.php
#extend('master')
#section('content')
<home>
<!-- content -->
</home>
#endsection
about.blade.php
#extend('master')
#section('breadcrumb')
<breadcrumb>
<!-- breadcrumb content -->
</breadcrumb>
#endsection
#section('content')
<about>
<!-- content -->
</about>
#endsection
You forgot using #parent. Here's the example:
master.blade.php
<html>
<head>
{{-- Stuff --}}
</head>
<body>
#yield('content')
</body>
</html>
nav.blade.php
You need to put the nav inside section to tell master layout that this is a content. If you don't, nav will be in the top of master layout (yes, outside html).
#extends('master')
#section('content')
<nav>
<p>nav content</p>
</nav>
#endsection
home.blade.php
In this example, the content section is utilizing the #parent directive to append (rather than overwriting) content to the layout's sidebar. The #parent directive will be replaced by the content of the layout when the view is rendered.
#extends('nav')
#section('content')
{{-- You can control where #parent should be rendered --}}
#parent
<home>
<p>home content</p>
</home>
{{-- You can put your #parent here, give it a try --}}
#endsection
breadcrumb.blade.php
#extends('nav')
#section('content')
{{-- You can control where #parent should be rendered --}}
#parent
<breadcrumb>
<p>breadcrumb content</p>
</breadcrumb>
{{-- You can put your #parent here, give it a try --}}
#endsection
about.blade.php
#extends('breadcrumb')
#section('content')
{{-- You can control where #parent should be rendered --}}
#parent
<about>
<p>about content</p>
</about>
{{-- You can put your #parent here, give it a try --}}
#endsection
Rendered:
home.blade.php
<html>
<head>
</head>
<body>
<nav>
<p>nav content</p>
</nav>
<home>
<p>home content</p>
</home>
</body>
</html>
about.blade.php
<html>
<head>
</head>
<body>
<nav>
<p>nav content</p>
</nav>
<breadcrumb>
<p>breadcrumb content</p>
</breadcrumb>
<about>
<p>about content</p>
</about>
</body>
</html>
Related
I'm new to Laravel and i'm not quite sure yet how everything works. I'm trying to break appart code into various sections by including the begining of the page, and then create a hero section followed by some html in that page.
Everything shows but the html code that is on the page is rendering on top of everything else.
This thread looked like it could be things not being closed but as i see it everything is working as it should
Including header in wrong place Laravel 4
#include('blocks/scripts')
#extends('blocks/hero')
#section('title')
text here
#stop
#section('subtitle')
another text
#stop
<div class="container">
<div class="row">
<div class="col-12">
more text
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
</div>
</div>
#include('blocks/footer')
This is the file. The HTML block is being rendered right after the "scripts", followed by "footer" and then it shows the "hero".
The order should be scripts->hero->html->footer
#include('blocks/scripts') just has html code
#extends('blocks/hero') has #yield('title') and #yield('subtitle')
#include('blocks/footer') just text
I changed the names of some templates because it is difficult to understand the code what you put in the comments. But I think it can help you to organize your code.
The template where you have the html, head and body tags, is not a template to be included, but to extend other templates from it, and make use of a yield. For example #yield ('main-content'):
blocks/main.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
#yield('main-content')
</body>
</html>
blocks/hero.blade.php
This is a template that you could extends from the main one and adding content to the #yield('main-content') with #section('main-content'):
#extends('blocks/main')
#section('main-content')
<div class="container-fuid mx-0 wlgx_hero">
<div class="row">
<div class="col-12">
#include('blocks/header')
<section id="hero_text">
<h1 class="text-center text-white py-5">
#yield('title')
</h1>
<hr class="purple_line pb-3">
<section id="subtitle">
<p class="text-center">
#yield('subtitle')
</p>
</section>
</section>
</div>
</div>
</div>
#yield('hero-content')
#endsection('main-content')
The blade in your question (I don't know the name) can, in turn, extends from hero, and fill their yields:
#extends('blocks/hero')
#section('title')
text here
#stop
#section('subtitle')
another text
#stop
#section('hero-content')
<div class="container">
<div class="row">
<div class="col-12">
more text
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
</div>
</div>
#stop
The last one is the view that you have to return from a route or controller, so that everything works.
Hope it's help
In blade files, every direct HTML outside of #section('something') will be rendered at the top of the file.
You need to put #yield('something') in the extended file then wrap your HTML code with #section('something') and #endsection('something') like what you do with title and subtitle.
Here is the content of my home.blade.php file:
#extends('layouts.master')
#section('content')
#extends('partials.sidebar')
#section('pagecontent')
This is home
#endsection
#endsection
layouts/master.blade.php contains the main layout which has the typical <html><head><body>structure. In it's <body>, I am yielding to a section called content:
<!DOCTYPE html>
<html>
<body>
<div id="app">
#yield('content')
</div>
</body>
</html>
and in my parials/sidebar.blade.php, I am yielding to a section called pagecontent:
<div id="page-content-wrapper">
<div class="container-fluid">
#yield('pagecontent')
</div>
</div>
So I would naturally expect a DOM like this:
<!DOCTYPE html>
<html>
<body>
<div id="app"> <!-- #section('content') -->
<div id="page-content-wrapper">
<div class="container-fluid">
This is home <!-- #section('pagecontent') -->
</div>
</div>
</div>
</body>
</html>
Unfortunately, that's not the DOM my blade views are rendering. My sidebar partial doesn't get injected inside the master layout, instead, it is appended to the DOM as a sibling of the Entire Document:
<div id="page-content-wrapper">
<div class="container-fluid">
This is home <!-- #section('pagecontent') -->
</div>
</div>
<!DOCTYPE html>
<html>
<body>
<div id="app"> <!-- #section('content') -->
</div>
</body>
</html>
How can I fix this?
You can't use #extends like this. Use #include instead:
#include('partials.sidebar')
My issue is that when I define a section in a laravel blade (not master) I cannot display it's content on the page, however if I yield it on the master.blade.php it works fine. So how can I make this page display:
section 'content'
section 'template'
#extends('layouts.master')
#section('title', 'Website Builder')
#section('content')
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
#endsection
#section('template')
<div class= "container template_class ">
#foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file )}}">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
#endforeach
</div>
<div id="content-link2"></div>
<div class="container">
#yield('content')
#yield('template')
</div>
#endsection
#show
So, if you already have a #section defined in the master layout, it will be overriden unless you specify #parent inside the child layout's #section.
But for #yield, it always gets the section from the child layout. That means it always overrides the #yield part, even if it has a default defined as #yield('section', 'Default Content')
Hope this works!
I am new to Laravel, I am loving it so far and am trying to utilize the blade templating system as much as possible. What I have right now is my navigation existing in the middle of the screen at the root of the site:
and inside of my home.blade.php:
#extends('layouts.master')
#section('title')
#parent
::Home
#stop
#section('content')
<div class="row col-md-8 col-md-offset-2 text-center indexWrapper">
<div class="indexNav">
<ul class="text-right">
<li>Artists</li>
<li>Bulletin</li>
<li>Something</li>
<li>Something</li>
</ul>
</div>
<div class="indexHeading">
<h1 class="indexH1">Mumbler</h1>
</div>
</div>
#stop
and my master.blade.php
<!DOCTYPE html>
<html>
<head>
<title>
#section('title')
#show
</title>
<link href="{{ asset('bower/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/default.css') }}" rel="stylesheet">
<link href="{{ asset('bower/jquery/dist/jquery.min.js') }}" rel="script">
</head>
<body>
<div class="container">
#section('navigation')
#show
#yield('content')
</div>
</body>
</html>
Now I am also new to Bootstrap, so I apologize for what might be egregious misuse of classes. What I do have though, is a margin of 25% on what wraps this navigation, and when I click on one of the links (I.E. artists), I want that whole navigation to move up (jquery, I can handle that much), and the 'artists' view to appear below. What would be an elegant solution to this? Any resources for a beginner to laravel 4?
Thank you
I believe you should've tagged this as javascript and jquery since blade does not do what you want it to, (move up when someone clicks the link)
I am having trouble rendering a view in my controller. I am currently running Laravel 4 and below is my code. (BTW, I am still learning Laravel particularly the latest version that has not been released yet. I find it a bad idea to learn from the older versions because there seems to be a lot of changes for the current one.)
controllers/PluginsController.php
class PluginsController extends BaseController {
public function index()
{
return View::make('plugins.index')->with(array('title'=>"The Index Page"));
}
views/plugins/index.blade.php
#layout('templates.master')
#section('header')
<h1>The Header</h1>
#endsection
#section('content')
testing the index.blade.php
#endsection
#section('footer')
<div style="background:blue;">
<h1>My Footer Goes Here</h1>
</div>
#endsection
views/templates/master.blade.php
<!doctype>
<html>
<head>
<meta charset="UTF-8" />
#yield('meta_info')
<title>{{$title}}</title>
#yield('scripts')
</head>
<body>
<div id="header">
#yield('header')
</div>
<div id="wrapper">
#yield('content')
</div>
<div id="footer">
#yield('footer')
</div>
</body>
</html>
you must use #extends instead of #layout, and #stop instead of #endsection
Using #extends instead of #layout solved my problem.