Модификация унаследованного шаблона в jade

Question

Я новичок-иш для jade-шаблонов и некоторые из более сложных функций, существующих в шаблонах. На данный момент я создаю сайт портфолио с использованием узла и нефрита. У меня есть макет, который наследуется всеми другими нефритовыми файлами. В макете есть универсальная навигационная система. Я хочу указать, в каком разделе сайта находится пользователь. В настоящее время я делаю это, имея уникальные файлы js, которые будут загружаться, когда пользователь находится в определенном разделе. Этот js-файл добавит класс к элементу списка, в который будет добавлено выделение для навигации.

Мой вопрос: мне нужно создать и загрузить эти файлы js, чтобы это сделать? Есть ли лучший способ получить универсальную навигацию в одном шаблоне, имея уникальный маркер?

Answer 1

Если подсветка не имеет функциональных целей (например, доступность), или это делается с использованием фрагментов URI (хэштегов), возможно, лучше оставить ее в JS.

Если навигация изюминка на странице, вы можете установить его в nodejs/нефрит, например:

app.get('/about', (req, res) => { 
    var locals = {}; 
    locals.navHighlight = 'about'; 
    res.render('about', locals); 
}); 

И в шаблоне нефрита вы могли бы сделать что-то вроде этого:

ul.navigation 
    li(class=(navHighlight=== 'about' ? 'highlight' : '')) About Me 
    li(class=(navHighlight=== 'blog' ? 'highlight' : '')) My Blog 

Что бы вы ни передали в качестве свойств объекта locals объекта res.render, доступно в Jade как переменные. И в нефритовом режиме, используя формат tag(attr=value, attr2=value,...), вы имеете доступ к синтаксису JS и открытым переменным.

Пока вы устанавливаете переменную (например, navHighlight, на основе того, к какому маршруту он входит, вы можете использовать это для установки атрибута тега class. Просто убедитесь, что вы разделяете имена классов с пробелами, если у вас несколько классов