Manejo de archivos estáticos en Django

Para poder emplear archivos estáticos en el proyecto, configuramos la siguiente variable:

customlogin\customlogin\settings.py

STATIC_URL = "static/"

Más información en:

https://docs.djangoproject.com/en/dev/howto/static-files/

Instalar Bootstrap y Fontawesome

En esta sección principalmente vamos a querer personalizar algunos templates y conocer sus comportamientos; una de las claves de esta personalización es que tenga un buen diseño, y es por eso que volveremos a emplear Bootstrap.

Comencemos instalando Bootstrap; al ser CodeIgniter un framework sin ninguna vinculación con Node, debemos de usar las CDN de Bootstrap la cual podemos obtener desde la página oficial:

https://getbootstrap.com/

Presionas sobre "Download" y luego nuevamente sobre "Download" en el siguiente apartado:

Pagina para descargar Bootstrap 5
Pagina para descargar Bootstrap 5

Bootstrap, al ser un framework web del lado del cliente, usa CSS y JavaScript para poder utilizar cualquier componente o funcionalidad de Bootstrap; una vez descargado el comprimido anterior y generada la carpeta (la cual, para simplificar el proceso, renombramos como bootstrap) necesitamos los siguientes archivos:

account/static/

<link rel="stylesheet" href="{% static 'bootstrap\css\bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'fontawesome\css\all.min.css' %}">

Que vamos a copiar dentro de la carpeta static del proyecto:

Genrarquia de carpetas en el proyecto
Genrarquia de carpetas en el proyecto

Figura 17-2: Bootstrap y Fontawesome instalados en el proyecto

Tambien instalamos la dependencias de popper que puedes obtener desde la misma página de Bootstrap; instalamos Fontawesome para la iconografía:

<link rel="stylesheet" href="{% static 'fontawesome\css\all.min.css' %}">

Recuerda descargar los archivos fuentes para web de manera gratuita de:

https://fontawesome.com/

Con Fontawesome tenemos acceso a múltiples iconos en SVG ya listos para emplear.

También existe un paquete específico para Django en el caso de que lo prefieras configurar de esa manera:

https://fontawesome.com/docs/web/use-with/python-django

Acepto recibir anuncios de interes sobre este Blog.

Veremos como emplear los archivos estáticos en Django, como lo son, CSS, JS y/o imágenes.

- Andrés Cruz

In english