Herencia de Plantillas
Cuando se construye un sitio web, normalmente se suele hacer una plantilla base, que tendrá la estructura básica de la plantilla, es decir, recogerá todo lo que quieres que tengan en común todas tus plantillas. A la plantilla base se le suele llamar base.html. Esto es muy útil, ya que nos va a ahorrar mucho tiempo y escritura de código.
Por ejemplo, en nuestro sitio web todas las páginas tendrán la misma cabecera, barra de navegación y pie de página que será común a todas, solo variará el contenido de la parte principal. Si no existiera la herencia tendríamos que escribir el código html de los elementos comunes en cada una de las páginas, pero con esto, lo que haremos será escribir el código de ellos en una plantilla base o padre y usaremos ese código en todas las páginas hijas que hagamos.
Plantillas Incrustadas.
Antes de afrontar el tema de la herencia de plantillas vamos a parar un momento para ver un tema relacionado, como es el de incrustar código html que este en otro archivo:
{% include "nombre_archivo_html" %}
donde "nombre_archivo_html" contendrá el código a insertar.
¿Por qué hacer esto?
La respuesta es que si tenemos elementos individuales, como puede ser la barra de navegación, cuyo código esta en un archivo a parte del principal, si algún día tenemos que modificarlos (por ejemplo añadir más páginas a la barra de navegación) es más fácil de hacer en un código breve que tenemos controlado, que no buscar dentro de un archivo, que en nuestra caso no porque nuestra plantilla base es muuuuy sencilla, pero que en una página profesional podría tener miles de lineas de código.
Sigamos trabajando y de paso repasamos algunos conceptos ya vistos.
Lo primero creamos nuestro directorio de trabajo, el archivo de Flask que tendrá la aplicación y los directorios para las plantillas html (templates) y contenido estático (static)
El archivo inicio.py, tendrá una única vista, que es la primera que veremos nada mas ejecutar la aplicación. En ella se rendizará la plantilla base.html.
El código de base.html, que como ya hemos dicho tiene que estar en la carpeta "templates", quedaría:
Como ves, en la línea 15, insertamos el código de la barra de navegación con:
{% include "nav.html" %}
El código html de la barra de navegación, que también está guardado dentro de la carpeta "templates" con el nombre de "nav.html" sería:
Si hubiéramos creado otra carpeta dentro de "templates" y lo hubiéramos guardado allí, habría que especificar su ruta relativa dentro de las comillas.
Bien, si ejecutamos la aplicación de Flask con:
$python3 inicio.py
El resultado sería el que esperábamos, es decir:
Herencia de Plantillas.
La plantilla base.html va a ser nuestra plantilla padre. La vamos a utilizar para construir tres plantillas hijas, que heredarán los elementos comunes de su padre (header, barra de navegación y footer), y que se corresponderán con cada una de las páginas de nuestro sitio web. (Inicio, Pagina Uno, Sobre Nosotros). Sin embargo, ten en cuenta que si una plantilla hija tiene algún elemento que también este definido en la plantilla padre, los elementos de esta última prevalecerán sobre las de la plantilla padre.
Por ejemplo, en la plantilla padre has definido un determinado footer y en la hija otro distinto, el footer de la plantilla hija prevalece sobre la de la padre. No habrá herencia.
Empecemos modificando la plantilla base.html que ya tenemos para indicar las partes o bloques que las otras plantillas pueden escribir. Si tuviéramos hoja de estilos tendríamos que definirlas aquí. En este fichero incluiremos los bloques:
{% block title %} {% endblock %}
{% block content %} {% endblock %}
para definir el titulo y el contenido de las páginas hijas.
Lo que hacemos es crear una plantilla cuyo código html haremos que se repita en las demás, pero dejaremos los bloques que hemos comentado anteriormente para que cada una de las páginas hijas escriba ahí su propio código. Puedes usar tantos bloques como necesites, no tienes que limitarte a estos dos.
base.html
Inicio.py
En el archivo de vistas hemos creado las vistas para cada una de las páginas.
Como ya hemos definido las diferentes vistas, tenemos que modificar el archivo nav.html que contiene el menú de navegación, que hemos incluido en el código al principio del capítulo. Tiene que recoger la dirección de cada una de las páginas, lo que haremos utilizando el método url_for.
nav.html
Y AHORA VIENE LA GRACIA DEL ASUNTO....
Si te fijas la plantilla padre, base.html, tiene 20 líneas de código y sin contar las de la barra de navegación que están aparte en el archivo nav.html. Pues bien, si no usáramos herencia, tendríamos que copiar todo esto en cada una de las páginas que diseñemos junto con las modificaciones necesarias para que mostrarán lo que queremos que aparezcan en cada una de ellas. Sin embargo usando la herencia:
inicio.html
Esta primera plantilla hija la comenzamos diciendo que use la plantilla padre con la instrucción:
{% extends "base.html" %}
Para continuar reescribiendo los dos bloques, con lo que estamos diciendo al programa que busque estos bloques en la plantilla padre y que los sustituya por los que hemos puesto en esta plantilla.
El primero {% block title %} {% endblock %} modifica el título de la vista de inicio.
El segundo {% block content %} {% endblock %} mostrará el contenido propio de la página de inicio.
pagina_uno.html
Exactamente como antes. Heredamos el código de la plantilla "base.html"
{% extends "base.html" %}
y definimos los bloques se se insertarán y que se mostrarán en el diseño de la Página Uno (título y contenido)
sobre_nosotros.html
Lo mismo que en los casos anteriores.
Ejecuta el programa y comprueba como funcionan cada una de las vistas.
Vista o página
Vista para
Vista para
Baste decir que todos los archivos html están el directorio "templates"
No hay comentarios:
Publicar un comentario