网站导航

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

现在，网站的 5 个页面都使用了共享布局（About 也有了模板），但 base.html 中的导航只列出了 3 个页面，也不会显示你当前所在的位置。

每个模板都可以读取 request，也就是当前页面对应的请求。Django 会将它添加到每个模板的上下文中，因为 settings.py 中的 TEMPLATES 列出了 request 上下文处理器，这是一个会向每个上下文添加名称的函数。request.resolver_match 描述了匹配的路由：url_name 是不带命名空间的路由名称（"contact"），view_name 则是完整名称（"menu:contact"）。你可以让框架只在一个页面上显示一行内容：

{% if request.resolver_match.url_name == "contact" %}
    <p>We reply within a day.</p>
{% endif %}

这个标签也可以放在 <a> 标签内，这样就能只在一个页面上添加属性：

<a href="/contact/"{% if request.resolver_match.url_name == "contact" %} class="active"{% endif %}>Contact</a>

挑战

中等

让导航栏显示你当前所在的页面。

在 base.html 中，按 Home、Menu、Drinks、Hours 和 About 的顺序设置导航链接，并使用 {% url %} 构建每个链接的地址。在每个页面上，只有指向该页面的链接会获得 class="active"。
在 style.css 中，将 nav a.active 设为粗体。

点击每个导航链接：只有指向你当前所在页面的链接会变为粗体。

亲手试试

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{% block title %}Corner Café{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'menu/style.css' %}">
</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>