Static Files

Part of the Django Basics section of Coddy's Django journey. Lesson 20 of 23.

The café's pages are black on white. A stylesheet would change that, and stylesheets, scripts and images are static files: the server sends them as they are, without a view. Django finds them the way it finds templates, in each installed app's static/ folder, with the app's name inside again:

shop/static/shop/cart.js

They answer under STATIC_URL, "static/" in settings.py, so that file is /static/shop/cart.js. A template builds the address with {% static %}, after {% load static %}:

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

A stylesheet's <link rel="stylesheet" href="..."> goes in the <head>. Put it in base.html and every page that extends it gets it.

Challenge

Easy

Create menu/static/menu/style.css with at least body { background: #fdf8f2; }.
In base.html, load the static tags and link the stylesheet in the <head>, so every page links /static/menu/style.css.

Press Run: the pages turn cream. Open /static/menu/style.css to see the file Django serves.

Try it yourself

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