Site Navigation

Part of the Django Basics section of Coddy's Django journey. Lesson 23 of 23.

The site has five pages with the shared layout now (About got a template too), but the nav in base.html lists three, and it never shows where you are.

Every template can read request, the request the page is for. Django adds it to every template's context because TEMPLATES in settings.py lists the request context processor, a function that adds a name to every context. request.resolver_match describes the route that matched: url_name is its name without the namespace ("contact"), and view_name the full name ("menu:contact"). A frame can show a line on one page only:

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

The tag can also sit inside an <a> tag, to add an attribute on one page only:

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

Challenge

Medium

Make the nav show where you are.

In base.html, make the nav link Home, Menu, Drinks, Hours and About, in that order, each address built with {% url %}. On each page, only the link to that page gets class="active".
In style.css, make nav a.active bold.

Click each nav link: only the link to the page you are on turns bold.

Try it yourself

{% 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>