How to correctly make a menu in jade?

Question

Pug

Do not tell me how to correctly implement the menu
Example:
there are 3 pages
home.jade
about.jade
contact.jade
each includes include menu.jade
menu should be of this type (li should have an active class when we are on its page and an empty link as in the first li Home):

ul.nav
        li.nav-item.active
            a(class='link', href='/') Home
        li.nav-item
           a(class='link', href='about.html') About
               span.label test
        li.nav-item
           a(class='link', href='contact.html') Contact

How can this most correctly be implemented so that the output is 3 html with a working menu, and is it possible to take out the tag (a) so as not to duplicate 3 times.

Answer 1

Implementing this sort of thing is Jade's forte
. Include is not a good fit for such tasks. Use inheritance. In the parent template, define all common blocks, in the child templates, leave only what changes
1. Create a parent template, define a content block and a block of common variables, remove duplication in the mix, call this mix in a cycle, take out the data for the cycle separately:

//- filename: root.jade
- var nav = [{url: '/', name: 'Home'}, {url: 'about.html', name: 'About'}....];
doctype html
html(lang="en")
  block sharedVars
  head
    block title
  body
    ul.nav
      each i in nav
        +navItem(i.url, i.name, i.url == pageUrl)
    block content
mixin navItem(url, name, current)
  li.nav-item(class={active: current})
    a.link(href=url)= name

Obviously now the parent template is waiting for the pageUrl variable.
2) We create templates for child pages, in them we define the parent template, content blocks and the variables necessary for the parent template.

extends root
append sharedVars
  - var pageUrl = '/';
block title
  | My title
block content
  h1 Мой заголовок
  .content
     p Hello World

Pay attention to how the pageUrl variable is passed from the child template to the parent - through the sharedVars block. It's not in the Jade documentation.

Answer 2

I'll tell you how I do it.
The menu items themselves are in a separate json file (a lot of info is stored this way)

[
  {
    "title": "Главная",
    "url": "home.html"
  },
  {
    "title": "Каталог",
    "url": "catalog.html"
  },
  {
    "title": "Акции",
    "url": "actions.html"
  }
]

There is a mixin for displaying the menu, it can be of varying complexity depending on the task, I will show you a simple one:

mixin nav(data, current)
    nav.nav&attributes(attributes)
        if(data && data.length)
            ul.nav__list
                each item, index in data
                    li.nav__item.nav-item(class=(index === current ? "nav-item--current" : undefined))
                         a(href=item.url).nav-item__link
                                span.nav-item__title #{item.title}

This mixin takes 2 arguments: an array of menu items and the index of the current item.
In the part of the page where the menu is displayed, we call the
. And we pass the currentNav variable, with the index of the menu item we need, directly from the page:
page.jade

extends layouts/_default
block head
    - pageTitle = 'Заголовок страницы';
block header
    - currentNav = 1;
block content

For understanding, a piece of layouts / _default

doctype html
html(lang="ru-RU" class="no-js")
    include ../parts/_head
    body
        block header
        include ../parts/_header
        .content#content
            block content
        block footer
        include ../parts/_footer

Answer 3

It seems to me that then you need to handle the header with handles, that is, durble and transfer to each page and not make
the header a module (this question worries me, I'm waiting for an answer)