Для создания активного меню с субменю в Pug, можно использовать различные подходы и техники. Рассмотрим несколько возможных решений.
1. Использование условных операторов:
В данном подходе мы можем использовать условные операторы Pug для определения активной страницы и соответствующего класса элементу меню.
Например, если у вас есть массив-список элементов меню, вы можете проверить, совпадает ли значение текущего элемента со значением текущей страницы, и добавить класс активности соответствующему элементу.
Пример кода:
ul
li(class=(currentPage === 'home' ? 'active' : ''))
a(href='/home') Home
li(class=(currentPage === 'about' ? 'active' : ''))
a(href='/about') About
li(class=(currentPage === 'services' ? 'active' : ''))
a(href='/services') Services
li(class=(currentPage === 'contact' ? 'active' : ''))
a(href='/contact') Contact
В этом примере переменная currentPage предполагается содержать текущую страницу, и мы проверяем её значение для каждого элемента меню.
2. Использование циклов и объектов:
Другой способ работы с активным меню состоит в использовании циклов и объектов. Вы можете создать объект, содержащий данные о каждом элементе меню (например, заголовок, ссылку и т. д.), и затем использовать цикл Pug для создания каждого элемента меню.
Пример кода:
- var menuItems = [
{ title: 'Home', link: '/home' },
{ title: 'About', link: '/about' },
{ title: 'Services', link: '/services' },
{ title: 'Contact', link: '/contact' }
]
ul
each item in menuItems
li(class=(item.link === currentPage ? 'active' : ''))
a(href=item.link) #{item.title}
Здесь мы создали массив menuItems, содержащий объекты данных для каждого элемента меню. Затем, используя цикл each, мы обходим каждый элемент массива и создаем соответствующий элемент меню. Активный элемент определяется сравнением значения ссылки с текущей страницей.
3. Использование шаблонизаторов (например, express.js и res.locals):
Если вы работаете с шаблонизатором Pug в рамках фреймворка Express.js, вы можете использовать объект res.locals для передачи данных между сервером и шаблоном. В этом случае вы можете установить переменную активной страницы в res.locals на сервере, а затем использовать её в шаблоне Pug.
Пример кода:
// Серверная часть
app.use(function(req, res, next) {
res.locals.currentPage = req.path;
next();
});
// Шаблон Pug
ul
li(class=(currentPage === '/home' ? 'active' : ''))
a(href='/home') Home
li(class=(currentPage === '/about' ? 'active' : ''))
a(href='/about') About
li(class=(currentPage === '/services' ? 'active' : ''))
a(href='/services') Services
li(class=(currentPage === '/contact' ? 'active' : ''))
a(href='/contact') Contact
Здесь мы устанавливаем переменную currentPage в res.locals на сервере с помощью промежуточного программного обеспечения Express.js. Затем в шаблоне Pug мы используем эту переменную для определения активного элемента меню.
В зависимости от вашего конкретного случая использования и структуры приложения вы можете выбрать подход, который лучше всего соответствует вашим потребностям.