Navigation du site

Fait partie de la section Les bases de Django du Journey Django de Coddy. Leçon 23 sur 23.

Le site comporte maintenant cinq pages avec la même mise en page (la page About a aussi son modèle), mais la navigation dans base.html en affiche trois et n’indique jamais où tu te trouves.

Chaque modèle peut lire request, la requête pour laquelle la page est affichée. Django l’ajoute au contexte de chaque modèle, car TEMPLATES dans settings.py répertorie le processeur de contexte request, une fonction qui ajoute un nom à chaque contexte. request.resolver_match décrit la route qui a correspondu : url_name est son nom sans l’espace de noms ("contact"), et view_name son nom complet ("menu:contact"). Un modèle de base peut afficher une ligne sur une seule page :

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

La balise peut aussi se trouver à l’intérieur d’une balise <a>, pour ajouter un attribut sur une seule page :

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

Défi

Moyen

Fais en sorte que la navigation indique où tu te trouves.

Dans base.html, crée les liens de navigation Home, Menu, Drinks, Hours et About, dans cet ordre, chacun pointant vers son adresse construite avec {% url %}. Sur chaque page, seul le lien vers cette page reçoit class="active".
Dans style.css, mets nav a.active en gras.

Clique sur chaque lien de navigation : seul le lien de la page où tu te trouves s’affiche en gras.

Essayez vous-même

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