Erste Schritte mit Django-Vorlagen

7 Minuten

Vorlagen sind Textdateien, die zum Generieren von textbasierten Formaten (z. B. HTML oder XML) verwendet werden können. Jede Vorlage enthält einige statische Daten, die auf der gesamten Website gemeinsam genutzt werden, sie kann aber auch Platzhalter für dynamische Daten enthalten. Vorlagen enthalten Variablen und Tags, die das Verhalten und das Erscheinungsbild der endgültigen Seite steuern.

Sehen wir uns an, wie Vorlagen in Django funktionieren.

Variablen

Variablen in einer Vorlage verhalten sich wie in jeder anderen Programmiersprache. Wir können sie verwenden, um einen Wert anzugeben, der zur Laufzeit ausgewertet wird.

Django bietet eine Möglichkeit, Variablen in einer Vorlage mithilfe der {{ }}-Syntax anzuzeigen. Jede Variable innerhalb der doppelten geschweiften Klammern wird auf ihren Textinhalt hin ausgewertet und dann in die Vorlage eingefügt. Wenn wir z. B. den Namen des Hundes anzeigen möchten, können wir {{dog.name}} verwenden.

Die Ansicht übergibt Variablen mithilfe der render-Funktion an eine Vorlage, die wir in einem späteren Modul untersuchen. Sie können Werte und andere Daten an eine Vorlage übergeben, einschließlich eines QuerySet aus dem Django-ORM. Dies ermöglicht es Ihnen, Daten aus der-Datenbank für Ihre Anwendung anzuzeigen.

Filter

Filter sind eine gute Möglichkeit, um zu steuern, wie die Daten angezeigt werden, wenn sie in einer Vorlage angefordert werden. Da Filter bereits erstellt wurden, bieten sie Ihnen eine einfache Möglichkeit, Daten zu formatieren, ohne dass Sie speziellen Code schreiben müssen.

Nehmen wir beispielsweise an, wir müssen die Namen der Hunderassen ausdrucken und wollen sicherstellen, dass der erste Buchstabe jedes Namens ein Großbuchstabe ist.

{{ dog.name | capfirst }}

Die Variable befindet sich auf der linken Seite des Pipesymbols (|), und der Filter befindet sich auf der rechten Seite. Dies ist nur einer von vielen Filtern, die Sie verwenden können, um die Daten zu bearbeiten, wenn Sie Django-Vorlagenfilter verwenden.

`Tags`

Sie können Tags verwenden, um Schleifen auszuführen, Text zu erstellen oder andere Befehlstypen für die Vorlagen-Engine bereitzustellen. Tags ähneln häufig der Python-Syntax. Da sie jedoch in der Vorlage ausgeführt werden (anstatt innerhalb des Python-Interpreters), können Sie einige geringfügige Unterschiede in der Syntax feststellen. Ohne die Möglichkeit, sich auf Tabs zu verlassen, wie es bei Python der Fall ist, benötigt jede Blockanweisung eine entsprechende end-Anweisung.

Wir können if-Anweisungen für boolesche Logik und for-Schleifen für Iterationen verwenden. Die Kernsyntax für if-Anweisungen sieht wie folgt aus:

{% if dogs %}
    <h2>There are {{ dogs | length }} ready for adoption!</h2>
{% else %}
    <h2>We have no dogs ready for adoption. Please check back later!</h2>
{% endif %}

Hinweis

Die elif-Anweisung wird auf die gleiche Weise wie elif in Python verwendet.

Auf ähnliche Weise können wir eine for-Schleife verwenden, um die Namen aller Hunde in einer Liste anzuzeigen:

<ul>
    {% for dog in dogs %}
        <li>{{ dog.name }}</li>
    {% endfor %}
<ul>

Vorlagenvererbung

Vorlagen werden verwendet, um das HTML zu generieren, das dem Benutzer bei der Verwendung Ihrer Anwendung angezeigt werden soll. Seiten in einer Anwendung haben in der Regel eine gemeinsame Struktur, bei der sich die Navigation auf der linken Seite befindet, ein Titel oben angezeigt wird und es ein einheitliches Stylesheet gibt. Django-Vorlagen unterstützen freigegebene Strukturen durch Vererbung.

Erstellen einer übergeordneten Seite

Das Erstellen einer übergeordneten Seite entspricht der Erstellung einer beliebigen Django-HTML-Vorlage. Sie geben die äußere Struktur an und fügen dann {% block %}-Platzhalter ein. Diese Platzhalter ermöglichen es den untergeordneten Elementen, den Inhalt bereitzustellen, der in diese Platzhalter eingefügt werden soll.

Erstellen wir eine übergeordnete Seite, um ein Stylesheet zu importieren, einen Standardtitel bereitzustellen und eine Kopfzeile zu erstellen, die auf allen Seiten angezeigt werden soll:

<html>
<head>
    <link rel="stylesheet" href="site.css">
    <title>{% block title %}Shelter site{% endblock %}</title>
</head>
<body>
    <h1>Shelter site</h1>
    {% block content %}
    {% endblock %}
</body>
</html>

Erstellen einer untergeordneten Seite

Wir können eine untergeordnete Seite aus dem übergeordneten Element mit dem extends-Schlüsselwort erstellen. Mit diesem Schlüsselwort geben wir den Namen der HTML-Datei der übergeordneten Vorlage an. Anschließend verwenden wir die entsprechenden {% block %}-Anweisungen, um den für diese Seite spezifischen Inhalt hinzuzufügen.

{% extends "parent.html" %}

{% block title %}
Welcome to the Shelter site!
{% endblock %}

{% block content %}
Thank you for visiting our site!
{% endblock %}

Wenn die Seite angezeigt wird, sieht sie wie folgt aus:

<html>
<head>
    <link rel="stylesheet" href="site.css">
    <title>Welcome to the shelter site</title>
</head>
<body>
    <h1>Shelter site</h1>
    Thank you for visiting our site!
</body>
</html>

Beachten Sie, wie die Platzhalter durch den Inhalt auf der untergeordneten Seite ersetzt werden.