Dar estilo a una aplicación Flask

Introducción

En este laboratorio, aprenderemos cómo agregar CSS a nuestra aplicación Flask para que sea visualmente atractiva. Usaremos archivos estáticos, específicamente un archivo CSS, para dar estilo a nuestra aplicación. Los archivos estáticos son archivos que no cambian, como archivos CSS, archivos JavaScript e imágenes.

Nota: Debes crear el archivo de código por ti mismo y ejecutarlo en el entorno. Puedes previsualizar el estado del servicio Flask en Web 5000.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL flask(("Flask")) -.-> flask/DataHandlingGroup(["Data Handling"]) flask(("Flask")) -.-> flask/CoreConceptsGroup(["Core Concepts"]) flask/DataHandlingGroup -.-> flask/incoming_request_data("Incoming Request Data") flask/DataHandlingGroup -.-> flask/response_objects("Response Objects") flask/CoreConceptsGroup -.-> flask/application_object("Application Object") flask/CoreConceptsGroup -.-> flask/useful_internals("Useful Internals") subgraph Lab Skills flask/incoming_request_data -.-> lab-136339{{"Dar estilo a una aplicación Flask"}} flask/response_objects -.-> lab-136339{{"Dar estilo a una aplicación Flask"}} flask/application_object -.-> lab-136339{{"Dar estilo a una aplicación Flask"}} flask/useful_internals -.-> lab-136339{{"Dar estilo a una aplicación Flask"}} end

Crear archivo CSS

Primero, necesitamos crear un archivo CSS que contendrá nuestros estilos. En Flask, los archivos estáticos se almacenan en un directorio llamado static. Vamos a crear un archivo CSS llamado style.css en el directorio flaskr/static.

## Navegar al directorio estático
cd flaskr/static

## Crear el archivo style.css
touch style.css

Agregar reglas CSS

A continuación, copie las siguientes reglas CSS al archivo style.css. Estas reglas darán estilo a varios elementos HTML en nuestra aplicación.

/* flaskr/static/style.css */

html {
  font-family: sans-serif;
  background: #eee;
  padding: 1rem;
}
body {
  max-width: 960px;
  margin: 0 auto;
  background: white;
}
/* Más reglas CSS... */

Vincular el archivo CSS en HTML

Ahora, necesitamos vincular nuestro archivo CSS en las plantillas HTML. Flask agrega automáticamente una vista static que sirve archivos estáticos. Podemos usar la función url_for en la plantilla base.html para vincular nuestro archivo CSS.

<!-- base.html -->

{{ url_for('static', filename='style.css') }}

Verificar los cambios

Para verificar los cambios, inicie su aplicación Flask y vaya a la página de inicio de sesión en http://127.0.0.1:5000/auth/login. La página ahora debería estar estilizada de acuerdo con las reglas del archivo style.css.

Resumen

En este laboratorio, aprendimos cómo agregar estilos a nuestra aplicación Flask utilizando un archivo CSS. Creamos un archivo CSS, agregamos algunas reglas CSS y luego vinculamos el archivo CSS en nuestras plantillas HTML utilizando la función url_for de Flask. Ahora, nuestra aplicación Flask se ve mucho más atractiva visualmente. Recuerde que si hace cambios a un archivo estático, es posible que deba actualizar la página del navegador o limpiar la memoria caché de su navegador para ver los cambios.