En esta segunda entrada hablaremos con un poco mas de detalle de las plantillas en Blade.
Laravel utiliza archivos llamados plantillas o template, los cuales contienen código que se repite en mas de una vista (menú, footer etc). Por defecto Laravel contiene app.blade.php
También están los partials, son segmentos pequeños de código, usados en partes especificas como los formularios. La diferencia con los template es que son código pequeño que se repite pero que no es tan grande para llamarse template.
Template
Podemos crear mas de un template en nuestro proyecto, nuestro template principal (encabezado y footer) la cual es conocida como pagina maestra.
En el ejemplo la pagina maestra solo contiene el menú y footer.Para crear nuestra vista usamos como normalmente HTML.
Sin embargo hay algunas consideramos que debemos de tomar en cuenta.
1.Adjuntar CSS
HTML <link rel="stylesheet" href="style.css">
BLADE <link rel="stylesheet"href="{{asset('css/style.css') }}"/>
2.Adjuntar Imágenes
HTML<img src="img/archivo.png">
BLADE <imgclass="logoin"src="{{asset ('img/archivo.png')}}"/>
3.Incluir JS
HTML <script src="js/myscript.js"></script>
BLADE <script src="{{ asset('js/myscript.js') }}"></script>
Ejemplo de Pagina Maestro
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="{{asset ('img/logoinf.png')}}" sizes="any">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>La Ventana</title>
<link rel="stylesheet" href="{{asset('css/style.css') }}" />
</head>
<body>
<nav>
<img class="logo" src="{{asset ('img/logosup.png')}}"/>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Conoce el Proyecto</a></li>
<li><a href="#">Mi Kit</a></li>
<li><a href="#">Videos</a></li>
<br clear="all" />
</ul>
<a id="pull" href="#">LaVentana</a>
</nav>
<div id="content" >
<div id="info">
@yield('contenido')
</div>
</div>
<footer>
<div id="footerinf">
</div>
<img class="logoin" src="{{asset ('img/logoinf.png')}}"/>
</footer>
Implementar Template
El siguiente paso es utilizar nuestro template y llenar con la información que necesitemos. En el HTML del template podemos encontrar esta parte:
<div id="info">
@yield('contenido')
</div>
@extends('principal')
@section('contenido')
<div class="slider">
<ul>
<li>
<img src= "{{asset ('img/banner/banner3.jpeg')}}" />
<span>
<p>El video participativo como herramienta </p>
<p>de convivencia de niños y niñas</p>
</span>
</li>
<li>
<img src="{{asset ('img/banner/g5.jpeg')}}" />
</li>
<li>
<img src="{{asset ('img/banner/g4.jpg')}}" />
</li>
</ul>
</div>
<div id="mid_content">
<h1>La Ventana</h1>
<p>El video como herramientas de convivencia de niños y niñas </p>
</div>
@stop
En este ejemplo podemos notar que no tiene encabezado ni body <html>, </html> ,<body>, solo contiene lo especifico para colocar imágenes y un párrafo.
De esta manera el espacio que dejamos como @yield(‘contenido’) en la plantilla (pagina maestra) se llena con lo que se encuentra entre @section (‘contenido’) y @stop de nuestro archivo nuevo.
Partials
Como se menciono antes son semejantes a un template con la diferencia en la cantidad de código que se utiliza.
@extends('principal')
@section('confi')
@include('partials.lista')
@stop
@extends(‘principal’) indica la plantilla que usaremos, @section(‘confi’) es la misma función que en el archivo anterior. @include(‘partials.lista.blade’) indica el archivo partials que utilizaremos para mostrar.
De esta manera podemos crear nuestro pagina maestra y cambiar el contenido de acuerdo a nuestra necesidad. También nos ayuda a mantener un orden en nuestros archivos y hace mas fácil la edición de nuestro código.
Espero que esta información les ayuda sido de ayuda si tienen alguna duda o comentario pueden dejarlo en los comentarios.
Entrada anterior Laravel:Creación de Vistas con Blade I