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 %} crea 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 %} crea la dirección de cada mesa. Ahora, cada bebida de DRINKS tiene su propio slug.

Un nombre o valor incorrecto hace que la página falle con NoReverseMatch, así que un enlace roto se detecta mientras creas 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.

Pulsa Ejecutar y haz clic en Flat White en /drinks/.

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>