Tagebuch-Eintrag #60
Flask – Statische Dateien einbinden

CSS und JavaScript laufen eigentlich auf allen Webseite mit, damit die Webseite schön aussieht. Meine einfach hat noch keine Formatierung und co. Das muss ich ändern und jetzt binde ich CSS ein.

Bei Flask ist es so, das solche statische Dateien, wie CSS und JS in einem von Flask vorgesehenen Ordner liegen muss. Dieser Ordner heißt static im Projektordner. Die Flask-Dokumentation für diesen Abschnitt ist relativ kurz gehalten – naja, viel gibt es auch nicht wirklich zu erklären 😉

Stylesheet-Datei (CSS) einbinden

Also, wie in der Flask-Dokumentation beschrieben, muss ich im Projektordner das Verzeichnis static erstellen und darin erstelle ich einfach meine style.css-Datei.

Danach wird die CSS-Datei über url_for(’static‘, filename=’style.css‘) geladen. Leider steht das nirgends, wo diese Code-Zeile eingegeben werden soll. Also versuche ich es über einen print-Befehl es auszugeben und schaue mal, was es dann ausgibt.

Aber ja, hätte ich die Flask-Dokumentation der Reihe nach abgearbeitet, wüsste ich, dass ich dafür noch ein Modul benötigt. Das url_for Modul. Denn ohne dieses Modul, kennt Python/Flask diese Variable nicht.

Habe ich dann url_for importiert und lade sie Seite neu, sehe ich im Terminal, was es ausgibt: /static/style.css

Wenn ich die URL dann im Browser eingebe, sehe ich korrekterweise den Inhalt der style.css-Datei.

CSS-Datei in HTML-Template-Datei laden

Nach dem ich nur was die Ausgabe von url_for(’static‘, filename=’style.css‘) ist, muss ich es nur noch in die Template-Datei einbinden. Hierfür gebe ich es nach der Jinja-Template-Engine-Vorgabe ein.

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

Und in der Tat funktioniert es 🙂

Ich habe dann die H1-Überschrift die Farbe Orange definiert und Schriftstil als kursiv. Funktioniert wunderbar! 🙂

Ich habe nun HTML-Template und CSS-Datei. Eine gute Grundlage für weitere Funktionen mit und über Flask auszugeben.

Mal schauen, welches Thema ich als nächstes angehen werde.

Bis bald!