Menu
CoddyTech

Навигация по сайту

Часть раздела Основы Django путешествия по Django на Coddy. Урок 23 из 23.

Теперь у сайта пять страниц с общей разметкой (для About тоже появился шаблон), но в навигации в base.html перечислены три страницы, и она никак не показывает, на какой странице вы находитесь.

Каждый шаблон может читать request — запрос, для которого отображается страница. Django добавляет его в контекст каждого шаблона, потому что в settings.py параметр TEMPLATES содержит контекстный процессор 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>
challenge icon

Задание

Средне

Пусть навигация показывает, где вы находитесь.

  1. В base.html создайте ссылки навигации «Home», «Menu», «Drinks», «Hours» и «About» именно в таком порядке; адрес каждой сформируйте с помощью {% url %}. На каждой странице только ссылка на эту страницу должна иметь class="active".
  2. В 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>
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Основы Django

Потренируйтесь самостоятельно: Песочница Django