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

Question

[litash]

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

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

Галп выбивает ошибку Cannot read property 'location' of undefined. Подскажите правильный способ.

Answer 1

[Владимир Проскурин]

pug работает статически, т.е. после его компиляции создается html файл, и этот html файл уже открывается в браузере. Если вы напишите так

if a > 10
div hello
else
div ne hello

то если в момент компиляции a была больше 10, то в html файл попадет строка
<div>Hello</div>
и больше никак, до следующей компиляции (и если там уже a будет меньше, то попадет ne hello).
Поэтому pug ничего не знает о объекте window и адресе текущей страницы. Вы можете адрес задавать в шапке страницы указывая свою переменную, например currentPage. И везде на разных страницах указывать ее разной

Answer 2

[Jumandjilos]

Можно при рендере шалона, добавлять переменную, например:

if x
div
| about
else if y
div
| home

Роуты:

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

С /home аналогично, но вместо x поставь y.

Answer 3

[profesor08]

Полагаю ты хочешь сделать некий акцент на элементе меню, если по нему перейти. Тебе нужны миксины.

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")