Volver a la página principal
miércoles 16 octubre 2024
15

Cómo usar el motor de plantillas en Django

El motor de plantillas de Django es una herramienta que permite generar HTML dinámico combinando código HTML con datos proporcionados desde las vistas. Este motor facilita la separación de la lógica del negocio y la presentación de los datos en la interfaz web, siguiendo el patrón de diseño MTV (Modelo-Template-Vista).

¿Qué es el Template Engine en Django?

El Template Engine en Django procesa archivos de plantilla (normalmente con extensión .html) que contienen tanto HTML como etiquetas, variables y filtros de Django para inyectar contenido dinámico. Esto permite mostrar datos provenientes de la base de datos, realizar bucles, condicionales, y más, directamente en los archivos de presentación.

Funcionalidades del motor de plantillas

  • Variables: Muestra datos dinámicos.
  • Etiquetas: Controlan la lógica, como bucles o condicionales.
  • Filtros: Modifican los datos antes de presentarlos (ej. formatear fechas).

Uso básico del motor de plantillas

1. Configurar plantillas en Django:

Asegúrate de que la configuración de plantillas esté definida en el archivo settings.py:

TEMPLATES = [
       {
           'BACKEND': 'django.template.backends.django.DjangoTemplates',
           'DIRS': [BASE_DIR / 'templates'],
           'APP_DIRS': True,
           'OPTIONS': {
               'context_processors': [
                   # Procesadores de contexto estándar
               ],
           },
       },
   ]

2. Crear una plantilla HTML:

Dentro de la carpeta templates, puedes crear un archivo como index.html con HTML y sintaxis de Django.

Ejemplo básico:

<h1>¡Bienvenido, {{ usuario }}!</h1>
   <p>La fecha actual es: {{ fecha_actual|date:"d/m/Y" }}</p>

Variables en plantillas

Las variables en plantillas son marcadas usando dobles llaves {{ }}. Por ejemplo, si pasas un objeto usuario desde la vista, puedes mostrarlo así:

<p>Hola, {{ usuario.nombre }}</p>

Etiquetas en plantillas

Las etiquetas permiten agregar lógica, como condicionales o bucles. Se utilizan con {% %}.

1. Condicionales:

{% if usuario.es_admin %}
       <p>¡Tienes acceso de administrador!</p>
   {% else %}
       <p>Bienvenido, usuario.</p>
   {% endif %}

2. Bucles:

<ul>
   {% for persona in personas %}
       <li>{{ persona.nombre }} - {{ persona.edad }} años</li>
   {% endfor %}
   </ul>

Filtros en plantillas

Los filtros modifican el contenido de una variable antes de mostrarlo. Por ejemplo, formatear fechas o convertir texto a mayúsculas.

Ejemplos:

  • Formatear fecha:
{{ fecha_actual|date:"d M Y" }}
  • Convertir texto a mayúsculas:
{{ usuario.nombre|upper }}

Incluir plantillas

Django permite incluir otras plantillas dentro de una principal, lo que facilita la reutilización de código.

Ejemplo de incluir un archivo de cabecera:

{% include "partials/cabecera.html" %}

Herencia de plantillas

Django permite heredar plantillas para compartir elementos comunes como cabeceras, pies de página, etc.

Ejemplo de plantilla base:

<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Mi sitio{% endblock %}</title>
</head>
<body>
    {% block content %}
    <!-- Contenido principal -->
    {% endblock %}
</body>
</html>

Ejemplo de plantilla que hereda:

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

{% block title %}Página principal{% endblock %}

{% block content %}
<h1>Bienvenido a mi sitio</h1>
<p>Contenido de la página principal</p>
{% endblock %}

Algunos ejemplos

1. Pasar datos a una plantilla desde la vista:

from django.shortcuts import render
   from datetime import datetime

   def inicio(request):
       contexto = {
           'usuario': 'Juan',
           'fecha_actual': datetime.now(),
       }
       return render(request, 'inicio.html', contexto)

2. Herencia de plantillas con bloques de contenido:

  • base.html: Define bloques para personalizar en plantillas hijas.
  • about.html: Extiende base.html y sobrescribe el bloque content.

Referencia oficial

Para más información sobre el motor de plantillas de Django, visita la documentación oficial de Django.

Compartir:
Creado por:
Author photo

Jorge García

Fullstack developer