ניווט באתר

חלק מהיחידה יסודות Django במסלול ה-Django של Coddy. שיעור 23 מתוך 23.

באתר יש עכשיו חמשה עמודים עם הפריסה המשותפת (גם ל־About יש תבנית), אבל תפריט הניווט ב־base.html מציג שלושה, והוא אף פעם לא מראה באיזה עמוד נמצאים.

כל תבנית יכולה לקרוא את request, הבקשה של העמוד. Django מוסיף אותו להקשר של כל תבנית, כי TEMPLATES שב־settings.py מציג את מעבד ההקשר request, פונקציה שמוסיפה שם לכל הקשר. request.resolver_match מתאר את הנתיב שהתאים: url_name הוא שמו ללא מרחב השמות ("contact"), ו־view_name הוא השם המלא ("menu:contact"). מסגרת יכולה להציג שורה בעמוד אחד בלבד:

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

אפשר גם למקם את התג בתוך תגית <a>, כדי להוסיף מאפיין בעמוד אחד בלבד:

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

אתגר

בינוני

הציגו בסרגל הניווט היכן אתם נמצאים.

ב־base.html, הציגו בסרגל הניווט את הקישורים Home, Menu, Drinks, Hours ו־About, בסדר הזה, כשכל כתובת נבנית באמצעות {% url %}. בכל עמוד, רק הקישור לעמוד הזה מקבל class="active".
ב־style.css, הפכו את nav a.active למודגש.

לחצו על כל קישור בסרגל הניווט: רק הקישור לעמוד שבו אתם נמצאים יהפוך למודגש.

נסו בעצמכם

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