Nawigacja po stronie

Część sekcji Podstawy Django ścieżki Django w Coddy. Lekcja 23 z 23.

Witryna ma teraz pięć stron ze wspólnym układem (strona About też ma już szablon), ale nawigacja w base.html wymienia tylko trzy i nigdy nie pokazuje, na której stronie jesteś.

Każdy szablon może odczytać request — żądanie, którego dotyczy strona. Django dodaje je do kontekstu każdego szablonu, ponieważ w settings.py lista TEMPLATES zawiera procesor kontekstu request, czyli funkcję, która dodaje nazwę do każdego kontekstu. request.resolver_match opisuje dopasowaną trasę: url_name to jej nazwa bez przestrzeni nazw ("contact"), a view_name to pełna nazwa ("menu:contact"). Szablon może wyświetlić wiersz tylko na jednej stronie:

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

Znacznik można też umieścić wewnątrz znacznika <a>, aby dodać atrybut tylko na jednej stronie:

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

Wyzwanie

Średni

Spraw, aby nawigacja wskazywała, gdzie jesteś.

W pliku base.html umieść linki nawigacyjne Home, Menu, Drinks, Hours i About, w tej kolejności, a adres każdego z nich utwórz za pomocą {% url %}. Na każdej stronie tylko link do tej strony ma mieć class="active".
W pliku style.css ustaw pogrubienie dla nav a.active.

Kliknij każdy link nawigacyjny: pogrubiony będzie tylko link do strony, na której jesteś.

Spróbuj swoich sił

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