Blade es el motor generador de plantillas de Laravel, nos permite crear las vistas o pantallas de nuestra aplicación de una forma elegante.
El único requisito que debemos tener para usar Blade es que nuestras vistas tengan la extensión blade.php por ejemplo home-blade.php.
Todas las vistas de nuestra aplicación están almacenadas en el path resources/views.
Blade no restringe el uso de php plano es sus vistas, de hecho todas las vistas blade son compiladas en php plano y se encuentran en el path storage/framework/views.
Para poder mezclar html y php laravel nos provee de algunas directivas que nos permiten inyectar código php en las vistas con Blade.
<!-- Con {{ }} nos permite imprimir nuestras variables PHP haciendo un escape de HTML-->
{{ $name }}
<!-- Con {!! !!} nos permite imprimir nuestras variables PHP sin un escape de HTML-->
{!! $content !!}
Una de las ventajas más importantes de Blade es la posibilidad de definir layouts y reutilizar secciones de código esto lo podemos hacer de 2 formas con herencia de plantillas y con componentes.
DEFINICIÓN DE LAYOUTS BLADE BASADOS EN HERENCIA
Las plantilllas en laravel funcionan como una MasterPage que lo que hace es definir la estructura base de nuestras vistas, las plantillas estarán ubicadas en el path resources/views/layouts.
Por convención deberíamos tener 2 layouts uno llamado app.blade.php destinado a los usuarios autentificados de nuestra aplicación y guest.blade.php para los invitados.
**Hablaremos más tarde de la autentificación de usuarios.
Por ahora vamos a crear la plantilla app.blade.php dentro de resources/views/layouts.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
<meta name="description" content="@yield('meta-description','valor por defecto')">
</head>
<body>
@yield('content')
{{ $name }}
{!! $content !!}
</body>
</html>
Aquí podemos observar que tenemos un html simple más la directiv yield() que nos permite definir una sección dinámica en este caso estamos haciendo dinámicos el title de la página con @yield(‘title’), la meta description con el @yield(‘meta-description’) y el cuerpo con el yield(‘content’)
EXTENDIENDO DE NUESTRA PLANTILLA APP.BLADE.PHP
Ahora vamos a usar la plantilla desde una vista y veremos cómo sobre escribir la directiva @yield para hacer dinámica nuestra vista
@extends('layouts.app')
@section('title','Home')
@section('meta-description','Aquí deberías poner una descripción para posicionamiento SEO')
@section('content')
<h1>AQUÍ VA EL CUERPO</h1>
@endsectionCómo podemos ver tenemos un código más limpio y pequeño, lo primero que hacemos es extender de nuestro layout con @extends(‘layouts.app’) y nota que las directivas @yield aquí las indicamos con @section.
Algo interesante a notar es que @section(‘content’) tienen etiqueta de apertura y cierre mientras que title y meta-description esto es debido que estas últimas sólo imprimen un string, mientras que content espera HTML.