Archivos Estáticos en Django¶
1. Introducción a los Archivos Estáticos¶
En una aplicación web, los archivos estáticos son aquellos que no cambian durante la interacción con el usuario, tales como:
- Archivos CSS (para el diseño de la página).
- Archivos JavaScript (para la funcionalidad en el cliente).
- Imágenes (como logotipos o iconos).
Django tiene un sistema incorporado para gestionar estos archivos y servirlos correctamente. Por defecto, Django busca los archivos estáticos en una carpeta llamada static, donde guardaremos todos nuestros recursos estáticos como CSS, JS e imágenes.
2. Configuración de Archivos Estáticos en Django¶
2.1 Definir la ubicación de los archivos estáticos¶
Django busca los archivos estáticos en carpetas static/ dentro de las aplicaciones y en el directorio de nivel superior del proyecto. Vamos a configurar esto en el archivo settings.py.
-
En
settings.py, Django ya tiene definida la configuración para los archivos estáticos:Esto indica que los archivos estáticos se servirán desde la URL# settings.py STATIC_URL = 'static/'static/. -
También debemos configurar una ubicación global para los archivos estáticos en el proyecto. Si no existe en
settings.py, añade la siguiente línea para definir la carpeta donde estarán los archivos estáticos:# settings.py STATICFILES_DIRS = [ BASE_DIR / "static", # Carpeta estática en la raíz del proyecto ]
Con esto, Django sabrá dónde buscar los archivos estáticos durante el desarrollo.
3. Crear la carpeta static/¶
En la raíz de tu proyecto, crea una carpeta llamada static/ donde colocarás tus archivos estáticos. Dentro de ella, puedes crear subcarpetas como css/, js/ e images/ para organizar mejor los recursos.
mi_sitio/
static/
css/
style.css
js/
script.js
images/
logo.png
4. Acceder a los Archivos Estáticos en las Plantillas¶
Una vez que hemos configurado correctamente los archivos estáticos, podemos acceder a ellos en nuestras plantillas HTML usando el {% static %} de Django.
-
Primero, en la parte superior de tus plantillas HTML, debes cargar el etiquetado de archivos estáticos:
{% load static %}Esto permite que Django reconozca la etiqueta
{% static %}y pueda incluir correctamente los archivos estáticos en la página. -
Ahora puedes utilizar la etiqueta
{% static %}para incluir archivos CSS, JavaScript o imágenes en tu plantilla.
Ejemplo de CSS y JavaScript en las plantillas¶
Plantilla HTML:
Vamos a llamar a la página static_sample.html. Una opción sería llamar a todo static pero como es una palabra reservada en Django, mejor usar otro nombre.
<!-- templates/static_sample.html -->
{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Sitio Web</title>
<!-- Enlazamos el archivo CSS estático -->
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
<h1>Bienvenido a mi sitio web</h1>
<p>Este es un ejemplo sencillo de Django con archivos estáticos.</p>
<!-- Enlazamos el archivo JavaScript estático -->
<script src="{% static 'js/script.js' %}"></script>
</body>
</html>
Ahora vamos a modificar nuestro proyecto con una nueva ruta '/static' para que muestre esta plantilla. Así luego podremos ver que efectivamente carga los archivos estáticos.
Para ello, en el archivo views.py de tu aplicación, añade la siguiente vista:
# views.py
from django.shortcuts import render
def staticSample(request):
return render(request, 'static.html')
Luego, en el archivo urls.py de tu aplicación, añade la ruta para esta vista:
# urls.py
from django.urls import path
from .views import mostrar_static
urlpatterns = [
path('static_sample/', staticSample, name='static_sample'),
]
Ahora ponemos el servidor en marcha:
python manage.py runserver
Por último comprobamos que funciona visitando http://127.0.0.1:8000/static_sample/.
5. Ejemplo de un archivo CSS sencillo¶
Crea un archivo CSS en static/css/style.css con algo de estilo básico:
/* static/css/style.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
Este CSS cambiará el estilo de la página, haciendo que el fondo sea gris claro y el texto del título tenga color oscuro.
6. Ejemplo de un archivo JavaScript sencillo¶
Crea un archivo JavaScript en static/js/script.js:
// static/js/script.js
window.onload = function() {
alert("¡Bienvenido a mi sitio web!");
}
Este script mostrará un mensaje de alerta cuando la página se cargue.
7. Verificar el funcionamiento¶
- Levanta el servidor si aún no está en marcha:
python manage.py runserver
- Visita
http://127.0.0.1:8000/en tu navegador y verás la página cargada con el archivo CSS aplicado y el JavaScript ejecutado.
8. Resumen¶
En este tema hemos aprendido cómo trabajar con archivos estáticos en Django. Hemos visto cómo configurar la carpeta static/, cómo referenciar archivos CSS y JavaScript en las plantillas, y cómo acceder a ellos utilizando la etiqueta {% static %}. Los archivos estáticos nos permiten mejorar la apariencia y funcionalidad de nuestras aplicaciones web, manteniendo separados los recursos estáticos y dinámicos.
Ejercicio práctico¶
Ejercicio
Objetivo: Crear una página web con un título y un párrafo. Mediante un archivo CSS, cambia el color de fondo de la página y el estilo del texto. Además, añade un archivo JavaScript que muestre un mensaje de alerta cuando se cargue la página.
Solución
# views.py
def bienvenida(request):
return render(request, 'bienvenida.html')
<!-- templates/bienvenida.html -->
{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Bienvenida</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
<h1>Bienvenido a mi sitio web</h1>
<script src="{% static 'js/script.js' %}"></script>
</body>
</html>
body {
background-color: lightblue;
font-family: 'Arial', sans-serif;
}
h1 {
text-align: center;
color: #333;
}
p {
font-size: 18px;
color: #666;
text-align: center;
}
window.onload = function() {
alert("¡Bienvenido a mi sitio web!");
}