Pliki statyczne

Część sekcji Podstawy Django ścieżki Django w Coddy. Lekcja 20 z 23.

Strony kawiarni są czarne na białym tle. Arkusz stylów by to zmienił, a arkusze stylów, skrypty i obrazy to pliki statyczne: serwer wysyła je w niezmienionej postaci, bez widoku. Django znajduje je tak samo jak szablony, w folderze static/ każdej zainstalowanej aplikacji, ponownie z nazwą aplikacji w ścieżce:

shop/static/shop/cart.js

Django udostępnia je pod adresami zaczynającymi się od STATIC_URL, który w pliku settings.py ma wartość "static/", więc ten plik jest dostępny pod adresem /static/shop/cart.js. Szablon tworzy adres za pomocą {% static %}, po użyciu {% load static %}:

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

Element <link rel="stylesheet" href="..."> arkusza stylów należy umieścić w sekcji <head>. Umieść go w pliku base.html, a znajdzie się na każdej stronie, która go rozszerza.

Wyzwanie

Łatwy

Dodaj arkusz stylów do witryny.

Utwórz plik menu/static/menu/style.css zawierający co najmniej body { background: #fdf8f2; }.
W pliku base.html załaduj tagi statyczne i dodaj odnośnik do arkusza stylów w sekcji <head>, aby każda strona zawierała odnośnik /static/menu/style.css.

Naciśnij Uruchom: strony zmienią kolor na kremowy.

Spróbuj swoich sił

<!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>