Menu
CoddyTech

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 für About gibt es eine Vorlage), aber die Navigation in base.html listet drei auf und zeigt nie an, wo du dich befindest.

Jede Vorlage kann auf request zugreifen, die Anfrage, die gerade beantwortet wird, da settings.py den Context Processor request in TEMPLATES aufführt. request.resolver_match beschreibt die passende Route: url_name ist ihr Name ohne den Namespace ("contact") und view_name der vollständige Name ("menu:contact"). Ein Rahmen kann auf nur einer Seite eine Zeile anzeigen:

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

Aufgabe

Mittel

Erstelle in base.html die Navigationslinks Startseite, Speisekarte, 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".

Gib nav a.active in style.css einen Stil, zum Beispiel fetten Text. Drücke dann auf Run und klicke dich durch die Navigation.

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>
quiz iconTeste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Django-Grundlagen

Übe selbstständig: Django-Playground