![[DJANGO] El uso de plantillas](https://programacionfacil.org/blog/wp-content/uploads/2023/04/django-curso.png.pagespeed.ce.m4He1-_wL7.png "[DJANGO] El uso de plantillas")
En este capítulo vas a ver de qué forma funcionan y para qué sirven las templates o plantillas de Django y los archivos estáticos.
¿Qué son las plantillas de Django?
Las templates (plantillas) de Django son archivos HTML que se utilizan para definir la estructura visual de las páginas web en un proyecto de Django. Estas templates permiten separar la lógica de la aplicación de la presentación visual, lo que hace que el desarrollo sea más sencillo y organizado.
Las plantillas de Django, las vamos a hacer con HTML.
El propósito principal de una página HTML, es definir la estructura de las páginas web. Sin embargo, es común que las templates de Django incluyan referencias a archivos CSS y JS utilizando etiquetas HTML estándar como <link> o <script>.
De esta forma, se puede definir el estilo visual y la funcionalidad interactiva de la página mediante archivos CSS y JS separados, lo que ayuda a mantener una estructura clara y organizada en el proyecto.
Crear la carpeta plantillas de Django
Vamos a crear la carpeta "templates" en la raíz de la aplicación:
En ella crearemos 3 páginas que van a reemplazar las sencillas solicitudes HTTP que hicimos anteriormente en el capítulo: Creando una app de varias URL con Django.
Te dejo por aquí el sencillo código:
inicio.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
<link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
</head>
<body>
<header>
<h1>Bienvenidos a mi página web</h1>
<nav>
<ul>
<li><a href="{% url 'inicio' %}">Inicio</a></li>
<li><a href="{% url 'pagina1' %}">Página 1</a></li>
<li><a href="{% url 'pagina2' %}">Página 2</a></li>
</ul>
</nav>
</header>
<main>
<h2>Contenido principal</h2>
<p>Este es el contenido principal de mi página web.</p>
</main>
</body>
</html>pagina1.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
<link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
</head>
<body>
<header>
<h1>Página 1</h1>
<nav>
<ul>
<li><a href="{% url 'inicio' %}">Inicio</a></li>
</ul>
</nav>
</header>
<main>
<h2>Contenido principal</h2>
<p>Esta es la página 1.</p>
</main>
</body>
</html>pagina2.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
<link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
</head>
<body>
<header>
<h1>Página 2</h1>
<nav>
<ul>
<li><a href="{% url 'inicio' %}">Inicio</a></li>
</ul>
</nav>
</header>
<main>
<h2>Contenido principal</h2>
<p>Esta es la página 2.</p>
</main>
</body>
</html>
Ahora explicaré esta sintaxis impropia de HTML que hay entre las llaves.
Nos vamos a ir al archivo views.py, el cual, si seguiste los capítulos anteriores, tendrás así:
from django.http import HttpResponse
def inicio(request):
return HttpResponse("¡Esta es la página de inicio!")
def pagina1(request):
return HttpResponse("Esta es la página 1.")
def pagina2(request):
return HttpResponse("Esta es la página 2.")La clase HttpResponse de Django
Antes de cambiar nada, ahora que ya he explicado bastante sobre HTTP, es el momento de explicar mejor este código.
Con el import de "HttpResponse", importo la clase HttpResponse del módulo http de Django.
¿Para qué sirve la clase HttpResponse?
HttpResponse es una clase que te permite enviar una respuesta HTTP desde el servidor (nuestro servidor local en esta práctica) a un cliente web (el navegador). Por ejemplo, si tu aplicación web necesita devolver un mensaje como los que ves en el código de arriba al navegador del usuario, HttpResponse puede ser utilizado para generar una respuesta HTTP con el contenido de la página y enviarla al navegador.
Esto de momento, nos ha venido bien para practicar de forma básica y poder mostrar mensajitos en el navegador, pero si queremos cargar un montón de líneas como los archivos html que acabamos de crear, esta forma sería horrible.
Entonces, necesitamos utilizar otra cosa de Django que sea capaz de cargar de una sola vez un archivo html completo.
El módulo render de Django
Borra todo el contenido del archivo views.py. Incluye la siguiente línea:
from django.shortcuts import render
Esto importará una función llamada render del módulo "shorcuts" de Django.
¿Para qué sirve render de Django?
La función "render" de Django se utiliza comúnmente en aplicaciones web Django para renderizar plantillas HTML y devolverlas como respuesta a una solicitud HTTP. Es decir, de forma similar, cargamos documentos enteros en lugar de simples solicitudes HTTP.
Añadimos funciones para cada página a cargar:
def inicio(request):
return render(request, 'inicio.html')
def pagina1(request):
return render(request, 'pagina1.html')
def pagina2(request):
return render(request, 'pagina2.html')Los archivos estáticos en Django
Lo siguiente que haremos, será cargar el archivo favicon en todas las páginas. Si ves el código HTML, verás que tiene un enlace al favicon en cada página.
En Django, cuando hablamos de archivos estáticos nos referimos a archivos de imagen, JS, CSS…
Entonces, el favicon, es un archivo estático que hay que cargar de manera especial.
Ves al archivo "settings.py" del proyecto de Django.
Asegúrate que tienes esta línea:
STATIC_URL = '/static/'
y en "INSTALLED_APPS" que está la línea: 'django.contrib.staticfiles'.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app_paginas'
]Lo siguiente, será crear una carpeta llamada "static", en la cual, vamos a poner los archivos estáticos. En ella, pondremos el favicon.
Cargar archivos estáticos generales para el proyecto
Es importante que sepas que si quieres, puedes tener una carpeta "static" para cada app del proyecto y una general para todos los archivos del proyecto.
En el archivo "settings.py", busca la constante STATIC_URL, si la tienes igual, no la toques, al menos de momento.
Por otro lado, incluye la ruta de la carpeta "static" del proyecto con la constante "STATICFILES_DIR".
No es necesario agregar la carpeta static de tu aplicación a STATICFILES_DIRS. Django automáticamente busca archivos estáticos en las carpetas 'static' de todas tus aplicaciones instaladas. Por lo tanto, si tienes una carpeta 'static' en la raíz de tu aplicación, Django la encontrará y utilizará automáticamente sin necesidad de agregarla a STATICFILES_DIRS.
STATICFILES_DIRS = [BASE_DIR / "static",] STATIC_URL = 'static/'
¿Qué es la constante BASE_DIR?
La constante BASE_DIR, sirve para indicar la ruta de la raíz del proyecto. Seguido, le añadimos la ruta a la carpeta "static".
Que no te confundan las constantes STATICFILES_DIRS Y STATIC_URL. La primera es la ruta de archivos, la segunda la URL que se va a formar para el archivo.
Aquí tienes la ruta del favicon.png:
Puedes cambiar el nombre de "STATIC_URL" si te ayuda a verlo mejor, sin embargo, por convención se deja en "static".
STATIC_URL = 'archivos_estaticos/'
Entonces, si tenemos una carpeta "static" con un favicon.png en la raíz del proyecto y otra en la raíz de la app, ¿cuál prevalecerá? Hagamos la prueba.
Piensa que si no recibes cambios de archivos estáticos como el favicon en el navegador, casi siempre es por culpa de la caché, algo muy bueno y malo a la vez, ya que nos permite acelerar las cargas futuras, pero puede ser muy molesto cuando hacemos pruebas de este tipo.
Te dejo los dos favicon para que te los descargues, por si no quieres buscarte o hacerte unos.
En la carpeta de la app tengo el icono rojo, en la del proyecto el azul. El color que prevalezca, será el que tomará siempre, excepto si hay algún problema con la carga.
Vemos que se ha cargado el que está en "BASE_DIR", en la raíz del proyecto. Esto quiere decir, que cualquier app que creemos, dentro de este mismo proyecto, si en su carpeta static no lleva un favicon, por defecto se va a cargar siempre este. De momento, vamos a dejar solo el que está en la propia app:
¿Cómo funcionan las rutas estáticas de Django?
Pasemos al último apartado de este capítulo. Veamos de qué forma funcionan las rutas estáticas de Django. Para ello, vamos a ir a la página HTML "inicio.html".
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
<link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
</head>
<body>
<header>
<h1>Bienvenido a mi página web</h1>
<nav>
<ul>
<li><a href="{% url 'inicio' %}">Inicio</a></li>
<li><a href="{% url 'pagina1' %}">Página 1</a></li>
<li><a href="{% url 'pagina2' %}">Página 2</a></li>
</ul>
</nav>
</header>
<main>
<h2>Contenido principal</h2>
<p>Este es el contenido principal de mi página web.</p>
</main>
</body>
</html>La primera línea "{% load static %}" es necesaria si vas a utilizar rutas estáticas, cosa que vas a necesitar si no vas a cargar solo html sin más.
En esta parte: "href="{% static 'favicon.png' %}"> "% static" se va a reemplazar por la URL 'static' allá donde la tengas configurada, no tienes que preocuparte por ella en ninguna de tus aplicaciones, lo que se traduce en, no más errores de rutas por olvidarse alguna parte de la ruta.
Después, estos "% url" van a ser reemplazados por las vistas correspondientes.
<li><a href="{% url 'inicio' %}">Inicio</a></li>
<li><a href="{% url 'pagina1' %}">Página 1</a></li>
<li><a href="{% url 'pagina2' %}">Página 2</a></li>La ruta de "href" va a ser remplazada por las rutas de urls.py:
urlpatterns = [
path('', views.inicio, name='inicio'),
path('pagina1/', views.pagina1, name='pagina1'),
path('pagina2/', views.pagina2, name='pagina2'),
]Y las vistas:
def inicio(request):
return render(request, 'inicio.html')
def pagina1(request):
return render(request, 'pagina1.html')
def pagina2(request):
return render(request, 'pagina2.html')Con lo que, finalmente, tenemos esas rutas también de forma inequívoca. ¿Qué tenemos 100 carpetas anidadas y queremos un enlace directo a la página de inicio que está en la raíz? Fácil: <a href="{% url 'inicio' %}">Inicio</a>.
Por cierto, a "% url" o "% static" se les conoce como etiquetas de plantilla.
Con todo esto, espero que hayas podido comprender un poco de qué manera funcionan las plantillas de Django y los archivos estáticos.
No te pierdas nada del curso de Máster en Python.
