Flask
Fichiers statiques
Recherche…
Utiliser des fichiers statiques
Les applications Web nécessitent souvent des fichiers statiques tels que des fichiers CSS ou JavaScript. Pour utiliser des fichiers statiques dans une application Flask, créez un dossier appelé static dans votre package ou à côté de votre module et il sera disponible sur /static dans l'application.
Un exemple de structure de projet pour l'utilisation de modèles est le suivant:
MyApplication/
/static/
/style.css
/script.js
/templates/
/index.html
/app.py
app.py est un exemple de base de Flask avec un rendu de modèle.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
Pour utiliser le fichier CSS et JavaScript statiques dans le modèle index.html, nous devons utiliser le nom spécial de noeud final "statique":
{{url_for('static', filename = 'style.css')}}
Donc, index.html peut contenir:
<html>
<head>
<title>Static File</title>
<link href="{{url_for('static', filename = 'style.css')}}" rel="stylesheet">
<script src="{{url_for('static', filename = 'script.js')}}"></script>
</head>
<body>
<h3>Hello World!</h3>
</body>
</html>
Après avoir exécuté app.py, nous verrons la page Web dans http: // localhost: 5000 / .
Fichiers statiques en production (servis par le serveur web frontal)
Le serveur Web intégré de Flask peut servir des ressources statiques, et cela fonctionne très bien pour le développement. Cependant, pour les déploiements de production utilisant quelque chose comme uWSGI ou Gunicorn pour servir l'application Flask, la tâche de servir des fichiers statiques est généralement déchargée sur le serveur Web frontal (Nginx, Apache, etc.). Il s'agit d'une tâche simple / petite avec des applications plus petites, en particulier lorsque toutes les ressources statiques se trouvent dans un seul dossier. Cependant, pour les applications plus volumineuses et / ou celles utilisant des plug-ins Flask qui fournissent des ressources statiques, il peut être difficile de se souvenir des emplacements de tous ces fichiers et de les copier / collecter manuellement dans un seul répertoire. Ce document montre comment utiliser le plug-in Flask-Collect pour simplifier cette tâche.
Notez que cette documentation se concentre sur la collecte des actifs statiques. Pour illustrer cette fonctionnalité, cet exemple utilise le plug-in Flask-Bootstrap, qui fournit des ressources statiques. Il utilise également le plug-in Flask-Script, qui simplifie le processus de création de tâches en ligne de commande. Aucun de ces plug-ins n'est critique pour ce document, ils sont juste utilisés ici pour démontrer la fonctionnalité. Si vous choisissez de ne pas utiliser Flask-Script, vous devrez examiner les documents Flask-Collect pour trouver d'autres moyens d'appeler la commande collect .
Notez également que la configuration de votre serveur Web frontal pour servir ces ressources statiques ne fait pas partie de la portée de cette documentation, vous devrez consulter des exemples utilisant Nginx et Apache pour plus d'informations. Disons simplement que vous allez créer des alias qui commencent par "/ static" dans le répertoire centralisé que Flask-Collect créera pour vous dans cet exemple.
L'application est structurée comme suit:
/manage.py - The app management script, used to run the app, and to collect static assets
/app/ - this folder contains the files that are specific to our app
| - __init__.py - Contains the create_app function
| - static/ - this folder contains the static files for our app.
| css/styles.css - custom styles for our app (we will leave this file empty)
| js/main.js - custom js for our app (we will leave this file empty)
| - templates/index.html - a simple page that extends the Flask-Bootstrap template
Tout d'abord, créez votre environnement virtuel et installez les packages requis: (your-virtualenv) $ pip install flask-script flask-bootstrap flask-collect
Établissez la structure de fichier décrite ci-dessus:
$ touch manage.py; mkdir -p app / {statique / {css, js}, templates}; appuyez sur app / { init .py, static / {css / styles.css, js / main.js}}
Etablissez le contenu des
manage.py,app/__init__.pyetapp/templates/index.html:
# manage.py
#!/usr/bin/env python
import os
from flask_script import Manager, Server
from flask import current_app
from flask_collect import Collect
from app import create_app
class Config(object):
# CRITICAL CONFIG VALUE: This tells Flask-Collect where to put our static files!
# Standard practice is to use a folder named "static" that resides in the top-level of the project directory.
# You are not bound to this location, however; you may use basically any directory that you wish.
COLLECT_STATIC_ROOT = os.path.dirname(__file__) + '/static'
COLLECT_STORAGE = 'flask_collect.storage.file'
app = create_app(Config)
manager = Manager(app)
manager.add_command('runserver', Server(host='127.0.0.1', port=5000))
collect = Collect()
collect.init_app(app)
@manager.command
def collect():
"""Collect static from blueprints. Workaround for issue: https://github.com/klen/Flask-Collect/issues/22"""
return current_app.extensions['collect'].collect()
if __name__ == "__main__":
manager.run()
# app/__init__.py
from flask import Flask, render_template
from flask_collect import Collect
from flask_bootstrap import Bootstrap
def create_app(config):
app = Flask(__name__)
app.config.from_object(config)
Bootstrap(app)
Collect(app)
@app.route('/')
def home():
return render_template('index.html')
return app
# app/templates/index.html
{% extends "bootstrap/base.html" %}
{% block title %}This is an example page{% endblock %}
{% block navbar %}
<div class="navbar navbar-fixed-top">
<!-- ... -->
</div>
{% endblock %}
{% block content %}
<h1>Hello, Bootstrap</h1>
{% endblock %}
- Avec ces fichiers en place, vous pouvez maintenant utiliser le script de gestion pour exécuter l'application:
$ ./manage.py runserver # visit http://localhost:5000 to verify that the app works correctly.
- Maintenant, pour collecter vos actifs statiques pour la première fois. Avant de faire cela, notez à nouveau que vous ne devriez PAS avoir un dossier
static/dans le niveau supérieur de votre application. C'est là que Flask-Collect va placer tous les fichiers statiques qu'il va collecter depuis votre application et les différents plugins que vous utilisez peut-être. Si vous avez unstatic/dossier dans le haut niveau de votre application, vous devez supprimer complètement avant de procéder, comme à partir d'une table rase est une partie essentielle du témoignage / comprendre ce Flask Collect fait. Notez que cette instruction n'est pas applicable pour un usage quotidien, c'est simplement pour illustrer le fait que Flask-Collect va créer ce répertoire pour vous, puis y placer un tas de fichiers.
Cela dit, vous pouvez exécuter la commande suivante pour collecter vos actifs statiques:
$ ./manage.py collect
Après cela, vous devriez voir que Flask-Collect a créé ce dossier static/ niveau supérieur et qu'il contient les fichiers suivants:
$ find ./static -type f # execute this from the top-level directory of your app, same dir that contains the manage.py script
static/bootstrap/css/bootstrap-theme.css
static/bootstrap/css/bootstrap-theme.css.map
static/bootstrap/css/bootstrap-theme.min.css
static/bootstrap/css/bootstrap.css
static/bootstrap/css/bootstrap.css.map
static/bootstrap/css/bootstrap.min.css
static/bootstrap/fonts/glyphicons-halflings-regular.eot
static/bootstrap/fonts/glyphicons-halflings-regular.svg
static/bootstrap/fonts/glyphicons-halflings-regular.ttf
static/bootstrap/fonts/glyphicons-halflings-regular.woff
static/bootstrap/fonts/glyphicons-halflings-regular.woff2
static/bootstrap/jquery.js
static/bootstrap/jquery.min.js
static/bootstrap/jquery.min.map
static/bootstrap/js/bootstrap.js
static/bootstrap/js/bootstrap.min.js
static/bootstrap/js/npm.js
static/css/styles.css
static/js/main.js
Et c'est tout: utilisez la commande collect chaque fois que vous apportez des modifications aux CSS ou JavaScript de votre application, ou lorsque vous avez mis à jour un plug-in Flask qui fournit des ressources statiques (comme Flask-Bootstrap dans cet exemple).