Menu
CoddyTech

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 aus, ohne eine View. Django findet sie auf dieselbe Weise wie Templates: im Ordner static/ jeder installierten App, darin erneut mit dem Namen der App:

shop/static/shop/cart.js

Django stellt sie unter Adressen bereit, die mit STATIC_URL beginnen. In settings.py ist das "static/", daher ist die Datei unter /static/shop/cart.js erreichbar. Ein Template erstellt die Adresse mit {% static %}, nachdem {% load static %} geladen wurde:

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

Ein <link rel="stylesheet" href="..."> für ein Stylesheet gehört in den <head>. Füge es in base.html ein, dann wird es auf jeder Seite eingebunden, die diese Vorlage erweitert.

challenge icon

Aufgabe

Einfach

Gib der Website ein Stylesheet.

  1. Erstelle menu/static/menu/style.css mit mindestens body { background: #fdf8f2; }.
  2. Lade in base.html die statischen Tags und verknüpfe das Stylesheet im <head>, damit jede Seite auf /static/menu/style.css verweist.

Drücke auf Ausführen: Die Seiten werden cremefarben.

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>
quiz iconTeste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Django-Grundlagen

Übe selbstständig: Django-Playground