Archivos estáticos

Las vistas y plantillas de autenticación funcionan, pero ahora mismo tienen un aspecto muy sencillo. Se puede añadir algo de CSS para añadir estilo al diseño HTML que has construido. El estilo no cambiará, por lo que es un archivo estático en lugar de una plantilla.

Flask añade automáticamente una vista static que toma una ruta relativa al directorio flaskr/static y la sirve. La plantilla base.html ya tiene un enlace al archivo style.css:

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

Además de CSS, otros tipos de archivos estáticos pueden ser archivos con funciones de JavaScript, o una imagen de logotipo. Todos ellos se colocan en el directorio flaskr/static y se referencian con url_for('static', filename='...').

Este tutorial no se centra en cómo escribir CSS, así que puedes copiar lo siguiente en el archivo flaskr/static/style.css:

flaskr/static/style.css

html { font-family: sans-serif; background: #eee; padding: 1rem; }
body { max-width: 960px; margin: 0 auto; background: white; }
h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
a { color: #377ba8; }
hr { border: none; border-top: 1px solid lightgray; }
nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; }
nav h1 { flex: auto; margin: 0; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
.content { padding: 0 1rem 1rem; }
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
.post > header > div:first-of-type { flex: auto; }
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
.post .about { color: slategray; font-style: italic; }
.post .body { white-space: pre-line; }
.content:last-child { margin-bottom: 0; }
.content form { margin: 1em 0; display: flex; flex-direction: column; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
input.danger { color: #cc2f2e; }
input[type=submit] { align-self: start; min-width: 10em; }

Puedes encontrar una versión menos compacta de style.css en el código de ejemplo.

Vaya a http://127.0.0.1:5000/auth/login y la página debería ser como la captura de pantalla de abajo.

Puede leer más sobre CSS en la documentación de Mozilla. Si cambia un archivo estático, actualice la página del navegador. Si el cambio no aparece, prueba a borrar la caché del navegador.

Continuar con Blog Blueprint.