التنقّل في الموقع

جزء من قسم أساسيات Django في رحلة Django على Coddy. الدرس 23 من 23.

أصبح للموقع الآن خمس صفحات تستخدم التخطيط المشترك (وأصبحت صفحة «نبذة» تملك قالبًا أيضًا)، لكن قائمة التنقل في 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، اجعل روابط شريط التنقل إلى الصفحة الرئيسية، والقائمة، والمشروبات، وساعات العمل، ومن نحن، بهذا الترتيب، على أن يُنشأ عنوان كل رابط باستخدام {% 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>