Flask
Statiska filer
Sök…
Använda statiska filer
Webbapplikationer kräver ofta statiska filer som CSS- eller JavaScript-filer. Om du vill använda statiska filer i en Flask-applikation skapar du en mapp som heter static i ditt paket eller bredvid din modul och den kommer att finnas tillgänglig på /static i applikationen.
Ett exempel på projektstruktur för användning av mallar är följande:
MyApplication/
/static/
/style.css
/script.js
/templates/
/index.html
/app.py
app.py är ett grundläggande exempel på kolv med mallåtergivning.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
För att använda den statiska CSS- och JavaScript-filen i mallen index.html, måste vi använda det speciella "statiska" slutpunktsnamnet:
{{url_for('static', filename = 'style.css')}}
Så index.html kan innehålla:
<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>
Efter att ha kört app.py ser vi webbsidan på http: // localhost: 5000 / .
Statiska filer i produktion (betjänas av frontend-webserver)
Flasks inbyggda webbserver kan betjäna statiska tillgångar, och det fungerar bra för utveckling. För produktionsinstallationer som använder något som uWSGI eller Gunicorn för att betjäna Flask-applikationen är emellertid uppgiften att betjäna statiska filer en som vanligtvis laddas ner till frontend-webservern (Nginx, Apache, etc.). Detta är en liten / enkel uppgift med mindre appar, särskilt när alla statiska tillgångar finns i en mapp; för större appar men och / eller de som använder Flask-plugin (er) som tillhandahåller statiska tillgångar, kan det bli svårt att komma ihåg platserna för alla dessa filer och manuellt kopiera / samla dem till en katalog. Detta dokument visar hur du använder Flask-Collect-plugin för att förenkla denna uppgift.
Observera att fokus i denna dokumentation är på insamlingen av statiska tillgångar. För att illustrera den funktionen använder detta exempel Flask-Bootstrap-plugin, som är en som tillhandahåller statiska tillgångar. Den använder också Flask-Script-plugin, som används för att förenkla processen att skapa kommandoradsuppgifter. Ingen av dessa plugins är kritiska för detta dokument, de används bara här för att visa funktionaliteten. Om du väljer att inte använda Flask-Script vill du gå igenom Flask-Collect-dokumenten för alternativa sätt att ringa collect kommandot .
Observera också att konfigurationen av din frontend-webbserver för att betjäna dessa statiska tillgångar ligger utanför ramen för detta dokument. Du vill kolla in några exempel med Nginx och Apache för mer information. Det räcker med att säga att du aliasar webbadresser som börjar med "/ statisk" till den centraliserade katalogen som Flask-Collect kommer att skapa för dig i det här exemplet.
Appen är strukturerad enligt följande:
/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
Skapa först din virtuella miljö och installera de nödvändiga paketen: (din-virtualenv) $ pip installera flask flask-script flask-bootstrap flask-collect
Upprätta filstrukturen som beskrivs ovan:
$ touch manage.py; mkdir -p app / {static / {css, js}, mallar}; tryck på app / { init .py, static / {css / styles.css, js / main.js}}
Upprätta innehållet för
manage.py,app/__init__.pyochapp/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 %}
- Med dessa filer på plats kan du nu använda hanteringsskriptet för att köra appen:
$ ./manage.py runserver # visit http://localhost:5000 to verify that the app works correctly.
- Nu, för att samla in dina statiska tillgångar för första gången. Innan du gör detta, är det värt att notera igen att du INTE ska ha en
static/mapp på toppnivån i din app; det är här Flask-Collect kommer att placera alla statiska filer som den kommer att samla in från din app och de olika plugins som du kanske använder. Om du har enstatic/mapp i den översta nivån i din app, bör du ta bort den helt och hållet innan du fortsätter, som börjar med ett oskrivet blad är en kritisk del av vittn / förstå vad Flask-Collect gör. Observera att denna instruktion inte är tillämplig för den dagliga användningen, det är helt enkelt för att illustrera det faktum att Flask-Collect kommer att skapa den här katalogen för dig, och sedan kommer den att placera ett gäng filer där.
Med det sagt kan du köra följande kommando för att samla in dina statiska tillgångar:
$ ./manage.py collect
Efter att ha gjort det bör du se att Flask-Collect har skapat den här static/ mappen på högsta nivå, och den innehåller följande filer:
$ 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
Och det är det: använd collect kommandot när du gör ändringar i appens CSS eller JavaScript, eller när du har uppdaterat ett Flask-plugin som tillhandahåller statiska tillgångar (som Flask-Bootstrap i det här exemplet).