Tagebuch-Eintrag #63
Flask – Template Vererbung
Ich hatte erfolgreich die API-Daten von der ISS ausgelesen und mit Flask auf eine Webseite gebracht – wenn auch nur localhost. Ich finde, APIs auslesen ist enorm interessant. Was man damit alles machen kann, ist schier grenzenlos und irgendwie relativ einfach, wenn man das Prinzip mit Python und den Aufbau einer JSON-Datei verstanden hat. Letztere ist in Python nichts weiter als eine Dictionary.
Aber bevor ich mich weiter mit API auseinandersetze, möchte ich mich erst mal dem Thema Flask Template Vererbung (engl. Template Inheritance) widmen.
Für Internetseite mit mehreren Webseite, die unter anderem auch mal ein anderes Layout haben können z.B. unterscheidet sich die Startseite meisten von den Unterseiten. Oder manche Seiten haben eine Sidebar und mache wiederum keine. Ich kenne das sehr gut von WordPress-Template-Entwicklung. So, dass ich den Grundgedanken nicht erlernen muss. Ich weiß also den Sinn und Zweck des Ganzen und genau das, lässt sich mit Template-Vererbung realisieren.
Platzhalter in der Template-Vererbung
Um bei meinem Beispiel mit den ISS-Daten zu bleiben. Habe ich meine Dateien und Ordner etwas verändert.
Ich habe eine index.html Datei für die Standardseite, wie z.B. die Startseite und dann für die ISS-Daten, eine Datei namens iss.html, welches mir ausschließlich die ausgelesenen Daten von der ISS anzeigen soll.
Als nächstes habe ich im Ordner templates, einen Unterordner layouts erstellt (kann auch anders heißen) und darin die main.html Datei hinzugefügt.
Template Blöcken
In meiner main.html Datei habe ich verschiedene Blöcke definiert, an deren Stelle die Inhalte aus anderen Dateien angezeigt werden. Das sind sozusagen Platzhalter. Ähnlich the_content() von WordPress.
Meine main.html hat drei Blöcke. Eigentlich brauche ich nur {% block content %}{% endblock%}, aber ich wollte wissen ob die Bezeichnung nach block auch individuell sein kann und ja, ein kurzer Test mit {% block abcdef %} bestätigt meine Vermutung, dass es beliebig genannt werden kann. Es versteht sich aber von selbst, dass die Bezeichnungen in den anderen Dateien genau so lauten muss. Damit die Template Dateien immer wissen, wo es ausgegeben werden soll.
Meine main.html sieht demnach so aus:
<!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='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="" async defer></script>
</body>
</html>Und dazu sieht die iss.html Datei so aus:
{# Lade die Layout-Datei main.html #}
{% extends "layouts/main.html" %}
{# Der Inhalt wird im main.html ausgegeben #}
{% block content %}
<strong>Das ist die Datei iss.html</strong>
<h1>ISS Daten</h1>
<p><strong>Status:</strong> {{ statuscode }} </p>
<p>Es sind derzeit <strong>{{ astros_number }}</strong> Personen auf der ISS</p>
<p><strong>Personen auf der ISS: </strong> </p>
<ul id="iss-astros-names">
{% for name in names %}
<li>{{ name }}</li>
{% endfor %}
</ul>
<p><strong>ISS Breitengrad: </strong> {{ iss_lat }}</p>
<p><strong>ISS Längengrad: </strong> {{ iss_lon }}</p>
<p><strong>Zeit: </strong> {{ iss_time }}</p>
{% endblock %}
{% block sidebar %}
<aside>
Dieser Text ist im Aside - Sidebar
</aside>
{% endblock %}Ganz wichtig ist die zweite Zeile {% extends „layouts/main.html“ %}. Damit sage ich in der iss.html Datei, dass es bitte noch die main.html-Datei als Hauptdatei laden soll und dann die Inhalte dort platzieren, ausgeben soll.
Also, alles was in der iss.html zwischen {% block content %} und dem nächsten {% endblock %} (Zeile 5 bis 19) steht, wird in der main.html an der Stelle mit den gleichen Block-Bezeichnung, nämlich {% block content %}{% endblock %} (Zeile 22) dargetstellt.
Da gleiche verhält sich dann mit den anderen Blöcken wie sidebar oder abcdef. Das ist das ganze Prinzig, wie Template Vererbung bei Flask grundlegend funktioniert. Eigentlich nicht schwer, wenn man es verstanden hat – wie immer 😀
Jetzt bin ich wieder einen Schritt weiter. Was fehlt ist noch anständiges CSS und Co. Weil ich schon sehr lange Bootstrap-Framework für WordPress-Theme-Entwicklung nutze, werde ich es auch für Flask verwenden und einbinden. Das wird meine nächste Übung sein. Wobei ich mir nicht vorstellen kannst, dass es sehr schwer ist, weil es auch nur eine statische Datei ist, was beim Flask-Projekt eingebunden werden muss. Ok, Bootstrap hat mehr Dateien. Aber,… ihr wisst was ich sagen will, oder? 😉