• Как грамотно сделать меню в jade?

    AirWorker
    @AirWorker
    Node.js full stack web dev
    Реализация подобного рода вещей - сильная сторона Jade

    Под такие задачи плохо подходит include. Используйте наследование. В родительском шаблоне определите все общие блоки, в дочерних шаблонах оставьте только то, что меняется

    1. Создаем родительский шаблон, определяем блок контента и блок общих переменных, убираем дублирование в микс, этот микс вызываем в цикле, данные для цикла выносим отдельно:

    //- 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


    Очевидно, теперь родительский шаблон ждет переменную pageUrl.

    2) Создаем шаблоны дочерних страниц, в них определяем родительский шаблон, контентные блоки и необходимые для родительского шаблона переменные.

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


    Обратите внимание как передается переменная pageUrl из дочернего шаблона в родительский - через блок sharedVars. Этого нет в документации по Jade.
    Ответ написан
    7 комментариев