页面之间的链接

本课属于 Coddy Django 学习旅程的“Django 基础”单元。第 16 课，共 23 课。

每种饮品都有自己的页面，地址是 /drinks/<slug>/，而 /drinks/ 上的列表应链接到这些页面。在模板中，{% url %} 标签会根据路由名称生成地址，就像视图中的 reverse() 一样：

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

名称要放在最前面，并用引号括起来，同时带上命名空间。转换器的值放在后面，用空格分隔，也可以是变量：在循环中，{% url 'menu:table' table.number %} 会生成每张桌子的地址。现在，DRINKS 中的每种饮品都带有自己的 slug。

如果名称或值不正确，页面就会因 NoReverseMatch 而崩溃，所以你在构建页面时就能发现失效的链接，而不是等访客点击时才发现。

挑战

简单

在 drinks.html 中，将每种饮品的名称设为指向其页面的链接：<a href="...">Latte</a> 会跳转到 /drinks/latte/。使用 {% url %} 和饮品的 slug 构建地址。

在 /drinks/ 页面上，点击 Flat White：Flat White 页面会打开。

亲手试试

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