Điều hướng trang web

Thuộc phần Kiến thức cơ bản về Django trong hành trình Django của Coddy. Bài học 23 trên 23.

Hiện trang web có năm trang dùng chung bố cục (trang About cũng đã có template), nhưng thanh điều hướng trong base.html chỉ liệt kê ba trang và không cho biết bạn đang ở trang nào.

Mỗi template đều có thể đọc request, đối tượng request dành cho trang đó. Django thêm nó vào ngữ cảnh (context) của mọi template vì TEMPLATES trong settings.py liệt kê bộ xử lý ngữ cảnh (context processor) request, một hàm thêm một tên vào mọi ngữ cảnh. request.resolver_match mô tả tuyến đường được khớp: url_name là tên của tuyến đường không kèm namespace ("contact"), còn view_name là tên đầy đủ ("menu:contact"). Khung trang có thể hiển thị một dòng chỉ trên một trang:

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

Thẻ này cũng có thể nằm bên trong thẻ <a> để thêm một thuộc tính chỉ trên một trang:

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

Thử thách

Trung bình

Hiển thị rõ trang bạn đang xem trên thanh điều hướng.

Trong base.html, tạo các liên kết trên thanh điều hướng theo thứ tự Trang chủ, Thực đơn, Đồ uống, Giờ mở cửa và Giới thiệu, mỗi liên kết dùng địa chỉ được tạo bằng {% url %}. Trên mỗi trang, chỉ liên kết đến trang đó có class="active".
Trong style.css, đặt kiểu chữ đậm cho nav a.active.

Nhấp vào từng liên kết trên thanh điều hướng: chỉ liên kết đến trang bạn đang xem được in đậm.

Tự làm thử

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