Seitennavigation

Teil des Abschnitts Django-Grundlagen der Django-Journey von Coddy. Lektion 23 von 23.

Die Website hat jetzt fünf Seiten mit dem gemeinsamen Layout (auch „About“ hat jetzt eine Vorlage), aber die Navigation in base.html listet drei auf und zeigt nie an, auf welcher Seite du dich befindest.

Jede Vorlage kann auf request zugreifen, die Anfrage, für die die Seite aufgerufen wird. Django fügt sie zum Kontext jeder Vorlage hinzu, weil TEMPLATES in settings.py den request-Kontextprozessor aufführt, eine Funktion, die jedem Kontext einen Namen hinzufügt. request.resolver_match beschreibt die passende Route: url_name ist ihr Name ohne den Namensraum ("contact"), und view_name ist der vollständige Name ("menu:contact"). Eine Vorlage kann eine Zeile nur auf einer Seite anzeigen:

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

Das Tag kann auch innerhalb eines <a>-Tags stehen, um nur auf einer Seite ein Attribut hinzuzufügen:

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

Aufgabe

Mittel

Lass die Navigation anzeigen, wo du dich befindest.

Erstelle in base.html die Navigationslinks Home, Menü, Getränke, Öffnungszeiten und Über uns, in dieser Reihenfolge, wobei jede Adresse mit {% url %} erstellt wird. Auf jeder Seite erhält nur der Link zu dieser Seite class="active".
Setze in style.css nav a.active auf fett.

Klicke auf jeden Navigationslink: Nur der Link zur Seite, auf der du dich befindest, wird fett.

Probier es selbst

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