Domina las Plantillas en Django

Las plantillas en Django son una herramienta esencial para la generación de HTML dinámico en una aplicación web. Django incluye un sistema de plantillas que permite separar la lógica de la presentación, lo cual facilita el mantenimiento y la reutilización del código.

Lenguaje de Plantillas de Django

El lenguaje de plantillas de Django es un motor de plantillas diseñado para ser fácil de usar y eficiente. Se utiliza para generar dinámicamente contenido HTML basado en datos pasados desde las vistas. Las plantillas están formadas por etiquetas, variables y filtros.

Sintaxis Básica

En las plantillas de Django, se utilizan delimitadores especiales:

  • Variables: Se denotan con {{ variable }}. Estas son expresiones que se evaluarán en el contexto y se reemplazarán por su valor.
  • Etiquetas: Se denotan con {% etiqueta %}. Las etiquetas realizan diversas funciones como control de flujo, bucles y filtros.
  • Comentarios: Se denotan con {# comentario #}. Son utilizados para agregar comentarios en el código de plantilla que no se mostrarán en la salida final.

Ejemplo de Plantilla Básica

html 
<!-- template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ title }}</title>
</head>
<body>
  <h1>Bienvenido, {{ user.name }}</h1>
  <p>{{ message }}</p>
</body>
</html>

Variables, Filtros y Etiquetas en Plantillas

1Variables

Las variables en Django se reemplazan por el valor correspondiente pasado desde la vista. Las variables pueden ser de cualquier tipo de datos: cadenas, enteros, listas, diccionarios, etc.

html 
<!-- template.html -->
<p>Hola, {{ user.username }}. Tienes {{ user.points }} puntos.</p>

En este caso, si la vista pasa un diccionario user con los valores username='Carlos' y points=120, la salida sería:

html 
<p>Hola, Carlos. Tienes 120 puntos.</p>

2Filtros

Los filtros permiten modificar el valor de las variables. Se aplican utilizando el símbolo pipe (|).

3Filtros Comunes

  • lower: Convierte el texto a minúsculas.
  • default: Establece un valor predeterminado si la variable es None o está vacía.
  • length: Devuelve la longitud de una lista o cadena.
html 
<!-- template.html -->
<p>Nombre: {{ user.name|lower }}</p>
<p>Descripción: {{ user.description|default:"Sin descripción" }}</p>
<p>Lista de productos: {{ products|length }} productos disponibles</p>

4Etiquetas

Las etiquetas permiten realizar operaciones complejas como la creación de bucles o condicionales.

5Condicionales

html 
<!-- template.html -->
{% if user.is_authenticated %}
  <p>Bienvenido, {{ user.username }}!</p>
{% else %}
  <p>Por favor, inicie sesión.</p>
{% endif %}

6Bucles

El bucle for es útil para iterar sobre una lista.

html 
<!-- template.html -->
<ul>
  {% for product in products %}
      <li>{{ product.name }} - ${{ product.price }}</li>
  {% endfor %}
</ul>

7Expresión de Ciclo con empty

El ciclo for también puede manejar el caso cuando la lista está vacía usando empty.

html 
<!-- template.html -->
<ul>
  {% for product in products %}
      <li>{{ product.name }}</li>
  {% empty %}
      <li>No hay productos disponibles.</li>
  {% endfor %}
</ul>

Inclusión y Herencia de Plantillas

Inclusión de Plantillas

La inclusión de plantillas permite reutilizar fragmentos de código en varias plantillas. Puedes incluir otras plantillas utilizando la etiqueta {% include %}.

Ejemplo de Inclusión: Supongamos que tienes una plantilla de navegación en un archivo nav.html:

html 
<!-- nav.html -->
<nav>
  <ul>
      <li><a href="/">Inicio</a></li>
      <li><a href="/about">Acerca de</a></li>
  </ul>
</nav>

Puedes incluirla en cualquier otra plantilla:

html 
<!-- template.html -->
<!DOCTYPE html>
<html>
<head>
  <title>{{ title }}</title>
</head>
<body>
  {% include 'nav.html' %}
  <h1>Contenido principal</h1>
</body>
</html>

Herencia de Plantillas

La herencia de plantillas es una característica poderosa que permite crear una plantilla base y luego extenderla en otras plantillas. Esto es útil para mantener un diseño común en toda la aplicación, como una barra de navegación o pie de página.

Plantilla Base

html 
<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}Mi Sitio{% endblock %}</title>
</head>
<body>
  <header>
      <h1>Bienvenidos a mi sitio web</h1>
  </header>
  <div>
      {% block content %}{% endblock %}
  </div>
</body>
</html>

Plantilla Extendida

html 
<!-- home.html -->
{% extends 'base.html' %}

{% block title %}Página de Inicio{% endblock %}

{% block content %}
  <p>Contenido de la página de inicio.</p>
{% endblock %}

Casos de Uso Comunes

1Crear una lista de elementos con enlaces dinámicos
html 
<!-- product_list.html -->
<ul>
  {% for product in products %}
      <li><a href="{% url 'product_detail' id=product.id %}">{{ product.name }}</a></li>
  {% empty %}
      <li>No hay productos disponibles.</li>
  {% endfor %}
</ul>
2Mostrar un mensaje de éxito en una página
html 
<!-- success.html -->
{% if success_message %}
  <div class="alert alert-success">
      {{ success_message }}
  </div>
{% endif %}
3Mostrar una lista de comentarios con sus autores
html 
<!-- comments.html -->
{% for comment in comments %}
  <p><strong>{{ comment.author }}:</strong> {{ comment.content }}</p>
{% empty %}
  <p>No hay comentarios aún.</p>
{% endfor %}
  Conclusión

El sistema de plantillas de Django es poderoso y flexible, permitiendo separar la lógica de presentación del resto de la aplicación. Conociendo bien el uso de variables, filtros, etiquetas, y las técnicas de inclusión y herencia de plantillas, puedes construir aplicaciones web robustas y fáciles de mantener.