Créer un dossier statique dans Flask
Nous apprendrons, avec cette explication, comment utiliser des actifs statiques ou des fichiers statiques à l’intérieur du répertoire statique. Nous apprendrons également comment importer notre fichier CSS personnalisé dans Flask.
Créer un dossier statique dans Flask
Dans une application Flask, il existe une manière étrange d’afficher des images et de les charger dans vos classes CSS personnalisées et d’utiliser votre JavaScript personnalisé. Alors, allons-y et commençons.
Puisque nous partons de zéro, nous allons créer un tout nouveau projet. Nous allons importer certaines classes de Flask, écrire le module en minuscules, puis créer un objet d’application.
from flask import Flask, render_template
app = Flask(__name__)
Nous allons créer une fonction de base pour la page d’accueil appelée index(). Nous définirons les deux racines dans les décorateurs individuels comme '/home' et '/'.
L’ajout de deux racines a pour but de vous montrer qu’on peut utiliser plus d’une route() dans une même fonction, ce qui signifie que ces deux routes différentes peuvent accéder à cette fonction.
Nous allons utiliser le mot clé return pour retourner le render_template() et passer le fichier home.html.
@app.route("/home")
@app.route("/")
def index():
return render_template("home.html")
Pour exécuter notre application, nous devons utiliser le code ci-dessous.
La méthode run() aidera à exécuter l’application Flask. Il faut passer le debug égal à True car on veut voir le débogage, mais vous pouvez le désactiver en écrivant False lorsque vous amenez votre site en production.
if __name__ == "__main__":
app.run(debug=True)
Maintenant, nous devons créer un dossier de modèles dans lequel nous placerons tous nos fichiers HTML ; pour ce faire, nous allons créer un nouveau dossier et l’appeler templates. Ensuite, nous devrons créer un autre nouveau dossier, que nous appellerons static.
Maintenant, nous pouvons peut-être déjà dire où nous allons mettre des fichiers spécifiques. Nous allons entrer dans le dossier templates et créer un nouveau fichier appelé base.html, puis nous en créerons un nouveau appelé home.html.
Écrivons un code HTML très basique à l’intérieur du fichier base.html, et dans le head, nous allons mettre en place un titre de bloc, et à l’intérieur de la balise body, nous ajouterons un autre contenu de bloc.
L’application Flask définit une valeur par défaut pour tous nos fichiers static, qui seront enregistrés dans le dossier appelé static, ce qui signifie que vous devez rendre ce dossier statique. Maintenant, nous allons référencer le nom de fichier spécifique que nous voulons ; nous allons passer {{ url_for('static',filename='style.css') }} à l’attribut href et mettre des guillemets doubles autour.
De cette façon, nous utiliserons le code Python dans la balise link pour saisir l’URL du dossier static, qui nous donnera l’URL, puis spécifiera le nom exact du fichier.
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='style.css') }}">
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Maintenant, nous avons notre modèle base. Étendons ce modèle base en utilisant le code jinja {% extends 'base.html' %} dans notre fichier home.html et utilisons quelques blocs pour accéder aux éléments base.html.
{% extends 'base.html' %}
{% block title %}
Home Page
{% endblock %}
{% block content %}
<h1> Home Page</h1>
{% endblock %}
Maintenant, nous allons parler de la création d’un fichier static à l’intérieur de notre répertoire static et comment nous pouvons importer notre CSS personnalisé. Nous devons créer un nouveau fichier CSS à l’intérieur de notre répertoire static et l’appeler style.css ; peu importe comment vous l’appelez.
Vous pouvez modifier le nom du fichier au lieu de l’extension, mais assurez-vous de vous souvenir du nom. Nous allons maintenant écrire juste un style de base dans le fichier style.css pour faire simple.
Nous allons définir un sélecteur CSS body, utiliser la propriété color, puis passer la valeur de couleur crimson.
body {color: crimson;}
Et nous avons terminé. Maintenant, nous sommes prêts à lancer cette application.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/home")
@app.route("/")
def index():
return render_template("home.html")
if __name__ == "__main__":
app.run(debug=True)
Maintenant, ouvrez un navigateur Web et accédez à la page d’accueil avec un titre.
Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.
LinkedIn