Как сделать шаблон шапки на jade, что бы на разных страницах менялся класс шапки?

Чтобы создать шаблон шапки на Pug (ранее известный как Jade) и иметь возможность менять класс шапки на разных страницах, вам понадобится использовать условные операторы.

Первым шагом будет создание отдельного файла для шаблона шапки с расширением .pug. Давайте назовем его "header.pug".

В файле "header.pug" вы можете разместить весь код для шапки, который будет использоваться на каждой странице вашего сайта. Например, вы можете создать элементы навигации, логотип, кнопки и т.д.

Вот пример содержимого файла "header.pug":

header.header
  nav.navigation
    ul
      li
        a(href="#") Home
      li
        a(href="#") About
      li
        a(href="#") Contact

Теперь вы можете использовать этот шаблон на каждой странице, включив его с помощью инструкции "include" в каждом файле .pug, представляющем страницу вашего сайта. Например, давайте представим, что у вас есть файл "home.pug" и файл "about.pug", в которых вы хотите использовать этот шаблон.

Вот пример содержимого файла "home.pug":

include header.pug

.container
  h1 Welcome to the Home page
  p This is the content of the Home page.

Вот пример содержимого файла "about.pug":

include header.pug

.container
  h1 About Us
  p This is the content of the About page.

Теперь, чтобы изменить класс шапки на разных страницах, вам нужно передать переменную, которая будет определять класс, через include. Вы можете сделать это, добавив переменную перед include и использовать ее в шаблоне шапки.

Вот пример содержимого файла "home.pug", в котором передается переменная "headerClass" со значением "home":

- var headerClass = "home"

include header.pug

.container
  h1 Welcome to the Home page
  p This is the content of the Home page.

Вот пример содержимого файла "about.pug", в котором передается переменная "headerClass" со значением "about":

- var headerClass = "about"

include header.pug

.container
  h1 About Us
  p This is the content of the About page.

Теперь, чтобы использовать переданную переменную в шаблоне шапки, вы можете использовать условный оператор, например, class-условие.

Вот пример обновленного содержимого файла "header.pug":

header(class=headerClass)
  nav.navigation
    ul
      li
        a(href="#") Home
      li
        a(href="#") About
      li
        a(href="#") Contact

В результате на странице "home.pug" шапка будет иметь класс "header home", а на странице "about.pug" - "header about".

Надеюсь, это поможет вам создать шаблон шапки на Pug, который будет динамически меняться на разных страницах.