Uso de Templates y Archivos Estáticos en Django

¿Cómo Funciona el Template de Django?

En Django, los templates son archivos HTML que contienen placeholders de datos dinámicos. Django usa su sistema de plantillas para generar el HTML final que el navegador del usuario verá. Los templates permiten mezclar HTML con lógica de presentación, lo que facilita la separación de la lógica de negocio y la interfaz de usuario.

placeholders en Django

En Django, los placeholders son marcas especiales dentro de los templates que se reemplazan dinámicamente con datos durante la renderización. Estas marcas utilizan la sintaxis de Django Template Language (DTL), como:

1Variables:

Para mostrar datos dinámicos. Se escriben entre [object Object], por ejemplo:

python

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

Aquí, {{ usuario.nombre }} se reemplaza con el valor de nombre del objeto usuario.

2Etiquetas (tags):

Para lógica o control de flujo, como bucles o condicionales. Se escriben entre {% %}, por ejemplo:

python

{% for post in posts %}
      <li>{{ post.titulo }}</li>
  {% endfor %}

Estas herramientas permiten integrar datos dinámicos y lógica simple directamente en las vistas de Django, facilitando la creación de contenido web personalizado.

Estructura Básica de un Template

html

<!-- archivo template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ title }}</title>
</head>
<body>
  <h1>{{ title }}</h1>
  <p>{{ content }}</p>
</body>
</html>

Renderizado de un Template en una Vista

views.py

python

from django.shortcuts import render

def my_view(request):
  context = {'title': 'Mi página', 'content': 'Este es el contenido dinámico.'}
  return render(request, 'template.html', context)

Django usa el archivo de template (template.html) y le pasa el contexto para reemplazar los placeholders con los datos dinámicos. En este ejemplo, {{ title }} y {{ content }} se reemplazarán con los valores proporcionados en el diccionario context.

Archivos Estáticos en Django

Los archivos estáticos son aquellos que no cambian, como imágenes, hojas de estilo (CSS), archivos JavaScript, fuentes, etc. Django proporciona una forma de gestionar y servir estos archivos para su uso en el front-end de la aplicación.

Configuración de Archivos Estáticos en Django: Para habilitar el manejo de archivos estáticos en Django, debes asegurarte de tener configuradas las siguientes opciones en el archivo settings.py:

settings.py

python

STATIC_URL = '/static/'

# Para producción, configura también STATIC_ROOT
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

Colocando Archivos Estáticos

Django busca archivos estáticos en la carpeta static/ dentro de cada aplicación de Django. Por ejemplo, podrías colocar tu CSS dentro de un archivo static/css/style.css.

Estructura del proyecto:

bash

my_project/
  my_app/
      static/
          css/
              style.css
  templates/
      my_template.html
  views.py
  settings.py

Uso de Archivos Estáticos en un Template

Para referenciar archivos estáticos en los templates, debes usar la etiqueta {% static %}. Primero, asegúrate de cargar el tag de static al principio del archivo de template:

html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ title }}</title>
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
  <h1>{{ title }}</h1>
  <p>{{ content }}</p>
</body>
</html>

Utilizar una Plantilla para Renderizar una Página

En Django, las vistas pueden usar plantillas para renderizar páginas completas. Puedes usar funciones o vistas basadas en clases para procesar los datos y devolver el HTML generado por el template. Ejemplo de Vista para Renderizar un Template

Archivo views.py

python

from django.shortcuts import render

def home_view(request):
  context = {'title': 'Página de inicio', 'content': 'Bienvenido a nuestra página web.'}
  return render(request, 'home.html', context)

Configuración de URLs

Archivo urls.py

python

from django.urls import path
from . import views

urlpatterns = [
  path('', views.home_view, name='home'),
]

Servir Archivos Estáticos en Django

Durante el desarrollo, Django puede servir archivos estáticos automáticamente. Sin embargo, en producción, necesitarás un servidor web como Nginx o Apache para servir estos archivos.

Configuración de Archivos Estáticos en el Servidor de Desarrollo

Asegúrate de que tu urls.py esté configurado para servir archivos estáticos durante el desarrollo:

Archivo urls.py (en desarrollo)

python

from django.conf import settings
from django.conf.urls.static import static
from django.urls import path

urlpatterns = [
  # otras rutas...
]

if settings.DEBUG:
  urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Crear una Plantilla Base y Estilos

Usar una plantilla base en Django permite evitar la repetición de código común en todas las páginas. Por ejemplo, puedes tener una plantilla base que incluya el HTML básico y un lugar para insertar el contenido de las páginas específicas.

Ejemplo de Plantilla Base (base.html)

html

<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}Mi Sitio{% endblock %}</title>
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
  <header>
      <nav>
          <a href="/">Inicio</a>
          <a href="/about">Acerca de</a>
      </nav>
  </header>
  <main>
      {% block content %}
      {% endblock %}
  </main>
  <footer>
      <p>&copy; 2024 Mi Sitio Web</p>
  </footer>
</body>
</html>

Ejemplo de Página Específica que Extiende la Plantilla Base (home.html)

html

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

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

{% block content %}
<h1>Bienvenidos a la Página de Inicio</h1>
<p>Este es el contenido dinámico de la página de inicio.</p>
{% endblock %}

Conclusión

Django proporciona un sistema de templates flexible que facilita la separación de la lógica de presentación y la lógica de negocio. Utilizar plantillas base y archivos estáticos mejora la estructura y el mantenimiento de tu aplicación web. Además, Django permite gestionar y servir archivos estáticos de manera eficiente durante el desarrollo y producción.