Una de las ventajas que tiene usar un motor de plantillas como Blade es que podemos heredar y pasar datos entre vistas, y con eso reutilizar código, por ejemplo, usaremos una plantilla base la cual tendrá la estructura del HTML, los CSS, JS, el header (Menú), etc…
Esto nos permite tener la plantilla base con toda la estructura incluida, y luego crear páginas a partir de esta plantilla, lo cual nos permite reutilizar código, y no tener que incluir partes repetidas en cada vista.
Para eso crearemos una plantilla base llamada base.blade.php en el directorio resources/views de nuestro proyecto. El cual tendrá el siguiente código (Estructura básica de bootstrap 3):
resources/views/base.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
@yield('css')
</head>
<body>
<!-- Contenido -->
@yield('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
@yield('js')
</body>
</html>
Esta sera nuestra plantilla base, simple para hacer el ejercicio.
Si nos fijamos en el código vemos unas palabras escritas en Blade @yield, eso significa que podemos heredar esa posición con la palabra @section, ahora lo veremos con el ejemplo de herencia.
Creamos el archivo index.blade.php el cual heredará la estructura de base:
@extends('base')
@section('css')
@stop
@section('content')
<h1>Hello Blade!</h1>
@stop
@section('js')
@stop
Con la palabra @extends, heredamos la estructura del base, y con @section heredamos la posición en la que estaba ese @yield, para entendernos, lo que pongamos dentro de @section(‘content’) y @stop se pondrá en la posición del @yield(‘content’), de esta manera el código HTML de la vista index.blade.php es esta:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <!-- Contenido --> <h1>Hola Blade!</h1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
