Ahora vamos a agregar algo de estilo a nuestra aplicación de publicaciones que hemos estado construyendo. Django sigue las convenciones para localizar archivos e imágenes estáticos, al igual que tiene convenciones para la mayoría de las cosas. En Django, puede tener archivos estáticos compartidos en todo un proyecto o por aplicación. En este tutorial, configuraremos un directorio estático dentro de nuestra aplicación dada. Luego, usaremos la etiqueta de plantilla estática para hacer uso de archivos estáticos dentro de la aplicación, como archivos CSS, archivos de imagen y archivos JavaScript.


STATICFILES_DIRS

Lo primero que desea hacer es configurar la constante STATICFILES_DIRS en settings.py. Vamos a almacenar nuestros archivos e imágenes estáticos en un directorio llamado static. Por lo tanto, agregamos el siguiente fragmento al final del archivo settings.py.

STATIC_URL ya está configurado de forma predeterminada, pero debe agregar manualmente esa configuración STATICFILES_DIRS.

Diseño de directorio

Dentro del directorio de la aplicación, podemos agregar un directorio estático además del directorio de la plantilla.

archivos estáticos de django por aplicación

Observe que dentro de la postscarpeta de la aplicación, hay una staticcarpeta. Dentro de la carpeta estática, necesitamos un espacio de nombres como lo hacemos con la carpeta de plantillas. Entonces podemos colocar nuestros archivos estáticos en esta estructura.

  • publicaciones / estática / publicaciones
  • Nuestras plantillas se ubican utilizando esta estructura.

  • publicaciones / plantillas / publicaciones
  • Esto es para asegurarse de que cada vez que Django busca archivos en diferentes aplicaciones, esté usando la correcta si dos archivos tienen el mismo nombre.


    Configurar una plantilla base

    Una vez más, usaremos la herencia de plantillas de Django para configurar una plantilla base llamada base.html.

    posts / templates / posts / layout / base.html

    En el fragmento de arriba, estamos usando la etiqueta de plantilla estática para construir la URL para la ruta relativa dada. Para usar esto, primero necesitamos cargarlo usando {% load static%} . A partir de ahí, podemos crear una URL de destino usando algo como {% static “posts / css / bootstrap.min.css”%} .


    Ampliación de Base.html

    Ya tenemos un archivo en nuestra aplicación que muestra una lista de publicaciones de blog en el sistema. Vimos esto en el tutorial de Django ModelsAhora vamos a actualizar el archivo post_list.html para que amplíe el archivo base.html que acabamos de mencionar anteriormente.

    posts / templates / posts / post_list.html

    Al usar la línea de código {% extensions “./layout/base.html”%} , ahora estamos haciendo uso del Html y los archivos estáticos incluidos de base.html. También hemos cambiado el marcado en post_list.html para hacer uso de clases de arranque. Esto crea un resultado bastante atractivo.

    lista de blogs de django


    Resumen de imágenes y archivos estáticos de Django

    Podemos usar archivos estáticos e imágenes con Django para darle a nuestras aplicaciones una mejor apariencia para el usuario final. Configurar archivos estáticos para desarrollo local es bastante fácil y puede consultar la documentación para conocer los pasos sobre cómo preparar un entorno de producción.