Laravel - Blade Templates

Jan 14, 2022 - 05:37

0 17

Laravel 5.1 introduces the concept of using Blade , a templating engine for designing a unique layout. A layout designed in this way can be used by other views and includes a consistent design and structure.

Compared to other template engines, Blade is unique in the following ways:

This does not restrict the developer from using simple PHP code in views.
Blades rendered in this way are compiled and cached until changed.

This does not restrict the developer from using simple PHP code in views.

Blades rendered in this way are compiled and cached until changed.

The complete Laravel directory structure is shown in the screenshot provided here.

You may notice that all views are stored in the resources/views directory and the default view for the Laravel framework is welcome.blade.php .

Please note that other blade templates are also created in a similar way.

Steps to Create a Blade Template Layout

You will need to follow the following steps to create a blade template layout −

Step 1

Create a layout folder inside the resources/views folder . We are going to use this folder to keep all layouts together.
Create a filename master.blade.php which will have the following code associated with it:

Create a layout folder inside the resources/views folder . We are going to use this folder to keep all layouts together.

Create a filename master.blade.php which will have the following code associated with it:

<html> <head> <title> DemoLaravel - @yield('title') </title> </head> <body>
   
      
   
   
      @yield('content')
   </body> </html>

Step 2

At this point, you must extend the layout. The layout extension includes the definition of child elements. Laravel uses the Blade @extends directive to define child elements.

When extending the layout, pay attention to the following points:

The views defined in the Blade layout embed the container in a unique way.
The various view sections are created as child elements.
Child elements are stored in the layouts folder as child.blade.php

The views defined in the Blade layout embed the container in a unique way.

The various view sections are created as child elements.

Child elements are stored in the layouts folder as child.blade.php

An example demonstrating extending the layout created above is shown here −

@extends('layouts.app')
@section('title', 'Page Title')
@section('sidebar')
   @parent
<p>This refers to the master sidebar.</p>
@endsection
@section('content')
<p>This is my body content.</p>
@endsection

Step 3

In order to implement child elements in views, you must define the layout the way you want it.

Look at the screenshot shown here. You may find that each of the links mentioned on the landing page is a hyperlink. Note that you can also create them as children with blade templates using the procedure above.