Archivos estáticos

Parte de la sección Conceptos básicos de Django del Journey de Django de Coddy. Lección 20 de 23.

Las páginas de la cafetería tienen texto negro sobre fondo blanco. Una hoja de estilos cambiaría eso, y las hojas de estilos, los scripts y las imágenes son archivos estáticos: el servidor los envía tal cual, sin una vista. Django los encuentra como encuentra las plantillas, en la carpeta static/ de cada aplicación instalada, con el nombre de la aplicación dentro, otra vez:

shop/static/shop/cart.js

Se sirven bajo STATIC_URL, "static/" en settings.py, así que ese archivo es /static/shop/cart.js. Una plantilla construye la dirección con {% static %}, después de {% load static %}:

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

La etiqueta <link rel="stylesheet" href="..."> de una hoja de estilos va en <head>. Ponla en base.html y todas las páginas que la extiendan la tendrán.

Desafío

Fácil

Crea menu/static/menu/style.css con al menos body { background: #fdf8f2; }.
En base.html, carga las etiquetas estáticas y enlaza la hoja de estilos en <head>, para que todas las páginas enlacen /static/menu/style.css.

Pulsa Ejecutar: las páginas adquieren un tono crema. Abre /static/menu/style.css para ver el archivo que sirve Django.

Pruébalo tú mismo

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