Schritt 3: Bereitstellen statischer Dateien, Hinzufügen von Seiten und Verwenden von Vorlagenvererbung mit der Django-App

  • Artikel

Vorheriger Schritt: Erstellen einer Django-App mit Ansichten und Seitenvorlagen

In den vorherigen Schritten des Tutorials haben Sie gelernt, wie Sie eine minimale Django-App mit einer einzelnen HTML-Seite erstellen. Moderne Web-Apps enthalten jedoch viele Seiten. Moderne Webseiten verwenden freigegebene Ressourcen wie CSS- und JavaScript-Dateien, um ein konsistentes Format und Verhalten zu bieten.

In diesem Schritt wird Folgendes erläutert:

  • Das Verwenden von Visual Studio-Elementvorlagen zum schnellen Hinzufügen neuer Dateien verschiedener Typen mit geeigneten Codebausteinen (Schritt 3.1)
  • Einrichten des Django-Projekts zur Bereitstellung von statischen Dateien (Schritt 3.2)
  • Das Hinzufügen von zusätzlichen Seiten zur App (Schritt 3-3)
  • Das Verwenden der Vorlagenvererbung zur Erstellung einer Kopfzeile und einer Navigationsleiste, die seitenübergreifend verwendet werden (Schritt 3-4)

Schritt 3.1: Kennenlernen der Elementvorlagen

Wenn Sie eine Django-App entwickeln, fügen Sie in der Regel viele Python-, HTML-, CSS- und JavaScript-Dateien hinzu. Für jeden Dateityp (Dateien wie web.config, die Sie möglicherweise für die Bereitstellung benötigen) bietet Visual Studio praktische Elementvorlagen für die ersten Schritte an.

Um die verfügbaren Vorlagen anzuzeigen, wechseln Sie zum Projektmappen-Explorer, klicken Sie mit der rechten Maustaste auf den Ordner, in dem Sie das Element erstellen möchten, und klicken Sie dann auf Hinzufügen>Neues Element.

Add new item dialog in Visual Studio.

Um eine Vorlage zu verwenden, wählen Sie die gewünschte Vorlage aus, geben Sie einen Namen für die Datei an, und klicken Sie dann auf Hinzufügen. Wenn Sie ein Element auf diese Weise hinzufügen, wird die Datei automatisch zum Visual Studio-Projekt hinzugefügt und die Änderungen der Quellcodeverwaltung markiert.

Frage: Woher weiß Visual Studio, welche Elementvorlagen angeboten werden sollen?

Antwort: Die Visual Studio-Projektdatei ( .pyproj) enthält einen Projekttypbezeichner, der sie als Python-Projekt markiert. Visual Studio verwendet den Typbezeichner, um nur die Elementvorlagen anzuzeigen, die für den Projekttyp geeignet sind. Auf diese Weise kann Visual Studio mehrere Elementvorlagen für viele Projekttypen anbieten, ohne Sie dazu aufzufordern, sie jedes Mal zu sortieren.

Schritt 3.2: Bereitstellen statischer Dateien aus Ihrer App

Bei einer Web-App, die mit Python (mithilfe eines beliebigen Frameworks) erstellt wurde, werden Ihre Python-Dateien immer auf dem Server des Webhosts ausgeführt. Die Python-Dateien werden auch nie an den Computer von Benutzer*innen übertragen. Andere Dateien wie CSS- und JavaScript-Dateien werden jedoch ausschließlich vom Browser verwendet. Daher übermittelt der Hostserver sie bei jeder Anfrage einfach im aktuellen Zustand. Solche Dateien werden als „statische“ Dateien bezeichnet, und Django kann sie automatisch übermitteln, ohne dass Sie Code schreiben müssen.

Ein Django-Projekt wird standardmäßig eingerichtet, um statische Dateien aus dem static-Ordner der App bereitstellen zu können. Dies gelingt dank der Zeilen in der Datei settings.py des Django-Projekts:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep) + ['static']))

