Applicazione di una semplice bottiglia che legge il suo contenuto da un file .html. Foglio di stile esterno bloccato?

Question

Ho realizzato un'applicazione di una bottiglia molto semplice che legge il suo contenuto da un file .html. L'applicazione funziona tranne per lo stile. Stranamente il mio codice CSS in linea funziona ma non il foglio di stile esterno. Ho controllato la sintassi, dovrebbe funzionare. Flask in qualche modo impedisce la lettura del file .css?

I file nella cartella possono essere visualizzati here. Questi 3 file sono tutti nella stessa cartella.

Answer 1

Il tuo codice non sta servendo i file usando Flask, sta semplicemente leggendo un file e inviandolo al browser, motivo per cui gli URL non funzionano.

È necessario eseguire il rendering del file all'interno del metodo.

Per prima cosa creare una cartella templates nella stessa directory del file .py e spostare il file html in questa cartella. Crea un'altra cartella denominata static e inserisci il foglio di stile in quella cartella.

Si dovrebbe avere

/flaskwp1.py 
/templates 
    webcode.html 
/static 
    webcodestyle.css 

Poi, regolare il codice di questa convenzione:

from flask import Flask, render_template 

app = Flask('flaskwp1') 
# webcode = open('webcode.html').read() - not needed 

@app.route('/') 
def webprint(): 
    return render_template('webcode.html') 

if __name__ == '__main__': 
    app.run(host = '0.0.0.0', port = 3000) 

Edit webcode.html:

<link rel="stylesheet" 
     type="text/css" 
     href="/static/webcodestyle.css"/> 

Answer 2

È necessario creare un URL e una directory statici specifici.

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

consentirà vostra applicazione per cercare un file chiamato 'style.css' all'interno di una cartella chiamata 'static' alla radice del modulo web app. Sarà disponibile per la tua web app all'URL "/static/style.css"

Si potrebbe voler postare il contenuto del file html e il codice python stesso in modo che possiamo vedere cosa potrebbe andare storto. Sembra che l'url sia errato o che il tuo server web non sia impostato per servire file statici da quella posizione.