Добавляем навигацию в шаблоны Django

Если вы всё сделали правильно — страницы управления доступом и статичные страницы уже доступны по своим адресам. Но пользователь не сможет попасть на них, пока на сайте нет ссылок на эти страницы: откуда пользователю знать адреса в нашем проекте?Создадим навигацию по новым страницам. Вот как она должна выглядеть для неавторизованного пользователя:

• 

для авторизованного пользователя:

• 

В коде:

<header>
  <nav class="navbar navbar-light" style="background-color: lightskyblue">
    <div class="container">
      <a class="navbar-brand" href="{% url 'posts:index' %}">
        <img src="{% static 'img/logo.png' %}" width="30" height="30" class="d-inline-block align-top" alt="">
        <span style="color:red">Ya</span>tube
      </a>
      {# Добавлено в спринте #}

      {% comment %}
      Меню - список пунктов со стандартными классами Bootsrap.
      Класс nav-pills нужен для выделения активных пунктов 
      {% endcomment %}
      <ul class="nav nav-pills">
        <li class="nav-item"> 
          <a class="nav-link" href="{% url 'about:author' %}">Об авторе</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="<!--  -->">Технологии</a>
        </li>
        {% <!-- Проверка: авторизован ли пользователь? --> %}
        <li class="nav-item"> 
          <a class="nav-link" href="<!--  -->">Новая запись</a>
        </li>
        <li class="nav-item"> 
          <a class="nav-link link-light" href="<!--  -->">Изменить пароль</a>
        </li>
        <li class="nav-item"> 
          <a class="nav-link link-light" href="<!--  -->">Выйти</a>
        </li>
        <li>
          Пользователь: {{ user.username }}
        <li>
        {% else %}
        <li class="nav-item"> 
          <a class="nav-link link-light" href="<!--  -->">Войти</a>
        </li>
        <li class="nav-item"> 
          <a class="nav-link link-light" href="<!--  -->">Регистрация</a>
        </li>
        {% endif %}
      </ul>
      {# Конец добавленого в спринте #}
    </div>
  </nav>      
</header> 

Замените существующий код в файле header.html кодом из листинга. Добавьте адреса в ссылки. Сделайте проверку: авторизован ли пользователь; если запустить проект без этой проверки — возникнет ошибка синтаксиса.

Пункт меню Новая запись вы сделаете в финальном задании спринта; пока что можно оставить ссылку пустой.

Как сделать пункты меню активными

Пользователь должен понимать, в каком разделе сайта он находится. Для этого текущий пункт меню «подсвечивают» — например, выделяют его цветом. Обычно для этого достаточно добавить к нему класс active — а свойства этого класса описать в CSS-файле (в Bootstrap они уже описаны, это же фреймворк!).

Вот так можно подсветить пункт меню «Об авторе»:

<li class="nav-item">
  <a class="nav-link active" href="{% url 'about:author' %}">Об авторе</a>
</li> 

Django позволяет узнать имя view-функции, которая вызвала текущий шаблон. Это имя доступно в шаблоне в переменной {{ request.resolver_match.view_name }}.

Чтобы понять, на каком из пунктов меню должен стоять класс active, достаточно сделать такую проверку:

<li class="nav-item">              
  <a class="nav-link 
     {% if request.resolver_match.view_name  == 'about:author' %}
       active
     {% endif %}"
     href="{% url 'about:author' %}"
  >
    Об авторе
  </a>
</li> 

Это добавит класс при совпадении адреса текущей view-функции и about:author.

Такую проверку придётся проводить в каждом пункте меню, получится громоздко и нечитаемо.

Сократить код поможет тег шаблонов {% with ... as ... %}: он подменит длинное имя переменной request.resolver_match.view_name на какое-нибудь короткое имя; в примере выбрано имя view_name.

{% comment %}
Внутри тега {% with %} переменная view_name - 
это синоним для request.resolver_match.view_name
{% endcomment %}

{% with request.resolver_match.view_name as view_name %}  
<!-- Прочий код не показан -->
<li class="nav-item">              
  <a class="nav-link {% if view_name  == 'about:author' %}active{% endif %}" 
     href="{% url 'about:author' %}"
  >
    Об авторе
  </a>
</li>
<!-- Прочий код не показан -->
{% endwith %} 

Так получится короче.