Sie können die Dateien in static mit einer beliebigen Ordnerstruktur organisieren und dann relative Pfade innerhalb dieses Ordners verwenden, um auf die Dateien zu verweisen. Um den Prozess zu veranschaulichen, führen Sie die folgenden Schritte aus, um der App eine CSS-Datei hinzuzufügen, und verwenden Sie dann dieses Stylesheet in der index.html-Vorlage:

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner HelloDjangoApp im Visual Studio-Projekt, wählen Sie Hinzufügen>Neuer Ordner aus, und nennen Sie den Ordner static.

  2. Klicken Sie mit der rechten Maustaste auf den Static-Ordner, und wählen Sie Hinzufügen>Neues Element aus. Wählen Sie im daraufhin angezeigten Dialogfeld die Vorlage Stylesheet aus, nennen Sie die Datei site.css, und klicken Sie auf Hinzufügen.

    Add new item dialog for static file.

    Die Datei site.css wird im Projekt angezeigt und im Editor geöffnet. Ihre Ordnerstruktur sollte ungefähr wie im folgenden Beispiel aussehen:

    Static file structure as shown in Solution Explorer.

  3. Ersetzen Sie den Inhalt der Datei site.css durch den folgenden Code, und speichern Sie die Datei:

    .message {
    font-weight: 600;
    color: blue;
}

  4. Ersetzen Sie den Inhalt der Datei templates/HelloDjangoApp/index.html der App durch den folgenden Code. Der Code ersetzt das in Schritt 2 verwendete <strong>-Element durch ein <span>-Element, das auf die message-Stilklasse verweist. Die Verwendung einer Stilklasse bietet Ihnen mehr Flexibilität beim Formatieren des Elements. (Wenn Sie Visual Studio 2017, Version 15.7 oder eine frühere Version verwenden und die Datei index.html nicht in einen Unterordner von templates verschoben haben, finden Sie Informationen dazu in Schritt 2.4 zum Vorlagennamenpacing.)

    <html>
    <head>
        <title>{{ title }}</title>
        {% load static %} <!-- Instruct Django to load static files -->
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>

  5. Führen Sie das Projekt aus, um die Ergebnisse anzuzeigen. Wenn Sie fertig sind, beenden Sie den Server, und übertragen Sie Ihre Änderungen nach Bedarf in die Quellcodeverwaltung (wie in Schritt 2 erläutert).

Frage: Welche Bedeutung hat das Tag {% load static %}?

Antwort: Die {% load static %}-Zeile ist erforderlich, bevor auf statische Dateien in Elementen wie <head> und <body> verwiesen werden kann. Im Beispiel in diesem Abschnitt verweist „static files“ auf eine benutzerdefinierte Reihe an Django-Vorlagentags, wodurch Sie die {% static %}-Syntax zum Verweisen auf statische Dateien verwenden können. Ohne {% load static %} wird eine Ausnahme angezeigt, wenn die App ausgeführt wird.

Frage: Gibt es Konventionen für die Organisation von statischen Dateien?

Antwort: Sie können je nach Bedarf andere CSS-, JavaScript- und HTML-Dateien zu Ihrem static-Ordner hinzufügen. Eine typische Möglichkeit zum Organisieren von statischen Dateien besteht im Erstellen von Unterordnern namens Fonts (Schriftarten), Skripts und Content (Inhalt) (für Stylesheets und andere Dateien). Schließen Sie in jedem Fall diese Ordner im relativen Dateipfad in {% static %}-Verweisen ein.

Frage: Kann ich dieselbe Aufgabe ausführen, ohne das Tag {% load static %} zu verwenden?

Antwort: Ja, das ist möglich.

<html>
    <head>
        <title>{{ title }}</title>
        <link rel="stylesheet" type="text/css" href="../../static/site.css" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>

Schritt 3.3: Hinzufügen einer Seite zur App

Das Hinzufügen einer weiteren Seite zur App hat diese Folgen:

  • Fügen Sie eine Python-Funktion hinzu, die die Ansicht definiert.
  • Fügen Sie eine Vorlage zum Markup der Seite hinzu.
  • Fügen Sie der Datei urls.py des Django-Projekts das erforderliche Routing hinzu.

Mit den folgenden Schritten können Sie eine „Info“-Seite zum Projekt „HelloDjangoApp“ und Links zur Seite auf der Startseite hinzufügen:

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner templates/HelloDjangoApp. Klicken Sie auf Hinzufügen>Neues Element, und wählen Sie dann die Elementvorlage HTML-Seite aus. Geben Sie der Datei den Namen about.html, und wählen Sie Hinzufügen aus.

    Add new item dialog for about file.

    Tipp

    Wenn der Befehl Neues Element nicht im Menü Hinzufügen angezeigt wird, stellen Sie sicher, dass Sie den Server beendet haben, damit Visual Studio den Debugmodus beendet.

  2. Ersetzen Sie den Inhalt von about.html durch das folgende Markup (Sie ersetzen in Schritt 3.4 den expliziten Link zur Startseite durch eine einfache Navigationsleiste):

    <html>
    <head>
        <title>{{ title }}</title>
        {% load static %}
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    <body>
        <div><a href="home">Home</a></div>
        {{ content }}
    </body>
</html>

  3. Öffnen Sie die Datei views.py der App, und fügen Sie eine Funktion namens about hinzu, die die folgende Vorlage verwendet:

    def about(request):
    return render(
        request,
        "HelloDjangoApp/about.html",
        {
            'title' : "About HelloDjangoApp",
            'content' : "Example app page for Django."
        }
    )

  4. Öffnen Sie die Datei urls.py des Django-Projekts, und fügen Sie die folgende Zeile zum urlPatterns-Array hinzu:

    re_path(r'^about$', HelloDjangoApp.views.about, name='about'),

  5. Öffnen Sie die Datei templates/HelloDjangoApp/index.html, und fügen Sie die folgende Zeile unterhalb des <body>-Elements hinzu, um einen Link zur Seite „Info“ hinzuzufügen (Sie ersetzen diesen Link in Schritt 3.4 durch eine Navigationsleiste):

    <div><a href="about">About</a></div>

  6. Speichern Sie alle Dateien mit dem Menübefehl Datei>Alle speichern, oder drücken Sie einfach auf STRG+UMSCHALTTASTE+S. (Dieser Schritt ist nicht erforderlich, da das Projekt in Visual Studio Dateien automatisch speichert. Trotzdem ist es gut, diesen Befehl zu kennen!)

  7. Führen Sie das Projekt zum Beobachten der Ergebnisse aus, und überprüfen Sie die Navigation zwischen den Seiten. Schließen Sie den Server, wenn Sie fertig sind.

Frage: Ich habe versucht, „index“ für den Link zur Startseite zu verwenden, aber es funktioniert nicht. Warum?

Antwort: Die Ansichtsfunktion in der Datei views.py hat den Namen index, aber die URL-Routingmuster in der urls.py-Datei des Django-Projekts enthalten keinen regulären Ausdruck, der mit der Zeichenfolge „index“ übereinstimmt. Um mit der Zeichenfolge übereinzustimmen, müssen Sie einen weiteren Eintrag für das ^index$-Muster hinzufügen.

Wie im nächsten Abschnitt gezeigt, ist es besser, das {% url '<pattern_name>' %}-tag in der Seitenvorlage zu verwenden, um auf den Namen eines Musters zu verweisen. In diesem Fall erstellt Django die richtige URL für Sie. Ersetzen Sie z.B. <div><a href="home">Home</a></div> in about.html durch <div><a href="{% url 'index' %}">Home</a></div>. Die Verwendung von „index“ funktioniert hier, da das erste URL-Muster in urls.py in der Tat „index“ heißt (aufgrund des name='index'-Arguments). Sie können auch „home“ verwenden, um auf das zweite Muster zu verweisen.

Schritt 3.4: Verwenden der Vorlagenvererbung zur Erstellung einer Kopfzeile und einer Navigationsleiste

Statt explizite Navigationslinks auf jeder Seite zu verwenden, verwenden moderne Web-Apps einen Brandingheader und eine Navigationsleiste. Eine Navigationsleiste enthält beispielsweise die wichtigsten Seitenlinks und Popupmenüs. Um sicherzustellen, dass Header und Navigationsleiste auf allen Seiten gleich sind, wiederholen Sie nicht denselben Code in jeder Seitenvorlage. Stattdessen sollten Sie die allgemeinen Teile aller Ihrer Seiten zentral definieren.

Das Django-Vorlagensystem bietet zwei Optionen für die vorlagenübergreifende Wiederverwendung von bestimmten Elementen: Includedateien und Vererbung.

  • Includes sind andere Seitenvorlagen, die Sie an einer bestimmten Position in der verweisenden Vorlage mit der Syntax {% include <template_path> %} einfügen. Wenn Sie den Pfad dynamisch im Code ändern möchten, können Sie auch eine Variable verwenden. Includedateien werden im Textkörper einer Seite verwendet, um die freigegebene Vorlage an einer bestimmten Stelle auf der Seite zu importieren.

  • Vererbung verwendet {% extends <template_path> %} am Anfang einer Seitenvorlage, um eine freigegebene Basisvorlage anzugeben, auf der die verweisende Vorlage aufbaut. Die Vererbung wird häufig verwendet, um ein freigegebenes Layout, eine Navigationsleiste und andere Strukturen für die Seiten einer App zu definieren, damit verweisende Vorlagen nur bestimmte Bereiche der Basisvorlage namens Blöcke hinzufügen oder ändern können.

