Выделение активных ссылок на веб-сайте Django: методы и примеры кода

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

Метод 1: использование встроенных тегов шаблона Django.
Django предоставляет полезный тег шаблона под названием request.path, который возвращает текущий URL-путь. Мы можем использовать это, чтобы добавить класс CSS к активной ссылке в нашем меню навигации.

<!-- base.html -->
<ul>
  <li{% if request.path == '/' %} class="active"{% endif %}><a href="/">Home</a></li>
  <li{% if request.path|slice:'1:' == 'articles/' %} class="active"{% endif %}><a href="/articles/">Articles</a></li>
  <li{% if request.path == '/about/' %} class="active"{% endif %}><a href="/about/">About</a></li>
</ul>

Метод 2: использование JavaScript для динамического добавления класса.
Другой подход — использование JavaScript для динамического добавления класса к активной ссылке. Этот метод позволяет нам обрабатывать более сложные сценарии, например выделение подменю или ссылок с параметрами запроса.

<!-- base.html -->
<ul id="navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/articles/">Articles</a></li>
  <li><a href="/about/">About</a></li>
</ul>
<script>
  var currentPath = window.location.pathname;
  var navigationLinks = document.querySelectorAll('#navigation a');
  for (var i = 0; i < navigationLinks.length; i++) {
    if (navigationLinks[i].getAttribute('href') === currentPath) {
      navigationLinks[i].classList.add('active');
    }
  }
</script>

Метод 3: использование функции resolveDjango
Функция resolveDjango позволяет нам получить соответствующую функцию просмотра для данного URL-адреса. Мы можем использовать этот метод, чтобы выделить активную ссылку на основе решенного представления.

# views.py
from django.urls import resolve
def home_view(request):
    # ...
def articles_view(request):
    # ...
def about_view(request):
    # ...
# base.html
<ul>
  <li{% if request.resolver_match.view_name == 'home_view' %} class="active"{% endif %}><a href="/">Home</a></li>
  <li{% if request.resolver_match.view_name == 'articles_view' %} class="active"{% endif %}><a href="/articles/">Articles</a></li>
  <li{% if request.resolver_match.view_name == 'about_view' %} class="active"{% endif %}><a href="/about/">About</a></li>
</ul>

функция. Выберите метод, который лучше всего соответствует вашим требованиям, и улучшите навигацию на своем веб-сайте Django.