Django Templates verstehen und effizient nutzen

1 | 11522 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Django Templates verstehen und effizient nutzen" mit Ihrem Wissen!

Anzeige Hier werben

Templates in Django bieten ein mächtiges Werkzeug um den eigenen Webauftritt zu strukturieren. Grundlegend besteht ein Template dabei nur aus Variablen und Tags.

Grundlagen:

Beispiel: base.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<head>
    {% block title %}Seitenname{% endblock %}
</head>


<body>
    {% block content %}
    <h1>{{ section.title }}</h1>
    {%  now "jS F Y H:i" %}
    {% endblock %}
</body>

Das Beispiel zeigt ein einfaches Template, auf das ich hier zur Erklärung weiter eingehen will.

 
HTML
1
{% block title %}{{ section.title }}{% endblock %}

Definiert den ersten Block im Template mit dem Namen title, der einzige Inhalt des Blocks ist eine Variable section.title, beim Aufruf des Templates wird die Variable also durch das title Attribut des section-Objekts ersetzt.

 
HTML
1
2
3
4
{% block content %}
<h1>{{ section.title }}</h1>
{% now "jS F Y H:i" %}
{% endblock %}

Definiert den zweiten Block im Template mit dem Namen content, dieser Block beinhaltet eine Variable zur Darstellung der Überschrift, die ebenfalls aus dem section-Objekt genommen wird. Zusätzlich wird der von Django bereit gestellte now-Tag zur Darstellung des aktuellen Datum angewendet.

Übersicht:

Variablen: {{ variable }}

Werden beim Aufruf des Templates durch entsprechende Werte ersetzt.
Bei der Benennung von Variablen gibt es nur wenig zu beachten:
- Eine Variable kann aus allen alphanumerischen Zeichen und dem "_" bestehen.
- Wird ein "." in einer Variable verwendet, führt das zum, für eine OO-Programmiersprache, typischen Verhalten. Wie im Beispiel dargestellt führt die Variable "object.attribute" dazu, dass das entsprechende Attribut aus dem Objekt geholt und als Wert der Variable angenommen wird.

Tags: {% tag %} something {% endtag %}

Dient sowohl dazu Text zu generieren als auch dazu externe Informationen ins Template zu laden oder logische Operationen auszuführen(z.B. if/else oder Schleifen)

Beispiel: Schleifen  
HTML
1
2
3
4
5
<ul>
{% for unicorn in stable %}
    <li>{{ unicorn.name }} </li>
{% endfor %}
</ul>

Ausgabe der in stable enthaltenen unicorn in einer Liste

Beispiel: Funktion  
HTML
1
{% now "jS F Y H:i" %}

Ausgabe des derzeitigen Datums

Beispiel: if/else  
HTML
1
2
3
4
5
{% if stable %}
    {{ stable|length }} unicorns in stable.
{% else %}
    Sorry, no unicorns in stable.
{% endif %}

Die Variable stable wird auf mehrere Eigenschaften geprüft:
- Ist vorhanden
- Ist nicht leer
- Ist nicht False
Ist der Test bestanden, wird die Filterung ausgelöst und dadurch die Anzahl der unicorn ausgegeben.
Der else-Zweig ist dabei optional, es ist möglich die Abfrage hier auch direkt mit {% endif %} zu beenden.

Filter: {{ variable|filter }}

Dienen dazu den Inhalt von Variablen vor der Ausgabe zu formatieren. Django liefert hier schon einige nützliche Filter mit.

Beispiele:

{{ nothingInHere|default:"Theres nothing in here" }}
Ist die Variable nothingInHere leer oder wird nicht übergeben, wird "Theres nothing in here" angezeigt.

{{ cutMe|cut:" " }}
Entfernt die im cut angegebenen Teile der Variable. Hat die Variable cutMe zum Beispiel den Wert "No Blanks Allowed" wird daraus "NoBlanksAllowed"

Kommentare:

