@litash

Как в pug, jade показать контент при изменении url?

Привет, при изменении url нужно показывать определенный блок.
Пробую сделать так:

if window.location.href === "/about"
div
| about
else if window.location.href === "/home"
div
| home

Галп выбивает ошибку Cannot read property 'location' of undefined. Подскажите правильный способ.
  • Вопрос задан
  • 600 просмотров
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
pug работает статически, т.е. после его компиляции создается html файл, и этот html файл уже открывается в браузере. Если вы напишите так
if a > 10
div hello
else
div ne hello

то если в момент компиляции a была больше 10, то в html файл попадет строка
<div>Hello</div>
и больше никак, до следующей компиляции (и если там уже a будет меньше, то попадет ne hello).
Поэтому pug ничего не знает о объекте window и адресе текущей страницы. Вы можете адрес задавать в шапке страницы указывая свою переменную, например currentPage. И везде на разных страницах указывать ее разной
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@Jumandjilos
Можно при рендере шалона, добавлять переменную, например:
if x
div
| about
else if y
div
| home


Роуты:
router.get('/about', (req, res) => {
res.render('ИмяШаблона', {x})
}

С /home аналогично, но вместо x поставь y.
Ответ написан
Комментировать
profesor08
@profesor08 Куратор тега JavaScript
Полагаю ты хочешь сделать некий акцент на элементе меню, если по нему перейти. Тебе нужны миксины.
mixin menu(activeItem)
  .menu
        a.menu-item(href="#" class={"is-active": activeItem === "page-1"})
        a.menu-item(href="#" class={"is-active": activeItem === "page-2"})
        a.menu-item(href="#" class={"is-active": activeItem === "page-3"})
        a.menu-item(href="#" class={"is-active": activeItem === "page-4"})


Далее на page-1 вставь код вместо меню, тем самым когда будешь просматриваться page-1, будет подсвечен пункт. Аналогично и для page-2, page-3 и тд.
+menu("page-1")
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы