Laravel 5: Blades – layout and extending layout

Blades: layout and extending layout

Blade is the simple templating engine provided with Laravel.

Let me steal some text from Laravel docs:
Unlike other popular PHP templating engines, Blade does not restrict you from using plain PHP code in your views.
In fact, all Blade views are compiled into plain PHP code and cached until they are modified.
Blade adds essentially zero overhead to your application.
Blade view files use the .blade.php file extension and are typically stored in the resources/views directory.

blade-html

A parent file gets content from child file.
There could be many children.

You access parent structure by navigating to child route.
Also, parent can have access to any dynamic data child’s controller sends to child view.

Also, child can be a parent to yet another file – and that process can continue as deep as you need.

pachl

So, to access row of relation ship shown above, you access it via Controller and Route associated with ‘last child‘.
All dynamic data provided by ‘last childController is accessible to all relatives above.
Any dynamic data provided by any Controller working with relatives above ‘last child’ is not accessible.

Is above ‘chaining’ of views is useful?
It all depends on need of your project.

And lets not forget about directives: @include and @includeIf.
More below in directives section.

So, there is a lot of flexibility.

One needs to remember:
  • child file must have relationship defined in it (on top) using directive: @extends(‘layouts.app’) 
  • directive argument is a relative path to /resources/views (using dot.notation) to parent file
  • there could be more than one child file extending same parent, but in such case @section parameter name must be unique
Lets take a look at structural directives.
@extends(‘relative.path.to.parent’)

Used in: child file.
This directive resides on top of child file.
Directive argument is a relative path to /resources/views (using dot.notation) to parent file
It defines parent file, that can use content of child file using @extends directive.

@yield(‘parameter’)

Used in: parent file.
Pulls content from child file.
This content can be a simple string, or variable – but also it can be a HTML powered section with dynamic content.
Pulled content is defined in child file by @section directive.
Both, @yield and @section from which @yield pulls content share the same parameter name.

@section(‘parameter’) …

Used in child file.
An open-ended @section directive is used to define string, or variable.
Example: see tag <title>App Name … </title>  in image on top of this page.

@section(‘parameter’) … @endsection

Used in child file.
This element defines more complex sections that consist of HTML, dynamic data etc.

@section(‘parameter’) … @show

Used in parent file.
This element is used in parent file to mix parent file content with defined by child @section content.
Example (also see image on top of this page):

@include(‘parameter’)

Used in target file.
Just like PHP includes(), it allows to pull another blade file into one, where this directive resides in.
Example:

@includeIf(‘parameter’)

Used in target file.
If you use @include on view that does not exists, Laravel will throw an error.
To avoid error throws, use this variation.

@push(‘parameter’) … @endpush   |  @stack(‘parameter’)

Sometimes you may need to dynamically pull some JS lib, or even CSS file for given blade, or even blade partial included, or yielded.
Push|stack to the rescue.

In <head> of your main, skeleton blade template, e.g. app.php, put this code:

Now, in any pulled/child blade partial, you can add this directive:

… and @stack will pull it dynamically for you.

You can push as many scripts, as you want to stack.

Neat.

@inject(‘param’, ‘param’)

Sometime you may want to inject some data from Service Container – just like you do in controller.
Here’s how you can do it directly in blade:

I am not sure, if I like it.
Reminds me ‘spaghetti code’ from early PHP time.
Remember osCommerce?

But, I guess, it could be useful once awhile.

custom blade directives

If you are interested, see here.