Einzeilig: {# comment #}
Diese Art von Kommentar im Template bietet die Möglichkeit einzeilige Kommentare zu verfassen, ein Zeilenumbruch ist nicht erlaubt.
Ein Auskommentieren von einzeiligen Code-Blöcken oder Variablen ist möglich.
So lassen sich eventuell fehlerhafte Codezeilen zu testzwecken schnell auskommentieren.

Beispiel: Einzeiliger Kommentar  
HTML
1
{# {{ bad#variable }} #}

Mehrzeilig: {% comment %}...{% endcomment %}
Mehrzeilge Kommentare werden durch einen Tag erstellt. Dabei wird alles zwischen dem Start- und End-Tag ignoriert.

Beispiel: Mehrzeiliger Kommentar  
HTML
1
2
3
4
5
{% comment %}
{% if stable %}
    {{ stable|length }} unicorns in stable.
{% endif %}
{% endcomment %}

Komplexe Möglichkeiten:

Ableitung: {% extends "xxx.html" %}

Django bietet die Möglichkeit Templates voneinander abzuleiten.

base.html
Beispiel: base.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<head>
    <link rel="stylesheet" href="style.css" />
    <title>{% block title %}Seitenname{% endblock %}</title>
    {% block extrahead %}{% endblock %}
</head>

<body>
    <div id="navigation">
        {% block navigation %}
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/stable/">Stables</a></li>
        </ul>
        {% endblock %}
    </div>
    
    <div id="content">
        {% block content %}{% endblock %}
    </div>
</body>

Dies soll unser Grundgerüst für unsere Seite sein, wie man sieht ist der Block content noch komplett leer, dieser wird nun durch ein Child-Template gefüllt, außerdem werden wir der Kopfzeile noch ein spezielles Aussehen und eine erweiterte Bezeichnung gönnen.

child.html
child.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{% extends "base.html" %}

{% block title %}Unicorns - {{ block.super }}{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <link rel="stylesheet" href="extra.css" />
{% endblock %}

{% block content %}
<ul>
{% for unicorn in stable %}
    <li>{{ unicorn.name }}</li>
{% endfor %}
</ul>
{% endblock %}

Was sofort auffällt ist, dass nicht alle Blöcke des base-Template vom child-Template überschrieben werden müssen. Blöcke die nicht überschrieben werden, werden aus dem base-Template geladen.

child.html im Detail:
 
HTML
1
{% extends "base.html" %} 

Durch den extends-Tag findet die eigentliche Ableitung statt.

 
HTML
1
{% block title %}Unicorns - {{ block.super }}{% endblock %} 

Wir erweitern den title-Block aus der base.html um den fixen Wert "Unicorns -". {{ block.super }} dient dazu, den Inhalt des abgeleiteten Templates in das child-Template zu übernehmen.

 
HTML
1
2
3
4
{% block extrahead %}   
    {{ block.super }}   
    <link rel="stylesheet" href="extra.css" />
{% endblock %} 

Wir übernehmen mit {{ block.super }} wieder den Inhalt des entsprechenden Blocks aus der base.html und erweitern diesen durch ein zusätzliches Stylesheet. So lässt sich das Aussehen von Templates nach belieben erweitern bzw. verändern.

 
HTML
1
2
3
4
5
6
7
{% block content %}
<ul>
{% for unicorn in stable %} 
    <li>{{ unicorn.name }}</li>
{% endfor %}
</ul>
{% endblock %} 

Wir füllen den in der base.html leeren content-Block mit einer for-Schleife die uns die Namen der sich im stable befindenden unicorn ausgibt.

Die Ausgabe des Templates inklusive des child-Templates seht ihr im unteren Code-Block. Zur besseren Übersicht ist es hier leserlich formatiert. Normalerweise achtet Django bei der Ausgabe nicht speziell auf die Formatierung, sodass die Ausgabe nicht unbedingt einem leserlichen Standart entsprechen muss.

Ausgabe
Ausgabe  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head>
    <link rel="stylesheet" href="style.css" />
    <title>Unicorns - Seitenname</title>
    <link rel="stylesheet" href="extra.css" />
</head>

<body>
    <div id="navigation">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/stable/">Stables</a></li>
        </ul>
    </div>
    
    <div id="content">  
        <ul>
            <li>Unicorn 1</li>
            <li>Unicorn 2</li>
            <li>Unicorn 3</li>
        </ul>
     </div>
</body>

Die Ableitung von Templates in Django erlaubt es für jede Seite ein individuelles Gerüst zu erstellen, dabei aber trotzdem ein einheitliches Aussehen der Seiten beizubehalten.

Einbindung: {% include "xxx.html" %}

Zusätzlich zur Ableitung gibt es auch die möglichkeit direkt an bestimmten Stellen andere Templates einzubinden.

Beispiel:  
HTML
1
2
3
4
5
6
7
{% block content %}
<ul>
{% for unicorn in stable %}
    <li>{% include "unicorns/display_unicorn.html" %}</li>
{% endfor %}
</ul>
{% endblock %}

Hier fügen wir dem content-Block für jedes unicorn im stable ein eigenes individuell gestaltetes Template zur Darstellung hinzu.

Autoescape: {% autoescape off/on %} something {% endautoescape %}

Django bietet in den Templates eine nützliche Autoescape Funktion die standartmäßig aktiviert ist.
Dabei findent eine Konvertierung der folgenden Zeichen statt:

  • < wird zu &lt;
  • > wird zu &gt;
  • ' wird zu &#39;
  • " wird zu &quot;
  • & wird zu &amp;

Dies dient vorallem der Sicherheit gegen Cross Site Scripting attacken.
Ein einfaches Beispiel wäre dem Benutzer die möglichkeit zu geben seinen Namen einzugeben.
Gibt er hier <b>username ein, kann das dazu führen das die Schrift der restlichen Seite fett dargestellt wird.
Mit der Autoescape Funktion ist dies nicht der Fall.
Da die Funktion immer eingeschalten ist, es aber vorkommen kann, dass man Eingaben nicht escapen möchte, bietet Django dafür mehrere möglichkeiten.

Eine Möglichkeit ist es, direkt einen Filter auf eine Variable anzuwenden und so individuell zu entscheiden.

 
HTML
1
2
{{ variable }} {# Diese Variable wird escaped #}
{{ variable|safe }} {# Diese Variable wird nicht escaped #}

Die andere Möglichkeit ist es einen autoescape-Tag einzufügen.

 
HTML
1
2
3
4
5
6
{% autoescape off %}
    Diese Variable ist nicht escaped: {{ variable }}
    {% autoescape on %}
        Diese Variable ist escaped: {{ variable }}
    {% endautoescape %}
{% endautoescape %}

Wie man sieht lassen sich die Tags auch verschachteln.

Custom Tags: {% load xxx %}

Django Templates bieten die möglichkeit custom-Tags zu erstellen, viele Applikationen nutzen diese Möglichkeit und verwenden eigens erstellte Tags, diese müssen mit dem Tag {% load xxx %} aktiviert werden und können dann wie ein normaler Tag verwendet werden.
Dabei lassen sich auch mehrere Tags gleichzeitig laden: {% load xxx yyy zzz %}

Achtung Vererbung:

Geladene custom-Tags werden in keine Richtung vererbt. Das heist, weder das Parent-Template erbt die custom-Tags vom Child-Template, noch erbt das Child-Template die des Parent-Templates.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "Django Templates verstehen und effizient nutzen" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Django Templates verstehen und effizient nutzen" hier bearbeiten.

Mitarbeiter