Este tutorial comienza donde dejó **Create Some Automated Tests**. Hemos construido una aplicación de sondeo web probada y ahora agregaremos una hoja de estilos y una imagen.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
django(("Django")) -.-> django/CoreConfigurationandRoutingGroup(["Core Configuration and Routing"])
django/CoreConfigurationandRoutingGroup -.-> django/applications("Applications")
subgraph Lab Skills
django/applications -.-> lab-153746{{"Agregar una hoja de estilos y una imagen"}}
end
Personaliza el aspecto de tu app
Primero, crea un directorio llamado static en tu directorio polls. Django buscará archivos estáticos allí, de manera similar a cómo Django encuentra templates dentro de polls/templates/.
La configuración STATICFILES_FINDERS de Django contiene una lista de buscadores que saben cómo descubrir archivos estáticos a partir de diferentes fuentes. Uno de los valores predeterminados es AppDirectoriesFinder que busca un subdirectorio "static" en cada una de las INSTALLED_APPS, como el que creamos recientemente en polls. El sitio de administración utiliza la misma estructura de directorios para sus archivos estáticos.
Dentro del directorio static que acabas de crear, crea otro directorio llamado polls y dentro de ese crea un archivo llamado style.css. En otras palabras, tu hoja de estilos debe estar en polls/static/polls/style.css. Debido a cómo funciona el buscador de archivos estáticos AppDirectoriesFinder, puedes referirte a este archivo estático en Django como polls/style.css, de manera similar a cómo referenciar la ruta para templates.
Espaciado de nombres de archivos estáticos
Al igual que con los templates, podríamos poder evitar poner nuestros archivos estáticos directamente en polls/static (en lugar de crear otro subdirectorio polls), pero en realidad sería una mala idea. Django elegirá el primer archivo estático que encuentre cuyo nombre coincida, y si tuvieras un archivo estático con el mismo nombre en una diferente aplicación, Django no sería capaz de distinguir entre ellos. Necesitamos poder indicar a Django cuál es el correcto, y la mejor manera de garantizar esto es mediante el espaciado de nombres. Es decir, al poner esos archivos estáticos dentro de otro directorio nombrado con el nombre de la aplicación misma.
Pon el siguiente código en esa hoja de estilos (polls/static/polls/style.css):
li a {
color: green;
}
Luego, agrega lo siguiente al principio de polls/templates/polls/index.html:
La etiqueta de plantilla {% static %} genera la URL absoluta de los archivos estáticos.
Eso es todo lo que necesitas hacer para el desarrollo.
Inicia el servidor (o reinícialo si ya está en ejecución):
python manage.py runserver 0.0.0.0:8080
Recarga la pestaña Web 8080 y deberías ver que los enlaces de las preguntas son de color verde (¡estilo Django!), lo que significa que tu hoja de estilos se cargó correctamente.
Agregando una imagen de fondo
A continuación, crearemos un subdirectorio para las imágenes. Crea un subdirectorio images en el directorio polls/static/polls/. Dentro de este directorio, agrega cualquier archivo de imagen que desees usar como fondo. Con fines de este tutorial, estamos usando un archivo llamado background.png, que puedes encontrar en el directorio /tmp/background.png en la VM.
Necesitas copiar el /tmp/background.png a polls/static/polls/images/background.png.
Luego, agrega una referencia a tu imagen en tu hoja de estilos (polls/static/polls/style.css):
body {
background: white url("images/background.png") no-repeat;
}
Recarga la pestaña Web 8080 y deberías ver que el fondo se ha cargado en la esquina superior izquierda de la pantalla.
La etiqueta de plantilla {% static %} no está disponible para su uso en archivos estáticos que no son generados por Django, como tu hoja de estilos. Debes siempre usar rutas relativas para enlazar tus archivos estáticos entre sí, porque entonces puedes cambiar STATIC_URL (utilizado por la etiqueta de plantilla static para generar sus URLs) sin tener que modificar un montón de rutas en tus archivos estáticos también.
Estos son los conceptos básicos. Para obtener más detalles sobre la configuración y otros aspectos incluidos en el framework, consulta the static files howto </howto/static-files/index> y the staticfiles reference </ref/contrib/staticfiles>. Deploying static files </howto/static-files/deployment> discute cómo usar archivos estáticos en un servidor real.
Cuando te sientas cómodo con los archivos estáticos, lee Customizing Django's Admin Site para aprender cómo personalizar el sitio de administración automáticamente generado por Django.
Resumen
¡Felicidades! Has completado el laboratorio de Agregar una hoja de estilos y una imagen. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.
