templates/base.html (gemeinsamer Rahmen):
html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block titel %}Kundenverwaltung{% endblock %}</title>
</head>
<body>
<main>
{% block inhalt %}{% endblock %}
</main>
</body>
</html>
templates/kunden.html:
html
{% extends 'base.html' %}
{% block titel %}Kunden{% endblock %}
{% block inhalt %}
<h1>Kunden</h1>
<form method="get" action="/">
<input type="search" name="q" value="{{ q }}" placeholder="Suchen ...">
<button type="submit">Suchen</button>
</form>
<table>
<thead>
<tr><th>Nr.</th><th>Name</th><th>Stadt</th><th>Umsatz</th></tr>
</thead>
<tbody>
{% for k in kunden %}
<tr>
<td>{{ k.id }}</td>
<td>{{ k.name }}</td>
<td>{{ k.stadt or '-' }}</td>
<td>{{ '%.2f'|format(k.umsatz) }}</td>
</tr>
{% else %}
<tr><td colspan="4">Keine Kunden gefunden</td></tr>
{% endfor %}
</tbody>
</table>
<h2>Neuer Kunde</h2>
<form method="post" action="/kunden">
<input name="name" placeholder="Name" required>
<input name="stadt" placeholder="Stadt">
<button type="submit">Anlegen</button>
</form>
{% endblock %}
| Jinja-Syntax | Bedeutung |
|---|---|
{{ ausdruck }} |
Gibt einen Wert aus. Sonderzeichen werden automatisch maskiert (Schutz vor Code-Einschleusung im Browser) |
{% for x in liste %} ... {% else %} ... {% endfor %} |
Schleife. else läuft bei leerer Liste |
{% if bedingung %} ... {% elif %} ... {% else %} ... {% endif %} |
Verzweigung |
{% extends 'base.html' %} |
Diese Seite erweitert einen Rahmen |
{% block name %}...{% endblock %} |
Austauschbarer Bereich im Rahmen |
{% include 'teil.html' %} |
Fügt ein anderes Template ein |
{{ wert\|filter }} |
Filter anwenden, z. B. {{ name\|upper }}, {{ liste\|length }}, {{ x\|round(2) }}, {{ text\|default('-') }} |
{{ k.name }} |
Zugriff auf Dictionary-Schlüssel oder Attribut |
{# Kommentar #} |
Kommentar, erscheint nicht im HTML |
Wichtig: {{ ... }} maskiert Inhalte automatisch. Nur Inhalte, denen du vertraust, darfst du mit |safe ungeprüft ausgeben.