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

Question

[bidtiz]

Не подскажите как грамотно реализовать меню

Пример:
есть 3 страницы
home.jade
about.jade
contact.jade

к каждой подключен include menu.jade
меню должно быть такого типа (класс active должен быть у li когда находимся на ее странице и пустая ссылка как в первом 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

Как такое наиболее правильно можно реализовать чтобы на выходе получились 3 html с работающим меню, и возможно ли вынести тэг (a) чтобы не дублировать 3 раза.

Answer 1

[Илья Ерохин]

Реализация подобного рода вещей - сильная сторона 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.

Comments

[Андрей Хохлов]

AirWorker, pageUrl удачнее чем мой подход с индексом элемента, спасибо вам за ответ

[Илья Ерохин]

Андрей Хохлов: в принципе это не важно, в конечном счете (в зависимости от финальной реализации, например сервера) нельзя сказать что лучше

[Андрей Хохлов]

AirWorker: я обычную вёрстку с jade делаю, без привязки к бекенду (99% тянется на php)

[Илья Ерохин]

Кстати, микс там был лишний, изначально я хотел немного по-другому сделать, потом переписал, а микс остался. Конечно, в таком виде как сейчас - использование микса ничего не дает.

[Константин Величко]

navItem(url, name, current)
Передавать 3 параметра плохо. Если в дальнейшем придется добавить еще один параметр придется переписывать все вызовы миксина. Лучше передавать 1 обьект в которм будет все что угодно

[Илья Ерохин]

Константин Величко: не углубляясь в дебри, я скажу что это мейнстрим. И не стоит думать что в будущем что-то может измениться - как показывает практика, изменения могут быть ВЕЗДЕ, и особенно там, где ждешь меньше всего. Ну и как я писал в комменте выше, микс здесь вообще не нужен ))

[si2la]

Спасибо огромное! Очень понравилось решение.

Answer 2

[Андрей Хохлов]

Расскажу как делаю я.

Сами пункты меню у лежат в отдельном json файле (многая инфа так хранится)

data/nav.json

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

Есть миксин для вывода меню, он может быть разной сложности в зависимости от задачи, покажу простой:
blocks/nav.jade

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}

Этот миксин принимает 2 аргумента: массив с пунктами меню и индекс текущего пункта.

В части страницы, где меню выводится мы вызываем миксин

parts/header.jade
+nav(getData('nav'), currentNav)

А переменную currentNav, с индексом нужного на пункта меню, мы передаем непосредственно со страницы:

page.jade

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

Для понимания кусочек 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

Comments

[MFD]

а как подключается
>>getData('nav')

[myskypesla]

Андрей Хохлов А как подключить json файл и тащить оттуда данные?

[Андрей Хохлов]

myskypesla: MFD: https://github.com/andrey-hohlov/layout-starter/bl... Передаёте подобную функцию в Jade среди других параметров, и затем вызываете в шаблоне

[myskypesla]

Андрей Хохлов: Спасибо большое Андрей

[MFD]

Андрей Хохлов: да спасибо ))
полгода назад вот такая конструкция заработала...
но сейчас бы переписал бы конечно по другому ))

gulp.task('jade:build', function() {
  var jsonData = JSON.parse(fs.readFileSync('./src/jade/all.json'));
  gulp.src([
      path.src.html
  ])
  .pipe(data(function(file) { return jsonData }))
  .pipe(data(function(file) {
    return {
      pageName: file.history[0].replace(file.base, '').split('.')[0]
    };
  }))
  .pipe(jade({
      filename: 'base',
      basedir: __dirname + '/',
      pretty: !config.production ? true : false
      }))
  .on('error', log)
  .pipe(gulp.dest(path.build.html))
  .pipe(reload({stream: true}));
  
});

Answer 3

[Юрий Кучеренко]

Мне кажется нужно тогда хедер ручками то есть дурблировать и переносить в каждкую страницу и не делать хедер модулем
(самого волнует такой вопрос, жду ответа)