# ¿Qué es Blade?

Blade es un motor de plantillas simple y a la vez poderoso proporcionado por Laravel. A diferencia de otros motores de plantillas populares de PHP, Blade no te impide utilizar código PHP plano en tus vistas. De hecho, todas las vistas de Blade son compiladas en código PHP plano y almacenadas en caché hasta que sean modificadas, lo que significa que Blade no añade sobrecarga a tu aplicación. Los archivos de las vistas de Blade tienen la extensión .blade.php y son usualmente almacenados en el directorio resources/views.

Fuente: Plantillas Blade – Documentación de Laravel 6

Las plantillas en Blade pueden diseñarse usando el formato de componentes o herencia. En el caso de los componentes se construyen fragmentos reutilizables en las vistas mientras que en el caso de herencia se usa un documento base al que se agrega nuevo contenido.

# Diseñando plantilla con herencia.

Es la forma primaria en que Laravel construye plantillas.

<!-- 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>

En la referencia de plantillas blade en Laravel puede verse el ejemplo anterior. Considere:

El @section() indica una sección dinámica en la plantilla. Esta sección puede cargar otro archivo blade en ese espacio. El @yield() es algo similar a un campo de dato, en la cuál se carga directamente un contenido. La diferencia sería que yield es el valor del dato que se inserta y section es todo un fragmento de contenidos. En el ejemplo la línea 5 tiene un yield para sustituir el título de la página, un simple texto, mientras que la línea 8 tiene un section para cargar un menú de navegación que es una lista de links. En la línea 10 está la directiva @show() que hace visible la sección.

Dicho de otra forma, el section tiene la estructura del fragmento de contenido que se inserta. El archivo que es insertado indica su propia estructura. En el caso de yield la estructura es definida en el layout así que en el archivo que es insertado no necesariamente indica que es el fragmento.

El ejemplo anterior es el contenido de la plantilla blade

Una vez creada la plantilla blade se deben crear entonces las vistas del proyecto que se deben basar en dicha plantilla. En ese caso se utiliza la directiva @extends() que indica que la vista que está creándose es una extensión de otra vista, la que es la plantilla. En otras palabras, la página que crees ahora deberá ser hijo de la página anterior para que herede el diseño.

<!-- 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

En la página hijo iría el contenido particular de la página. Todas las secciones se indican como @section() ya sea un yield o un section lo que se esté referenciando. En el ejemplo anterior la línea 3 realiza la extensión para indicar que esta página se basa en el archivo app que está en el directorio layouts dentro de la carpeta views. La línea 5 muestra cómo se carga contenido en un yield, indicando cuál es el nombre del yield primero y segundo el valor que se le quiere asignar. En la línea 7 y hasta la 11 se indica una sección que es nombrada sidebar en la plantilla base. En este fragmento delimitado por @section() y @endsection() se puede colocar todo el código HTML y directivas Blade que se deseen. La línea 8 con la directiva @parent() indica que lo que hubiese escrito en la plantilla base con dicho nombre será sobreescrito por lo que hay en esta sección.

# Ejemplo de plantilla

Usando el ejemplo del anecdotario diseñaremos una plantilla personalizada.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body>
       @section('contenido') 

       @show
       
</html>

El código anterior es muy básico pero ilustra la idea de una plantilla: la cabecera de la plantilla de ejemplo de laravel se conserva para utilizar tailwind css como herramienta de estilo y el body completo es sustituido por una sección llamada contenido. En este caso la página que tenga el contenido deberá incluir toda la estructura de etiquetas correspondientes.

@extends('layouts.anecdot')

@section('contenido')

<h1 class="text-2xl">Bienvenido al anecdotario</h1>
                    <div class="mt-10">
                    <a href="" class="bg-slate-500 text-white p-6">¿qué historia puedes contarme?</a>
                    </div>
                    <div class="mt-10">
                        <h2 class="text-xl">Tus anécdotas</h2>
                        <ul>
                            @foreach($autor->anecdotas as $anecdota)
                            <li><a href="{{url('/anecdota/{id}',[$anecdota->id])}}">{{$anecdota->titulo}}</a></li>
                            @endforeach
                        </ul>
                    </div>
@endsection

El mismo resultado se conseguiría con yield solo que la plantilla debiera indicar la estructura en la cuál se está guardando el contenido. Algo así:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body>
        <section id="contenidoPrincipal">
            @yield('contenido');
        </section>
    </body>
       
</html>

Y la página hijo no tendría cambios:

@extends('layouts.anecdot')

@section('contenido')


<h1 class="text-2xl">Bienvenido al anecdotario</h1>
                    <div class="mt-10">
                    <a href="" class="bg-slate-500 text-white p-6">¿qué historia puedes contarme?</a>
                    </div>
                    <div class="mt-10">
                        <h2 class="text-xl">Tus anécdotas</h2>
                        <ul>
                            @foreach($autor->anecdotas as $anecdota)
                            <li><a href="{{url('/anecdota/{id}',[$anecdota->id])}}">{{$anecdota->titulo}}</a></li>
                            @endforeach
                        </ul>
                    </div>
@endsection

El resultado final sería:

Vista de la página hijo creada por herencia