Navigasi Situs

Termasuk bagian Dasar-Dasar Django dalam perjalanan Django di Coddy. Pelajaran 23 dari 23.

Situs ini kini memiliki lima halaman dengan tata letak yang sama, termasuk About yang juga sudah memiliki template, tetapi navigasi di base.html hanya mencantumkan tiga halaman dan tidak pernah menunjukkan halaman yang sedang kamu buka.

Setiap template dapat membaca request, yaitu permintaan untuk halaman tersebut. Django menambahkannya ke konteks setiap template karena TEMPLATES di settings.py mencantumkan pemroses konteks request, yaitu fungsi yang menambahkan nama ke setiap konteks. request.resolver_match menjelaskan rute yang cocok: url_name adalah namanya tanpa namespace ("contact"), sedangkan view_name adalah nama lengkapnya ("menu:contact"). Sebuah frame dapat menampilkan satu baris hanya di satu halaman:

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

Tag tersebut juga dapat diletakkan di dalam tag <a> untuk menambahkan atribut hanya di satu halaman:

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

Tantangan

Sedang

Buat nav menunjukkan halaman yang sedang kamu buka.

Di base.html, buat tautan nav Home, Menu, Drinks, Hours, dan About, dalam urutan tersebut, masing-masing dengan alamat yang dibuat menggunakan {% url %}. Di setiap halaman, hanya tautan ke halaman tersebut yang mendapat class="active".
Di style.css, buat nav a.active menjadi tebal.

Klik setiap tautan nav: hanya tautan ke halaman yang sedang kamu buka yang menjadi tebal.

Coba sendiri

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