Tagebuch-Eintrag #59
Flask – Templates erstellen
Ich habe jetzt das eine oder andere Abschnitt von der Flask-Dokumentation übersprungen. Nicht, weil ich es schon kann, sondern weil ich es für mich persönlich besser finde mit zuerst mit Templates zu beschäftigen, und erst danach mit Routing-Methode und HTML Request zu beschäftigen.
Ich kann hier natürlich auch komplett daneben liegen und dann feststellen „Hätte ich doch bloß zuerst…“. Das Gefühl kennen sicher alle 😉
Render Template
Es ist durch aus möglich HTML-Code in den return-Wert einzugeben. Wie ich bei meinem Hallo Welt-Code schon getestet habe. Aber für eine komplexe Webseite, ist es nicht praktikabel und deswegen wird HTML-Templates verwendet.
Generating HTML from within Python is not fun…
Flaks-Dokumentation – Rendering Templates
Um HTML-Template verwenden zu können, wird von Flask das Modul render_template benötigt und importiert. Danach muss noch der return-Wert angepasst werden. Statt wie bisher Strings zurückzugeben, wird jetzt das Template gewählt und den darin enthaltenen Code.
Für meine About-Seite, gebe ich meinen Namen unter der Variable name zurück. Die Funktionsbeschreibung von render_template sieht zwei Parameter vor. der erste Parameter ist die Datei des Templates im templates-Ordner und dann der Kontext/Variable, was an das Template übergeben werden soll – in meinem Fall, meinen Namen.
Demzufolge sieht mein Code für die About-Seite so aus:
@app.route('/about')
def its_me():
# Wert name wird im index.html-Template übergeben und ausgegeben
return render_template('index.html', name='Jing')Und meine dazugehörige index.html im Ordner templates, im Hauptverzeichnis des Flask-Projektes.
<!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">
{% if name %}
<title>learn FLASK Hallo {{ name }}</title>
{% else %}
<title>learn FLASK Halle Welt</title>
{% endif %}
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</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]-->
<strong>Das ist die index.html Datei</strong>
{% if name %}
<h1>ABOUT</h1>
<strong>Hallo {{ name }}!</strong>
{% else %}
<h1>Startseite</h1>
<strong>Hallo Welt!</strong>
{% endif %}
<script src="" async defer></script>
</body>
</html>Ausgabe der Inhalte.
Jinja Template Engine
Flask verwenden das Jinja Template Engine und darin werden die Ausgaben und Funktionen von Flask ausgeführt/ausgegeben. In meiner index.html-Datei sind die Jinja Template-Variable mit {{ variable }} definiert. Ebenso die das bekannte If-Else-Statement in der Jinja-Schreibweise {{ if variable }}.
Ich habe in meinem Code geschrieben, wenn ein Name eingetragen wurde, gib Halle NAME aus. Ansonsten Hallo Welt. Sowohl im BODY also auch im TITLE-TAG. Aber es ist immer die gleiche Datei (index.html).
Ich werde später sicherlich noch im Detail mich mit dem Jinja-Template-Engine beschäftigen, für den Anfang reicht es die grundlegende Funktion zu kenne.
Was noch fehlt ist natürlich die CSS-Datei, die in der index.html-Datei noch nicht eingebunden wurde. Das ist Thema für den nächsten Tagebuch-Eintrag.