Сухой способ применить текущий класс к элементам навигации в шаблонах Django

Question

Допустим, в каждом из них есть навигация, nav1, nav2, nav3 и множество subnav.

Для эффекта css необходимо применить class=current к текущим выбранным навигационным элементам.

Какой сухой способ сделать это.

Для вложенных файлов вы можете проверить, совпадает ли request.get_full_path с URL, на который ссылается subnav, в базовом шаблоне.

Как можно сделать его сухим для навигации.

Answer 1

Если вы организовали свой проект в шаблон base.html, который расширен другими шаблонами, например, appname/pagename.html, вы можете использовать шаблонно-ориентированный подход для выделения активного элемента навигации.

Этот подход дает вам некоторые развязывающие преимущества, которые я подробно отметил в конце этого ответа.

Я обнаружил, что этот подход очень полезен для обработки широких элементов навигации, которые остаются неизменными на большей части или на всем сайте. Возможно, это не подходящее решение для более подробных элементов навигации, таких как рендеринг динамического списка элементов, найденных в вашем хранилище данных.

В шаблоне base.html добавьте блок к каждому элементу навигации, присваивая блокам уникальные имена:

<ul class="nav">
  <li class="{% block navbar_class-home %}{% endblock %}">
    <a href="#">Home</a>
  </li>
  <li class="{% block navbar_class-about %}{% endblock %}">
    <a href="#">About</a>
  </li>
  <li class="{% block navbar_class-pricing %}{% endblock %}">
    <a href="#">Pricing</a>
  </li>
</ul>

В шаблоне appname/pagename.html, если вы хотите, чтобы один из элементов nav был активным, переопределите соответствующий блок, используя active в качестве содержимого. Например, чтобы выделить элемент «О программе»:

{% block navbar_class-about %} current {% endblock %}

Когда вы используете представление, которое отображает этот шаблон, оно будет выглядеть так:

<ul class="nav">
  <li class="">
    <a href="#">Home</a>
  </li>
  <li class=" current ">
    <a href="#">About</a>
  </li>
  <li class="">
    <a href="#">Pricing</a>
  </li>
</ul>

Это обеспечивает начальный рендеринг, который не зависит от JavaScript. (Вы можете изменить классы навигационной панели, используя JavaScript, если вы работаете с одностраничным приложением.)

Во многих (но не во всех) случаях это может быть лучшим разделением представления от логики представления:

• Вы можете изменить представления, чтобы присоединить данные навигации сайта к контексту шаблона, но это сильно связывает презентацию со слоем представления и затрудняет создание приложений многократного использования или интеграцию сторонних приложений.

  Представление уже выбирает именованный шаблон, что означает, что вы уже передаете некоторую информацию, связанную с навигацией, в слой шаблона. Это может быть все, что вам нужно.

• Вы можете использовать процессор контекста шаблона для получения некоторой информации о представлении, но это просто перемещает сильную связь с другим слоем системы, а не остается внутри слоя шаблона.

Answer 2

В вашем подходе, когда вы добавляете класс для обозначения активного элемента nav к самому элементу, вы можете добавить имя активного элемента nav в контекст из вашего представления. Затем используйте некоторый JavaScript, чтобы добавить класс current к соответствующему элементу.

Например, если у вас есть следующие навигационные элементы:

<a id="home" href="#">Home</a>
<a id="about" href="#">About</a>

По вашему мнению, добавьте переменную контекста current, чтобы обозначить id текущего элемента nav идентификатором:

return render_to_response('template.html',
                          {'current': 'home'})

Затем в javascript (здесь показан jQuery):

$("#{{ current }}").addClass('current')

Это будет оцениваться как:

$("#home").addClass('current')

Который, в свою очередь, применяет ваш #current CSS к элементу home.

Другой подход заключается в добавлении класса в тег body, который идентифицирует текущее активное меню навигации. Затем в вашем CSS вы определяете стили для каждого класса тела, которые выделяют соответствующий элемент навигации. Затем ваш шаблон вставляет переменную current непосредственно в список классов тела, и нет необходимости в javascript.