Füge eine Stylesheet und ein Bild hinzu

Einführung

Dieser Tutorial beginnt dort, wo **Create Some Automated Tests** aufgehört hat. Wir haben eine getestete Weboberflächen-Applikation gebaut und werden nun eine Stylesheet und ein Bild hinzufügen.

Skills Graph

Anpassen des Aussehens Ihrer App

Erstellen Sie zunächst ein Verzeichnis namens static im Verzeichnis polls. Django wird dort nach statischen Dateien suchen, ähnlich wie es Templates in polls/templates/ findet.

Die Django-Einstellung STATICFILES_FINDERS enthält eine Liste von Findern, die wissen, wie statische Dateien aus verschiedenen Quellen entdeckt werden können. Einer der Standardfinder ist AppDirectoriesFinder, der nach einem Unterverzeichnis namens "static" in jeder der INSTALLED_APPS sucht, wie das in polls, das wir gerade erstellt haben. Die Administrationswebsite verwendet dieselbe Verzeichnisstruktur für ihre statischen Dateien.

Innerhalb des gerade erstellten static-Verzeichnisses erstellen Sie ein weiteres Verzeichnis namens polls und darin eine Datei namens style.css. Mit anderen Worten, Ihre Stylesheet-Datei sollte sich unter polls/static/polls/style.css befinden. Aufgrund der Arbeitsweise des AppDirectoriesFinder-Statikdateienfinders können Sie diese statische Datei in Django als polls/style.css referenzieren, ähnlich wie Sie den Pfad zu Templates referenzieren.

Namensraum für statische Dateien

Genau wie bei Templates könnten wir möglicherweise statische Dateien direkt in polls/static ablegen (anstatt ein weiteres polls-Unterverzeichnis zu erstellen), aber das wäre tatsächlich eine schlechte Idee. Django wird die erste statische Datei auswählen, deren Name übereinstimmt, und wenn Sie eine statische Datei mit demselben Namen in einer anderen Anwendung hätten, wäre Django nicht in der Lage, zwischen ihnen zu unterscheiden. Wir müssen Django die richtige Datei anzeigen können, und der beste Weg, dies sicherzustellen, ist, indem wir sie namespacing. Das heißt, indem wir diese statischen Dateien in einem weiteren Verzeichnis ablegen, das nach der Anwendung selbst benannt ist.

Fügen Sie folgenden Code in diese Stylesheet-Datei (polls/static/polls/style.css) ein:

li a {
  color: green;
}

Fügen Sie anschließend Folgendes am Anfang von polls/templates/polls/index.html hinzu:

{% load static %}

<link rel="stylesheet" href="{% static 'polls/style.css' %}">

Das {% static %}-Template-Tag generiert die absolute URL von statischen Dateien.

Das ist alles, was Sie für die Entwicklung tun müssen.

Starten Sie den Server (oder starten Sie ihn neu, wenn er bereits läuft):

python manage.py runserver 0.0.0.0:8080

Neuladen Sie die Registerkarte Web 8080 und Sie sollten sehen, dass die Frage-Links grün sind (Django-Style!), was bedeutet, dass Ihr Stylesheet richtig geladen wurde.

Hinzufügen eines Hintergrundbilds

Als nächstes erstellen wir ein Unterverzeichnis für Bilder. Erstellen Sie ein Unterverzeichnis images im Verzeichnis polls/static/polls/. Fügen Sie in diesem Verzeichnis jede Bilddatei hinzu, die Sie als Hintergrund verwenden möchten. Im Rahmen dieses Tutorials verwenden wir eine Datei namens background.png, die Sie im Verzeichnis /tmp/background.png in der VM finden können.

Sie müssen die Datei /tmp/background.png in polls/static/polls/images/background.png kopieren.

Fügen Sie anschließend einen Verweis auf Ihr Bild in Ihrem Stylesheet (polls/static/polls/style.css) hinzu:

body {
  background: white url("images/background.png") no-repeat;
}

Neuladen Sie die Registerkarte Web 8080 und Sie sollten sehen, dass das Hintergrundbild in der oberen linken Ecke des Bildschirms geladen wird.

Das {% static %}-Template-Tag ist nicht in statischen Dateien verfügbar, die nicht von Django generiert werden, wie Ihr Stylesheet. Sie sollten immer relative Pfade verwenden, um Ihre statischen Dateien miteinander zu verknüpfen, da Sie dann STATIC_URL (das vom static-Template-Tag verwendet wird, um seine URLs zu generieren) ändern können, ohne dass Sie auch eine Reihe von Pfaden in Ihren statischen Dateien ändern müssen.

Dies sind die Grundlagen. Weitere Details zu Einstellungen und anderen Teilen des Frameworks finden Sie unter the static files howto </howto/static-files/index> und the staticfiles reference </ref/contrib/staticfiles>. Deploying static files </howto/static-files/deployment> behandelt die Verwendung von statischen Dateien auf einem realen Server.

Wenn Sie sich mit den statischen Dateien vertraut machen, lesen Sie Customizing Django's Admin Site, um zu lernen, wie Sie die automatisch generierte Django-Administrationswebsite anpassen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Add a Stylesheet and an Image" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.