У меня есть панель навигации в моем родительском шаблоне нефрита, и я хотел бы выделить элемент, который в настоящее время отображается. Поэтому, если я на странице блога,
ul
li Home
li.active Blog
li Contact Us
li About
Не копируя структуру навигационной панели в каждый дочерний шаблон, существует ли способ, чтобы родительский шаблон отображал, какую страницу он распространяется, и применяет класс active соответственно?
parent.jade
doctype 5
html
block link
-var selected = 'home'; //default
-var menu = { 'home': '/home', 'blog': '/blog', 'contact': '/contact' };
body
nav
ul
each val, key in menu
li
if selected === key
a.selected(href=val, title=key)= key
else
a(href=val, title=key)= key
child.jade
extends parent
block link
-var selected = 'blog';
Здесь более простой способ:
Используйте это в своем layout.jade(где nav - это имя активной страницы. nav = 'about' например)
ul(class="#{nav}")
li.home Home
li.blog Blog
li.contact Contact Us
li.about About
Затем укажите, что это ваш CSS:
ul.home li.home,
ul.blog li.blog,
ul.contact li.contact,
ul.about li.about {
color: red;
}
Единственное правило CSS, которое будет применяться, - это тот, чей класс ul существует. Вам нужно будет передать переменную nav, равную 'about', 'home', 'contact' или 'blog' в зависимости от того, на какой странице вы находитесь.
Используйте Текущий объект с тройным выражением. Все в документации.
Вы можете использовать свойства объекта для создания своего активного меню. Если вы хотите использовать папки в своем навигационном меню (версия Jade):
ul(class="nav-menu")
li: a(class="#{ current.path[0] === 'index' ? 'active' : '' }", href="/") home
li: a(class="#{ current.path[0] === 'about' ? 'active' : '' }", href="/about/") aboutХорошо, выше решение очень понятно, но если кто-то ищет больше элементов управления над меню, тогда доступен модуль для node.js. Используйте это, и у вас будет полный контроль над меню.
Случай использования: когда меню видны на основе ролей