Чтобы сделать ссылку в меню активной на странице, на которой находится пользователь, можно использовать некоторые возможности Pug в сочетании с JavaScript или CSS классами.
Сперва, вам потребуется иметь представление о текущем пути страницы. Вы можете получить текущий путь URL с помощью JavaScript. Например, вы можете использовать объект window.location.pathname для получения пути страницы.
После того, как у вас есть текущий путь страницы, вы можете использовать условный оператор в Pug для проверки, является ли путь активной страницей. Например, вам может понадобиться цикл для перебора элементов меню, чтобы определить, какие пункты должны быть активными.
Приведу пример кода на Pug:
ul
li(class=(window.location.pathname === '/about' ? 'active' : ''))
a(href="/about") About
li(class=(window.location.pathname === '/services' ? 'active' : ''))
a(href="/services") Services
li(class=(window.location.pathname === '/contact' ? 'active' : ''))
a(href="/contact") Contact
В этом примере я использовал условный оператор class, который присваивает классу "active" только тому пункту меню, чей путь страницы соответствует текущему пути.
Затем вы можете использовать CSS для стилизации активной ссылки и выделения ее на странице. Например, вы можете определить стили для класса "active" в вашем CSS файле:
.active {
color: red;
}
Этот код изменит цвет активной ссылки на красный.
Важно отметить, что пример, который я привел, использует JavaScript в Pug. Для того, чтобы заработал такой код, убедитесь, что у вас включен JavaScript на вашем сайте. Если вы не хотите использовать JavaScript, вы можете использовать альтернативные методы, такие как использование активного класса, который будет непосредственно определяться на сервере или в шаблонизации на стороне сервера, в зависимости от вашей конкретной ситуации и стека технологий, которые вы используете.