2015-05-04 2 views
2

Я использую бутстрап для моего проекта django. У меня есть Navbar вроде этого:Django вместе с bootstrap navbar - отличная ссылка на текущую страницу

[home][gallery][user] 

Как я могу изменить свойства CSS конкретного кнопки NavBar, чтобы соответствовать текущей открытой страницы?

Например, если я нахожусь на главной странице, кнопка дома будет подсвечена.

ответ

3

Решение 1

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

Например

# nav.html 

<div class=".."> 
    <div class="..">My Nav</div> 
     <ul class=".."> 
      <a href=".." class=".. {% if active == 'home' %} active {% endif %}">Home</a> 
      <a href="/settings/" class="list-group-item {% if active == 'settings' %} active {% endif %}">Settings</a> 
     </ul> 
</div> 

Затем в каждом шаблоне необходимо указать, какие должны быть активными. что-то вроде этого

# home.html 

{% include "yourtemplatedir/nav.html" with active='home' %} 


# settings.html 

{% include "yourtemplatedir/nav.html" with active='settings' %} 

Решение 2

Использование контекста процессора сделает это иногда просто

def get_current_path(request): 
    return { 
     'current_path': request.get_full_path() 
    } 

В шаблоне вы можете использовать {{ current_path }}, чтобы определить, какой Nav элемент должен быть активный.

Вы также можете улучшить код контекстного процессора, чтобы проверить префикс URL и автоматически установить переменную active_page. поэтому вам не нужно устанавливать его с каждым включением (если вы всегда включаете nav.html в свою базу). Однако здесь действительно сложно иметь исключения.

+0

Спасибо за эти решения. – user3667832

Смежные вопросы