In beiden Fällen ist <template_path> relativ zum Ordner Templates der App (../ oder ./ sind ebenfalls zulässig).

Eine Basisvorlage grenzt Blöcke mit {% block <block_name> %}- und {% endblock %}-Tags ab. Wenn eine verweisende Vorlage dann Tags mit den gleichen Blocknamen verwendet, überschreibt dessen Blockinhalt den der Basisvorlage.

Die folgenden Schritte veranschaulichen die Vererbung:

  1. Erstellen Sie im Ordner templates/HelloDjangoApp der App eine neue HTML-Datei. Klicken Sie mit der rechten Maustaste auf den Ordner templates/HelloDjangoApp, klicken Sie auf Hinzufügen>Neues Element, und wählen Sie dann die Elementvorlage HTML-Seite aus. Geben Sie der Datei den Namen layout.html, und wählen Sie Hinzufügen aus.

    Add new item dialog for layout file.

  2. Ersetzen Sie den Inhalt der layout.html-Datei durch das folgende Markup. Wie Sie sehen enthält diese Vorlage einen Block namens „content“ (Inhalt). Hierbei handelt es sich um all das, was die verweisenden Seiten ersetzen müssen:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{ title }}</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
</head>

<body>
    <div class="navbar">
       <a href="/" class="navbar-brand">Hello Django</a>
       <a href="{% url 'home' %}" class="navbar-item">Home</a>
       <a href="{% url 'about' %}" class="navbar-item">About</a>
    </div>

    <div class="body-content">
{% block content %}{% endblock %}
        <hr/>
        <footer>
            <p>&copy; 2018</p>
        </footer>
    </div>
</body>
</html>

  3. Fügen Sie die folgenden Formate zur Datei static/site.css der App hinzu (in dieser exemplarischen Vorgehensweise wird kein reaktionsfähiges Design veranschaulicht; diese Formate generieren nur ein interessantes Ergebnis):

    .navbar {
    background-color: lightslategray;
    font-size: 1em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    padding: 8px 5px 8px 5px;
}

.navbar a {
    text-decoration: none;
    color: inherit;
}

.navbar-brand {
    font-size: 1.2em;
    font-weight: 600;
}

.navbar-item {
    font-variant: small-caps;
    margin-left: 30px;
}

.body-content {
    padding: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

  4. Ändern Sie die Datei templates/HelloDjangoApp/index.html, um auf die Basisvorlage zu verweisen und sie auf der Seite verwendbar zu machen. Fügen Sie die folgende Zeile als Zeile 1 auf der HTML-Seite hinzu (oberhalb des HTML-Tags):

    {% extends "HelloDjangoApp/layout.html" %}

  5. Sie werden feststellen, dass diese Vorlage mithilfe der Vererbung einfach innerhalb des BODY-Tags implementiert wird, um den Inhaltsblock außer Kraft zu setzen:

    {% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}

  6. Ändern Sie die Datei templates/HelloDjangoApp/about.html auf die gleiche Weise, um die Layoutvorlage verfügbar zu machen. Fügen Sie die gleiche Zeile aus Schritt 1 auf der HTML-Seite hinzu (oberhalb des HTML-Tags):

    {% extends "HelloDjangoApp/layout.html" %}

  7. Implementieren Sie dann mithilfe der Vererbung die Vorlage innerhalb des BODY-Tags, um den Inhaltsblock außer Kraft zu setzen:

    {% block content %}
{{ content }}
{% endblock %}

  8. Führen Sie den Server aus, um die Ergebnisse anzuzeigen. Schließen Sie den Server, wenn Sie fertig sind.

    Running app showing the nav bar.

  9. Da Sie erhebliche Änderungen an der App vorgenommen haben, ist nun erneut ein guter Zeitpunkt, um Ihre Änderungen zur Quellcodeverwaltung hinzuzufügen.

Nächste Schritte

Use the full Django Web Project template (Verwenden Sie die vollständige Vorlage „Django-Webprojekt“)

Ausführlichere Informationen