Styler une application Flask

Introduction

Dans ce laboratoire, nous allons apprendre à ajouter du CSS à notre application Flask pour la rendre visuellement attrayante. Nous utiliserons des fichiers statiques, plus précisément un fichier CSS, pour styliser notre application. Les fichiers statiques sont des fichiers qui ne changent pas, tels que les fichiers CSS, les fichiers JavaScript et les images.

Note : Vous devez créer le fichier de code vous-même et l'exécuter dans l'environnement. Vous pouvez prévisualiser l'état du service Flask sur Web 5000.

Skills Graph

Créer un fichier CSS

Tout d'abord, nous devons créer un fichier CSS qui contiendra nos styles. Dans Flask, les fichiers statiques sont stockés dans un répertoire nommé static. Créons un fichier CSS nommé style.css dans le répertoire flaskr/static.

## Accédez au répertoire static
cd flaskr/static

## Créez le fichier style.css
touch style.css

Ajouter des règles CSS

Ensuite, copiez les règles CSS suivantes dans le fichier style.css. Ces règles vont styliser divers éléments HTML de notre application.

/* flaskr/static/style.css */

html {
  font-family: sans-serif;
  background: #eee;
  padding: 1rem;
}
body {
  max-width: 960px;
  margin: 0 auto;
  background: white;
}
/* Plus de règles CSS... */

Lier le fichier CSS dans le HTML

Maintenant, nous devons lier notre fichier CSS dans les modèles HTML. Flask ajoute automatiquement une vue static qui sert les fichiers statiques. Nous pouvons utiliser la fonction url_for dans le modèle base.html pour lier notre fichier CSS.

<!-- base.html -->

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

Vérifier les modifications

Pour vérifier les modifications, lancez votre application Flask et accédez à la page de connexion à l'adresse http://127.0.0.1:5000/auth/login. La page devrait maintenant être stylisée selon les règles du fichier style.css.

Sommaire

Dans ce laboratoire, nous avons appris à ajouter des styles à notre application Flask en utilisant un fichier CSS. Nous avons créé un fichier CSS, ajouté quelques règles CSS, puis lié le fichier CSS dans nos modèles HTML en utilisant la fonction url_for de Flask. Maintenant, notre application Flask a l'air bien plus attrayante visuellement. Rappelez-vous, si vous apportez des modifications à un fichier statique, vous devrez peut-être rafraîchir la page du navigateur ou effacer le cache de votre navigateur pour voir les modifications.