Statische Dateien

Teil des Abschnitts Django-Grundlagen der Django-Journey von Coddy. Lektion 20 von 23.

Die Seiten des Cafés sind schwarz auf weiß. Ein Stylesheet würde das ändern, und Stylesheets, Skripte und Bilder sind statische Dateien: Der Server sendet sie unverändert und ohne View. Django findet sie genauso wie Templates, im Ordner static/ jeder installierten App, darin nochmals mit dem Namen der App:

shop/static/shop/cart.js

Sie werden unter STATIC_URL bereitgestellt, in settings.py mit dem Wert "static/", sodass die Datei unter /static/shop/cart.js erreichbar ist. Ein Template erstellt die Adresse mit {% static %}, nachdem {% load static %} geladen wurde:

{% load static %}
<script src="{% static 'shop/cart.js' %}"></script>

Ein Stylesheet wird mit <link rel="stylesheet" href="..."> in den <head> eingefügt. Füge es in base.html ein, dann wird es auf jeder Seite eingebunden, die davon erbt.

Aufgabe

Einfach

Erstelle menu/static/menu/style.css mit mindestens body { background: #fdf8f2; }.
Lade in base.html die Static-Tags und verlinke das Stylesheet im <head>, damit jede Seite /static/menu/style.css verlinkt.

Klicke auf Ausführen: Die Seiten werden cremefarben. Öffne /static/menu/style.css, um die Datei zu sehen, die Django bereitstellt.

Probier es selbst

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{% block title %}Corner Café{% endblock %}</title>
</head>
<body>
    <nav>
        <a href="{% url 'menu:home' %}">Home</a>
        <a href="{% url 'menu:drinks' %}">Drinks</a>
        <a href="{% url 'menu:about' %}">About</a>
    </nav>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>