Enlaces entre páginas

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

Cada bebida tiene su página en /drinks/<slug>/, y la lista de /drinks/ debería enlazar a ellas. En una plantilla, la etiqueta {% url %} construye una dirección a partir del nombre de una ruta, igual que hace reverse() en una vista:

<a href="{% url 'menu:about' %}">About us</a>
<a href="{% url 'menu:table' 7 %}">Table 7</a>

El nombre va primero, entre comillas, con su espacio de nombres. Los valores del convertidor van después, separados por espacios, y pueden ser variables: en un bucle, {% url 'menu:table' table.number %} construye la dirección de cada mesa. Cada bebida de DRINKS ahora incluye su propio slug.

Un nombre o valor incorrecto hace que la página falle con NoReverseMatch, así que un enlace roto aparece mientras construyes la página, no cuando un visitante hace clic en él.

Desafío

Fácil

En drinks.html, convierte el nombre de cada bebida en un enlace a su página: <a href="...">Latte</a> lleva a /drinks/latte/. Construye la dirección con {% url %} y el slug de la bebida.

En /drinks/, haz clic en Flat White: se abrirá la página de Flat White.

Pruébalo tú mismo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Our Drinks</title>
</head>
<body>
    <h1>Our Drinks</h1>
    <p class="count">{{ drinks|length }} drink{{ drinks|pluralize }}</p>
    <ul>
        {% for drink in drinks %}
            <li class="drink">
                {{ drink.name }}
                <span class="price">${{ drink.price|floatformat:2 }}</span>
                {% if drink.sold_out %}
                    <span class="sold-out">Sold out</span>
                {% endif %}
            </li>
        {% empty %}
            <li>No drinks today.</li>
        {% endfor %}
    </ul>
</body>
</html>