На веб-сайтах 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: использование функции resolve
Django
Функция resolve
Django позволяет нам получить соответствующую функцию просмотра для данного 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.