Laravel Blade Templates

Blade is the powerful templating engine in Laravel Framework and it makes the syntax writing very easy. Blade allow us to 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 view files use the .blade.php file extension and are typically stored in the resources/views directory.

Benefits of using Blade are template inheritance and sections. First, we'll examine a "master" page layout. Since most web applications maintain the same general layout across various pages, it's convenient to define this layout as a single Blade view:

<!-- Stored in resources/views/layouts/app.blade.php -->

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

The @section directive, as the name implies, defines a section of content, while the @yield directive is used to display the contents of a given section.

Extending A Layout

When defining a child view, use the Blade @extends directive to specify which layout the child view should "inherit". Views which extend a Blade layout may inject content into the layout's sections using @section directives. Remember, as seen in the example above, the contents of these sections will be displayed in the layout using @yield:

<!-- Stored in resources/views/child.blade.php -->

@extends('layouts.app')

@section('title', 'Page Title')

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection

The @yield directive also accepts a default value as its second parameter. This value will be rendered if the section being yielded is undefined:

@yield('content', View::make('view.name'))

Blade views may be returned from routes using the global view helper:

Route::get('blade', function () {
    return view('child');
});