Tagebuch-Eintrag #65
Flask – Bootstrap einbinden
Das wird ein kurzer Tagebuch-Eintrag in meinem Python-Tagebuch. Oder soll ich lieber sagen Flask-Tagebuch? Denn schließlich ging es in den letzten Kapiteln nur noch um Flask 😉
Ihr merkt schon, ich bin total fokussiert auf Flask. Und das ist auch gut so. Denn es bedeutet, ich habe richtig Bock drauf! Ich habe Bock das zu lernen und später anzuwenden. Ein richtiges Flask-Projekt für die Arbeit habe ich auch schon im Sinn. Aber darum geht es in diesem Tagebuch-Eintrag nicht. Vielleicht sage ich später dazu was 😉
Also, Bootstrap oder jede andere Framework-Dateien ist sehr simpel, wenn man verstanden hat, wie man in Flask statische Dateien einbinden kann. Dazu werden einfach die entsprechenden Dateien in den Order static eingefügt. Und das ist auch das einzige und wichtigstes, was beachtet werden muss. Der Ordner muss static heißen. Denn Flask erkennt dann, dass darin statische Dateien enthalten sind. Das ist die Vorgabe von Flask. Nicht mehr und nicht weniger. Und sich daran zu halten, ist nicht schwer oder? 😉
Ich habe im Ordner static noch einen Unterordner für Bootstrap-Dateien erstellt: bootstrap-4.5.3. Die Zahl deutet auf die Version hin, die ich integriere. In diesem Ordner füge ich dann die notwendigen CSS- und JS-Dateien ein. In meinem Fall die bootstrap.min.css und bootstrap.min.js. Sowie die dazugehörigen .map-Dateien. Sonst meckert die Entwickler-Konsole, dass diese Dateien fehlen.
Zusätzlich zu Bootstrap, habe ich den Ordner js im static-Ordner erstellt. Hier kommt die jQuery-Datei jquery-3.5.1.min.js rein.
Dateien in Template-Datei einbinden
Nach dem ich die Dateien schon mal in dem Flask-Projekt-Ordner eingefügt habe, muss ich diese nur noch in der Template-Datei laden. Und das ist wirklich nichts anderes als statische Dateien in Flask einbinden. Dafür verwende ich auch url_for Funktion.
Meine main.html habe ich demzufolge um ein paar Zeilen erweitert.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-4.5.3/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
{% block abcdef %}{% endblock %}
{% block content %}{% endblock%}
{% block sidebar %}{% endblock %}
<script src="{{ url_for('static', filename='js/jquery-3.5.1.min.js') }}" async defer></script>
<script src="{{ url_for('static', filename='bootstrap-4.5.3/bootstrap.min.js') }}" async defer></script>
</body>
</html>Zeile 13 lädt die Boostrap bootstrap.min.css Datei.
Zeile 14 die normale style.css Datei.
Zeile 26 lädt die jQuery Datei.
Zeile 27 die Bootstrap bootstrap.min.js Datei
Und das wars. Gar nicht so schwer. 🙂
Da ich nun für mich die wichtigsten Grundlagen zur Erstellung einer einfachen Webseite gelernt habe. Werde ich als nächstes – wie schon in meinem Zwischenstand 10/2020 angekündigt, ein kleines Webprojekt zur Übung mit der NASA Open API entwickeln. Da werde ich dann nicht nur das bisher gelernte weiter üben und festigen, ich werde dabei sicher auch neue Sachen lernen, nicht nur Flask, sondern auch Python.
Ich werde dazu dann natürlich berichten. Der nächste Tagebuch-Eintrag könnte etwas länger werden. Und dieser Eintrag ich wohl doch etwas länger geworden, als anfangs angekündigt 😉
Seit gespannt. Ich bin es jedenfalls 🙂