Una descripción general rápida sobre la «Herencia de Plantillas»...
...y por qué es una mejor forma de crear páginas web.
La «Herencia de Plantillas» es una forma poderosa de organizar la estructura de archivos de tu sitio web y reducir el "repetitivo" en tus plantillas html.
Creación de una plantilla de esqueleto Html
Cuando se trata de seleccionar un creador de sitios web, la mayoría de las soluciones ofrecen un sistema de plantillas que admite una variedad de etiquetas, filtros, variables y expresiones.
La mayoría de las páginas web utilizan una plantilla de sitio general combinada con plantillas de página individuales para garantizar que todas las páginas tengan la misma apariencia y componentes compartidos, como un encabezado, barras laterales y un pie de página. De esa manera, puede crear una "plantilla de esqueleto html" común que lo ayude a estructurar tus páginas.
Incluir contenido de otros archivos
Los sistemas de plantillas proporcionan un mecanismo para incluir o hacer referencia a bloques html en otras plantillas html, p. puede usar "renderizar" si está usando plantillas de Jekyll/Liquid, "parcial" si está usando plantillas de Hugo/Go y, de manera similar, Kit55/JinJa2 proporciona la etiqueta "importar".
La forma en que funciona esta etiqueta de "importación" es reemplazando la etiqueta o expresión en tu plantilla html original con el contenido de un archivo externo.
P.ej.,
{% incluye “templates/post.tpl.html” %}
será reemplazado con el contenido del archivo
templates/post.tpl.html
:
<h1>{{post.title}}</h1>
<p>{{post.body}}</p>De esta manera, puede mantener los bloques de código compartidos en archivos separados, lo que hace que el mantenimiento sea más conveniente y el desarrollo más fácil en general.
Otra forma de estructurar las páginas de tu sitio web
Pero existe una alternativa a “incluir” bloques de código. Algunos sistemas de plantillas también proporcionan "«Herencia de Plantillas»", que es una forma diferente de estructurar las páginas de un sitio web. Template Inheritance ha sido utilizado durante años especialmente por frameworks de programación en el ecosistema de Python.
Plantillas Django, plantillas Flask y otros sistemas de plantillas que usan Jinja2
Muchos marcos de codificación de Python como Flask o Django aprovechan las plantillas similares a Jinja2 que proporcionan «Herencia de Plantillas». Pylons/Pyramid, otro marco de trabajo de Python, viene con plantillas de Mako que también son compatibles con la «Herencia de Plantillas». Las plantillas de Django son muy similares a las plantillas de Jinja2 pero tienen algunas pequeñas diferencias.
Además, las versiones recientes de Angular brindan "Proyección de contenido", que puede verse como una evolución de la «Herencia de Plantillas» en un entorno de aplicación de una sola página más complejo.
¿Qué es la «Herencia de Plantillas»??
La «Herencia de Plantillas» es un patrón que se parece a las técnicas de programación orientada a objetos, en el que los bloques de contenido se insertan dentro de otras plantillas html.
Permite crear una plantilla base que contiene todos los elementos comunes de un sitio y define "ranuras" o "bloques" que las plantillas secundarias pueden anular.
Entonces, en lugar del uso tradicional de etiquetas "incluir" para administrar partes de plantillas, puede heredar el contenido de una plantilla a otra y cambiar bloques de contenido.
Trabajar con plantillas se vuelve simple y eficiente, ya que cada plantilla solo contiene las diferencias de la plantilla que extiende.
Por ejemplo, la plantilla base.tpl.html define un esqueleto HTML simple que incluye todo el código HTML repetitivo común a todas las páginas, además de un encabezado y un pie de página. También define tres "ranuras" o "bloques" para que las plantillas "secundarias" las llenen:
- El título de la página
- Un menú de navegación secundario
- Un bloque de contenido
<html>
<head>
<link rel="stylesheet" href="static/style.css">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<nav class="primary-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
{% block secondNav %}{% endblock %}
{% block content %}{% endblock %}
</body>
</html>Ahora, una página de plantilla secundaria “inicio.html” , puede ser tan fácil como:
{% extends "templates/base.tpl.html" %}
{% block title %}Home{% endblock %}
{% block secondNav %}
<nav class="secondary-nav">
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</nav>
{% endblock %}
{% block content %}
Hello, this is my content block
{% endblock %}Cualquier número de plantillas secundarias se puede encadenar en múltiples niveles de herencia.
Puede mantener una plantilla base con toda la plantilla html, luego una segunda plantilla que podría definir un diseño de una sola columna y una plantilla final que aloje el contenido.
Alternativamente, las plantillas pueden tener diferentes diseños heredados de la misma base, como una plantilla de dos columnas.
«Herencia de Plantillas» y programación orientada a objetos
Como se vio anteriormente, la «Herencia de Plantillas» se apoya en gran medida en las técnicas de programación orientada a objetos.
El contenido de una plantilla puede ser heredado por una plantilla secundaria, que es un concepto muy similar a la extensión de una clase en la programación orientada a objetos; De manera similar, cambiar bloques de contenido es similar a anular métodos de una clase.
Una última similitud con la programación orientada a objetos: puede definir el contenido predeterminado de un bloque en la plantilla "principal". Entonces la plantilla "hijo" puede usar el {{ super() }} etiqueta para representar el contenido del bloque principal (puede hacer esto si usa Jinja2 como tu sistema de plantillas).
¿Debería usar «Herencia de Plantillas»?
El uso de la «Herencia de Plantillas» para organizar tu página web simplifica y limpia tus plantillas. Hace que trabajar con plantillas sea eficiente y repetitivo mínimo.
La «Herencia de Plantillas» permite una organización de archivos de plantilla más flexible, ya que puede definir tantos niveles de herencia como necesite, pero también requiere pensar un poco más al planificar cómo organizar los activos de tu sitio web.
Las plantillas de Jinja son relativamente desconocidas en el espacio de creación de sitios web, ya que se utilizan casi exclusivamente en marcos de programación de Python, a pesar de ser más potentes que la mayoría de los sistemas de plantillas y lenguajes que se utilizan actualmente para crear sitios web, incluido WordPress.
La mejor manera de saber si la «Herencia de Plantillas» es para usted es creando una página con ella.
Kit55 viene con Jinja2/Nunjucks y es completamente compatible. Además, hemos reunido algunas plantillas de muestra que utilizan la «Herencia de Plantillas». Puedes descargarlos aquí.