Я только что сделал свое первое маленькое веб-приложение на django, и мне это нравится. Я собираюсь начать преобразование старого производственного PHP-сайта в django, и как часть его шаблона есть панель навигации.
В PHP я сверяю URL-адрес каждой опции навигации с текущим URL-адресом в коде шаблона и применяю класс CSS, если они совпадают. Это ужасно грязно.
Есть ли что-нибудь получше для django или хороший способ обработки кода в шаблоне?
Для начала, как мне получить текущий URL?
django
navigation
Оли
источник
источник
<a href="{% url "view:name" %}" {% active_class "view:name" %}>
. При желании вы можете использовать его для генерации только на" active"
значении (путем передачи вFalse
качестве второго аргумента тега) для добавления к существующему атрибуту класса, но для большинства навигационных ссылок, например , что я использую.Ответы:
Я использую наследование шаблонов для настройки навигации. Например:
base.html
about.html
источник
<ul id="nav">....</ul>
изменил код на другой файл, скажем tabs.html. Итак, теперь base.html содержится,{%block nav%}{%include "tabs.html"%}{%endblock%}
а затем выделение активной вкладки перестало работать (в about.html выше). Я что-нибудь упускаю?include
работает тег. Ознакомьтесь с примечанием, включенным в документы: docs.djangoproject.com/en/dev/ref/templates/builtins/#include В вашем случае, когда вы пытаетесь переопределить базовый шаблонabout.html
, я думаю, вы уже получил обработанный блок HTML, а не блок шаблона Django, ожидающий обработки.Для этого вам не нужно if, взгляните на следующий код:
tags.py
urls.py
base.html
Это оно. подробности реализации можно найти на сайте:
gnuvince.wordpress.com
110j.wordpress.com
источник
django.core.context_processors.request
в свойTEMPLATE_CONTEXT_PROCESSORS
insettings.py
mysite.com
(как домашний) иmysite.com/blog
, поскольку путь будет отображаться как/
и/blog/
(соответственно), каждый раз давая совпадение для первого. Если вы не используете/
в качестве лендинга, это может быть нормально, в противном случае я просто используюreturn 'active' if pattern == request.path else ''
(я еще не видел проблем с этим, но я только что настроил его).Мне понравилась чистота описанного выше 110j, поэтому я взял большую часть и переработал, чтобы решить 3 проблемы, которые у меня были с ним:
Вот:
tags.py:
urls.py:
base.html:
источник
Я автор django-lineage, который я написал специально для решения этого вопроса: D
Меня раздражало использование (вполне приемлемого) метода jpwatts в моих собственных проектах, и я черпал вдохновение из ответа 110j. Происхождение выглядит так:
ancestor
просто заменяется на «активный», если аргумент совпадает с началом URL-адреса текущей страницы.{% url %}
Также поддерживаются переменные аргументы и обратное разрешение полного типа. Я добавил несколько вариантов конфигурации, немного доработал и упаковал для всех.Если кому-то интересно, читайте об этом подробнее на:
>> github.com/marcuswhybrow/django-lineage
источник
Начиная с Django 1.5 :
Поэтому, если вы используете такие представления, вы можете добавить что-нибудь похожее
breadcrumbs
на поле уровня класса и использовать его в своих шаблонах.Пример кода просмотра:
В своем шаблоне вы можете использовать его так:
Если вы хотите дополнительно «выделить» родительские элементы навигации, вам необходимо расширить
breadcrumbs
список:... и в вашем шаблоне:
Это простое и понятное решение, которое отлично работает с вложенной навигацией.
источник
.active
?breadcrumbs
если хотите. Но вы правы - мой пример не лучший.Вы можете применить класс или идентификатор к основному элементу страницы, а не к конкретному элементу навигации.
HTML:
CSS:
источник
Я так делаю:
а затем все, что мне нужно сделать, на мой взгляд, добавить
{'active_tab': 'statistics'}
в мой контекстный словарь.Если вы используете,
RequestContext
вы можете получить текущий путь в своем шаблоне как:И на ваш взгляд:
источник
Я взял код из нивхаба выше, удалил некоторые странности и превратил его в чистый тег шаблона, изменив его так, чтобы / account / edit / по-прежнему активировал / account / tab.
источник
Это всего лишь вариант решения css, предложенного Тоба выше:
Включите в свой базовый шаблон следующее:
Затем в ваших шаблонах, расширяющих базовое использование:
Затем вы можете использовать css для выделения текущей области на основе тега body (например, если у нас есть ссылка с идентификатором nav-home):
источник
Вы можете использовать обратную функцию с соответствующими параметрами, чтобы получить текущий URL.
источник
Спасибо за ваши ответы, господа. Я снова пошел за чем-то немного другим ...
В моем шаблоне:
Как только я определил, на какой странице я нахожусь в логике (обычно в urls.py), я передаю шаблону
class="selected"
как часть контекста под правильным именем.Например, если я нахожусь на странице link1, я добавляю
{'link1_active':' class="selected"'}
контекст для шаблона, чтобы извлечь и внедрить.Кажется, он работает, и он довольно чистый.
Изменить: чтобы HTML не попадал в мой контроллер / представление, я немного изменил это:
Это делает шаблон немного менее читаемым, но я согласен, лучше не проталкивать необработанный HTML из файла urls.
источник
У меня есть несколько меню на одной странице, которые создаются динамически с помощью цикла. Посты выше, касающиеся контекста, дали мне быстрое решение. Надеюсь, это кому-то поможет. (Я использую это в дополнение к активному тегу шаблона - мое исправление решает динамическую проблему). Это сравнение кажется глупым, но оно работает. Я решил назвать переменные active_something-unique и something-unique, таким образом это работает с вложенными меню.
Вот часть представления (достаточно, чтобы понять, что я делаю):
А это из шаблона:
источник
Мое решение заключалось в том, чтобы написать простой контекстный процессор для установки переменной на основе пути запроса:
(Не забудьте добавить свой собственный процессор в TEMPLATE_CONTEXT_PROCESSORS в settings.py.)
Затем в базовом шаблоне я использую тег ifequal для каждой ссылки, чтобы определить, добавлять ли «активный» класс. Конечно, этот подход строго ограничен гибкостью вашей структуры путей, но он работает для моего относительно скромного развертывания.
источник
Я просто хотел поделиться своим незначительным улучшением в посте nivhab. В моем приложении у меня есть поднавигации, и я не хотел скрывать их, используя только CSS, поэтому мне нужен был какой-то тег «если» для отображения поднавигации для элемента или нет.
Вы можете использовать это в основном так же, как активный тег:
источник
Еще одно усовершенствование оригинального решения.
Это принимает несколько шаблонов, и лучше всего также безымянные шаблоны, записанные как относительный URL-адрес, заключенный в '"', например:
Тег выглядит так:
источник
Я использовал jquery, чтобы выделить свои панели навигации. Это решение просто добавляет класс css «активный» к элементу, который соответствует селектору css.
источник
Небольшое улучшение по сравнению с ответом @tback без каких-либо
%if%
тегов:Используйте его в своем шаблоне так:
И включите
"django.core.context_processors.request"
в свойTEMPLATE_CONTEXT_PROCESSORS
сеттинг.источник
Я обнаружил, что лучше всего использовать тег включения:
templates/fnf/nav_item.html
Это просто мой основной элемент навигации начальной загрузки, который я хочу визуализировать.
Он получает значение href и, возможно, значение link_name.
is_active
рассчитывается исходя из текущего запроса.templatetags/nav.py
Затем используйте его в навигаторе:
templates/fnf/nav.html
источник
/about/company-history/
или/about/what-we-do/
is_active
можно заменить и другие ключи добавить в словарь. Также чек может бытьcontext.request.resolver_match.url_name.startswith(x)
или чем угодно. Кроме того, вы можете иметь код перед оператором return, чтобы установить значения dict. Кроме того, вы можете использовать разные шаблоны, например, один дляtop_level_nav.html
с разной логикой и т. Д.Немного изменив ответ Андреаса, похоже, вы можете передать имя маршрута из urls.py в тег шаблона. В моем примере
my_tasks
, а затем в функции тега шаблона используйте обратную функцию, чтобы определить, каким должен быть URL-адрес, затем вы можете сопоставить это с URL-адресом в объекте запроса (доступном в контексте шаблона)urls.py
template.html
источник
Я знаю, что опаздываю на вечеринку. Однако мне не понравилось ни одно из популярных решений:
Блочный метод кажется неправильным: Я думаю , что навигация должна быть самодостаточной.
Метод template_tag кажется неправильным: мне не нравится, что я должен сначала получить URL-адрес из URL-тега. Кроме того, я думаю, что css-класс должен быть определен в шаблоне, а не в теге.
Поэтому я написал фильтр, который не имеет описанных выше недостатков. Он возвращается,
True
если URL-адрес активен и поэтому может использоваться с{% if %}
:Код:
Просто убедитесь, что используете его
RequestContext
на страницах с навигацией или включите запрос context_processor в вашемsettings.py
источник
Я видел ответы jpwatts ', 110j ' s, nivhab 's и Marcus Whybrow , но всем им, кажется, чего-то не хватает: а как насчет корневого пути? Почему он всегда активен?
Итак, я сделал другой способ, более простой, который позволяет «контроллеру» решать сам, и я думаю, что он решает большинство больших проблем.
Вот мой собственный тег:
Затем «контроллер» объявляет необходимые классы CSS (на самом деле, самое главное, он заявляет о своем присутствии в шаблон)
И, наконец, я визуализирую его на панели навигации:
Таким образом, каждая страница имеет собственное
nav_css_class
значение, которое нужно установить, и если оно установлено, шаблон становится активным: нет необходимостиrequest
в контексте шаблона, нет парсинга URL-адресов и больше нет проблем с страницами с несколькими URL-адресами или корневой страницей.источник
Вдохновленный этим решением , я начал использовать такой подход:
источник
Вот моя попытка. В итоге я реализовал в своих представлениях класс, содержащий мою структуру навигации (плоский с некоторыми метаданными). Затем я вставляю это в шаблон и визуализирую.
Мое решение касается i18n. Вероятно, следует немного абстрагироваться, но я особо этим не беспокоился.
views.py:
Я определил логику шаблона, используя такие включения. Базовый шаблон:
Фактические включают (включает / navigation.html):
Надеюсь, кому-нибудь это пригодится! Думаю, было бы довольно легко расширить эту идею для поддержки вложенных иерархий и т. Д.
источник
Создайте шаблон включения "intranet / nav_item.html":
И включите его в элемент nav:
И вам нужно добавить это в настройки:
источник
вот довольно простое решение, https://github.com/hellysmile/django-activeurl
источник
из этого SO Вопрос
При необходимости повторите для каждой ссылки.
источник
/blog/posts/2021/04/12
был URL, то элемент / blog / nav был бы активен.Questions
,Tags
,Users
,Badges
,Unanswered
,Ask Question
. он не будет работатьQuestions
, но для всех других навигационных систем он будет работать нормально.Я также использовал jQuery, чтобы выделить его и найти более элегантным, чем загромождение шаблона несемантическими тегами шаблонов Django.
Приведенный ниже код работает с вложенными раскрывающимися списками в начальной загрузке 3 (выделяет как родительский, так и дочерний
<li>
элемент.Также довольно легко добавить
click
событиеreturn false
(или изменитьhref
атрибут#
) для текущей страницы, не изменяя разметку template / html:источник
Я использую комбинацию этого миксина для представлений на основе классов:
с этим в шаблоне:
источник
Мой немного похож на другой подход JS, представленный ранее ... только без jQuery ...
Допустим, у нас есть в base.html следующее:
Я просто сделал свою иерархию, чтобы следовать определенному шаблону URL ... после адреса хоста ... у меня есть моя основная категория, например, дом, новости, анализ и т.д., а регулярное выражение просто вытягивает первое слово из местоположения
источник