Flask
Archivos estáticos
Buscar..
Uso de archivos estáticos
Las aplicaciones web a menudo requieren archivos estáticos como archivos CSS o JavaScript. Para usar archivos estáticos en una aplicación de Flask, cree una carpeta llamada static en su paquete o junto a su módulo y estará disponible en /static en la aplicación.
Una estructura de proyecto de ejemplo para usar plantillas es la siguiente:
MyApplication/
/static/
/style.css
/script.js
/templates/
/index.html
/app.py
app.py es un ejemplo básico de Flask con representación de plantilla.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
Para usar el archivo CSS y JavaScript estático en la plantilla index.html, necesitamos usar el nombre del punto final 'estático' especial:
{{url_for('static', filename = 'style.css')}}
Entonces, index.html puede contener:
<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>
Después de ejecutar app.py veremos la página web en http: // localhost: 5000 / .
Archivos estáticos en producción (servidos por el servidor web frontend)
El servidor web incorporado de Flask es capaz de servir activos estáticos, y esto funciona bien para el desarrollo. Sin embargo, para implementaciones de producción que utilizan algo como uWSGI o Gunicorn para servir a la aplicación Flask, la tarea de servir archivos estáticos se descarga normalmente en el servidor web frontend (Nginx, Apache, etc.). Esta es una tarea pequeña / fácil con aplicaciones más pequeñas, especialmente cuando todos los activos estáticos están en una carpeta; sin embargo, para aplicaciones más grandes y / o las que usan complementos de Flask que proporcionan activos estáticos, puede ser difícil recordar las ubicaciones de todos esos archivos y copiarlos / recopilarlos manualmente en un directorio. Este documento muestra cómo usar el complemento Flask-Collect para simplificar esa tarea.
Tenga en cuenta que el foco de esta documentación está en la colección de activos estáticos. Para ilustrar esa funcionalidad, este ejemplo utiliza el complemento Flask-Bootstrap, que proporciona activos estáticos. También utiliza el complemento Flask-Script, que se utiliza para simplificar el proceso de creación de tareas de línea de comandos. Ninguno de estos complementos es crítico para este documento, solo se utilizan aquí para demostrar la funcionalidad. Si elige no usar Flask-Script, querrá revisar los documentos de Flask-Collect para encontrar formas alternativas de llamar al comando de collect .
También tenga en cuenta que la configuración de su servidor web frontend para servir a estos activos estáticos está fuera del alcance de este documento, por lo que le recomendamos consultar algunos ejemplos que utilizan Nginx y Apache para obtener más información. Basta con decir que aliasing URL que comienzan con "/ static" al directorio centralizado que Flask-Collect creará para usted en este ejemplo.
La aplicación está estructurada de la siguiente manera:
/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
Primero, cree su entorno virtual e instale los paquetes necesarios: (your-virtualenv) $ pip install flask-script flask-bootstrap flask-collect
Establecer la estructura de archivos descrita anteriormente:
$ touch manage.py; mkdir -p app / {static / {css, js}, templates}; toque la aplicación / { init .py, static / {css / styles.css, js / main.js}}
Establezca el contenido de los
manage.py,app/__init__.pyyapp/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 %}
- Con esos archivos en su lugar, ahora puede usar el script de administración para ejecutar la aplicación:
$ ./manage.py runserver # visit http://localhost:5000 to verify that the app works correctly.
- Ahora, para recoger sus activos estáticos por primera vez. Antes de hacer esto, vale la pena señalar nuevamente que NO debe tener una carpeta
static/en el nivel superior de su aplicación; Aquí es donde Flask-Collect colocará todos los archivos estáticos que recopilará de su aplicación y los diversos complementos que podría estar usando. Si usted tiene unstatic/carpeta en el nivel superior de la aplicación, debe eliminar por completo antes de continuar, ya que a partir de cero es una parte crítica del testimonio / comprensión de lo que hace Frasco-Collect. Tenga en cuenta que esta instrucción no es aplicable para el uso diario, es simplemente para ilustrar el hecho de que Flask-Collect va a crear este directorio para usted, y luego va a colocar un montón de archivos allí.
Dicho esto, puedes ejecutar el siguiente comando para recopilar tus activos estáticos:
$ ./manage.py collect
Después de hacerlo, debería ver que Flask-Collect ha creado esta carpeta static/ nivel superior, y contiene los siguientes archivos:
$ 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
Y eso es todo: use el comando collect cada vez que realice ediciones en el CSS o JavaScript de su aplicación, o cuando haya actualizado un complemento de Flask que proporcione activos estáticos (como Flask-Bootstrap en este ejemplo).