Как изменить nav "активный" класс на разных страницах с базой. html

Question

У меня есть моя навигационная панель на моем base.html, поэтому я распространяю его на все остальные страницы. Но у меня есть класс "active" на домашней странице, поэтому он также остается активным на всех других страницах.

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link active" href="http://127.0.0.1:8000/backend/">
            <i class="ni ni-shop text-primary"></i>
            <span class="nav-link-text">Dashboard</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="http://127.0.0.1:8000/backend/clientes">
            <i class="ni ni-ungroup text-orange"></i>
            <span class="nav-link-text">Clients</span>
        </a>
    </li>
</ul>

Как я могу изменить класс active на другой пункт меню, основанный на странице Я?

Answer 1

ОПЦИЯ 1 Вы можете использовать django contex_processors. Добавьте ваш settings.py

TEMPLATES = [
{
     #other settings
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
     #other settings
    'OPTIONS': {
        'context_processors': [
             #other options
            'context_file_path.defaults',

        ],
    },
},

]

в ваш context_file.py

def defaults(request):
    active_bar = "" # your active bar logic
    return {
        'active_bar': active_bar,
    }

с помощью этого метода, каждый запрос определяет, какая панель активна. И переменная active_bar передается в ваш шаблон. В ваш шаблон вы можете добавить активный класс, если переменная active_bar равна вашему названию бара. Например:

<ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link {% if active_bar == 'dashboard' %}active{% endif %}" href="http://127.0.0.1:8000/backend/">
            <i class="ni ni-shop text-primary"></i>
            <span class="nav-link-text">Dashboard</span>
          </a>
        </li>
        <li class="nav-item  {% if active_bar == 'clients' %}active{% endif %}">
          <a class="nav-link" href="http://127.0.0.1:8000/backend/clientes">
            <i class="ni ni-ungroup text-orange"></i>
            <span class="nav-link-text">Clients</span>
          </a>
        </li>
      </ul>

ОПЦИЯ 2

Вы можете написать собственный файл js и добавить свою базу html. В этом файле js вы можете определить URL и выбрать активную панель. После этого вы можете добавить активный класс в список.

Answer 2

На ваш вопрос нет единого универсального ответа, он действительно зависит от структуры вашего проекта, иерархии URL и т. Д. c. Но обычно лучшими решениями являются пользовательский тег шаблона, принимающий запрос в качестве аргумента (и / или другие контекстные переменные или простые константы, в зависимости от логики c вашего собственного проекта) для вычисления текущего «раздела» и соответствующей визуализации панели навигации. .

Answer 3

Отправить имя в качестве переменной и значение с active .

def index(request):
   # your code


    context = {

        'dashboard': 'active',
    }

    return render(request, 'index.html', context)

def clients(request):
   # your code


    context = {

        'clients': 'active',
    }

    return render(request, 'clients.html', context)

Использовать переменную следующим образом:

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link {{ dashboard }}" href="http://127.0.0.1:8000/backend/">
            <i class="ni ni-shop text-primary"></i>
            <span class="nav-link-text">Dashboard</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link {{ clients }}" href="http://127.0.0.1:8000/backend/clientes">
            <i class="ni ni-ungroup text-orange"></i>
            <span class="nav-link-text">Clients</span>
        </a>
    </li>
</ul>