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.
💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken
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.
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.
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.
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 dannSTATIC_URL
(das vomstatic
-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.
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.