Django: Django Templates

Descubre cómo usar Django templates para crear HTML dinámico con sintaxis, filtros, etiquetas y herencia en aplicaciones web seguras y eficientes.

Django Templates

Los templates en Django constituyen el componente fundamental para generar contenido HTML dinámico en aplicaciones web. Representan la capa de presentación del patrón Model-View-Template (MVT) que utiliza Django, separando la lógica de negocio del diseño visual.

Un template es esencialmente un archivo HTML que contiene marcadores especiales que Django procesa para insertar datos dinámicos. Esta separación permite que desarrolladores y diseñadores trabajen de forma independiente, manteniendo el código Python alejado del HTML.

Sistema de plantillas de Django

Django incluye su propio motor de plantillas que proporciona una sintaxis simple pero potente para crear contenido dinámico. Este sistema está diseñado para ser seguro por defecto, escapando automáticamente el contenido para prevenir ataques de inyección XSS.

La filosofía del sistema de templates de Django se basa en mantener la lógica mínima dentro de las plantillas. A diferencia de otros sistemas que permiten código Python completo, Django limita intencionalmente las operaciones disponibles para fomentar la separación de responsabilidades.

Sintaxis básica de templates

Los templates de Django utilizan una sintaxis especial con llaves dobles y llaves con porcentajes para distinguir el contenido dinámico del HTML estático:

<!DOCTYPE html>
<html>
<head>
    <title>{{ titulo_pagina }}</title>
</head>
<body>
    <h1>Bienvenido, {{ usuario.nombre }}</h1>
    {% if usuario.es_premium %}
        <p>Tienes acceso premium</p>
    {% endif %}
</body>
</html>

Las variables se encierran entre {{ }} y se evalúan insertando su valor en el HTML final. Las etiquetas de template utilizan {% %} y controlan la lógica de renderizado, como condicionales y bucles.

Variables y contexto

El contexto es un diccionario que contiene las variables disponibles en un template. Estas variables se pasan desde las vistas y pueden incluir datos de modelos, cadenas de texto, números o cualquier objeto Python:

# En la vista
def perfil_usuario(request):
    usuario = {
        'nombre': 'Ana García',
        'edad': 28,
        'activo': True
    }
    return render(request, 'perfil.html', {'usuario': usuario})

<!-- En el template -->
<div class="perfil">
    <h2>{{ usuario.nombre }}</h2>
    <p>Edad: {{ usuario.edad }} años</p>
    <span class="estado">
        {% if usuario.activo %}Activo{% else %}Inactivo{% endif %}
    </span>
</div>

Django permite acceder a atributos de objetos y elementos de diccionarios usando la notación de punto. Si usuario fuera un objeto modelo, podrías acceder a sus campos de la misma manera: {{ usuario.email }}.

Filtros de template

Los filtros modifican el valor de las variables antes de mostrarlas. Se aplican usando el símbolo pipe (|) y pueden encadenarse para aplicar múltiples transformaciones:

<p>Publicado el {{ fecha_publicacion|date:"d/m/Y" }}</p>
<h3>{{ titulo|title|truncatewords:10 }}</h3>
<div>{{ contenido|linebreaks|safe }}</div>

Algunos filtros útiles incluyen:

date: formatea fechas según un patrón específico
title: convierte texto a formato título
truncatewords: limita el número de palabras mostradas
linebreaks: convierte saltos de línea en etiquetas HTML <p> y <br>
safe: marca contenido como seguro, evitando el escape automático

Etiquetas de control

Las etiquetas de template proporcionan lógica de control como condicionales y bucles. La etiqueta {% for %} permite iterar sobre listas y conjuntos de datos:

<ul class="productos">
    {% for producto in productos %}
        <li class="producto">
            <h4>{{ producto.nombre }}</h4>
            <p class="precio">${{ producto.precio }}</p>
            {% if producto.en_oferta %}
                <span class="oferta">¡En oferta!</span>
            {% endif %}
        </li>
    {% empty %}
        <li>No hay productos disponibles</li>
    {% endfor %}
</ul>

La cláusula {% empty %} se ejecuta cuando la lista está vacía, proporcionando una alternativa elegante para manejar conjuntos de datos sin elementos.

Herencia de templates

La herencia es una característica fundamental que permite crear una estructura base y extenderla en templates específicos. Esto elimina la duplicación de código HTML común como headers, footers y navegación:

<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block titulo %}Mi Sitio{% endblock %}</title>
    <link rel="stylesheet" href="/static/css/estilos.css">
</head>
<body>
    <nav>
        <!-- Navegación común -->
    </nav>
    
    <main>
        {% block contenido %}
        {% endblock %}
    </main>
    
    <footer>
        <!-- Footer común -->
    </footer>
</body>
</html>

<!-- pagina_producto.html -->
{% extends "base.html" %}

{% block titulo %}{{ producto.nombre }} - Mi Sitio{% endblock %}

{% block contenido %}
    <div class="producto-detalle">
        <h1>{{ producto.nombre }}</h1>
        <p>{{ producto.descripcion }}</p>
        <p class="precio">${{ producto.precio }}</p>
    </div>
{% endblock %}

Los bloques definidos con {% block %} actúan como marcadores de posición que los templates hijos pueden sobrescribir o extender, creando una estructura flexible y mantenible.