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 del mismo modo que 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

Django los sirve en direcciones que empiezan por STATIC_URL, que en settings.py es "static/", así que ese archivo está en /static/shop/cart.js. Una plantilla crea la dirección con {% static %}, después de {% load static %}:

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

Un <link rel="stylesheet" href="..."> de una hoja de estilos va en <head>. Ponlo en base.html y todas las páginas que lo extiendan lo incluirán.

Desafío

Fácil

Añade una hoja de estilos al sitio.

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

Pulsa Ejecutar: las páginas se vuelven de color crema.

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>