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

- Andrés Cruz

In english
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.