Как правильно верстать многостраничный статический сайт использованием JADE?

Question

[Андрей Прозоров]

Я делаю так. Создаю блок jade + sass + js. Один блок = БЭМ блок.
Это прям очень крутая схема. Есть только один недостаток. На разных страничках разный контент. Контент я прячу в БЭМ блок например content который спрятан в блок например middle (это например если есть сайдбар)

Далее начинается очень неприглядная тема.

Вариант1

page.jade
+middle(".......длинный контент с экранированием всяких символов......")

middle.jade
+content(content)

content.jade
#{content}

Недостатком такого подхода являеться то что приходиться экранировать символы, убирать переносы и так даеле

Вариант 2
page.jade
+middle("page_alias")

middle.jade
+content(page_alias)

content.jade
if page_alias == "a"
......вывод контента.....

Это вообще довольно ущербный метод. в фале content.jade получиться десяток веток с if .... else if ...

Как быть та?

Answer 1

[Олег]

Те блоки, которые повторяются выносите в миксины, например шапку, футер и подобные, сам контент пишите прямо в файле страницы, можете глянуть пример тут.

Comments

[Андрей Прозоров]

"контент пишите прямо в файле страницы" я не понимаю как это сделать если у меня идет вызов блока +middle котрый вызывает блок +content а уже в нем контент.

Вот пример страницы

include ../blocks/**/*
doctype
html(lang='ru')
include template/header
body
+header._big
+middle
+footer
+footer1

[Андрей Прозоров]

mixin middle()
.col-md-8
+content
.col-md-4
+sidebar

mixin content()
#{content}

[Андрей Прозоров]

тоесть контент выводиться через 1-2 вызова мискина. может и через 25 в принципе...

[Олег]

Андрей Прозоров: Советую упростить структуру, в любом случае Pug поддерживает вложенность, посмотрите папку app из моей ссылки там есть пример вызова миксина + контент внутри.

[Андрей Прозоров]

посмотрел пример. инструкция block частично поможет решить проблемму.
вот так придеться писать:

include ../blocks/**/*
doctype
html(lang='ru')
include template/header
body
  +header._big
  .col-md-8
     +content
         ....контент...
   .col-md-4
     +sidebar
  +footer
  +footer1

а вот так не получиться уже:

include ../blocks/**/*
doctype
html(lang='ru')
include template/header
body
  +header._big
  +middle
      ....контент....
  +footer
  +footer1

[Олег]

Андрей Прозоров: В pug нет ограничения на вложенность codepen.io/werty1001/pen/oZgrWE

[Андрей Прозоров]

Олег:

mixin middle()
  .col-md-8
    +content
  .col-md-4
    +sidebar
        block

тогда контент попадет в сайдбар. или я что то не так понимаю?

[Андрей Прозоров]

Олег:

mixin middle()
  .col-md-8
    +content
        block
  .col-md-4
    +sidebar

+midle
       .....контент....

а так будет работать??

[Олег]

Андрей Прозоров: Вот так не попадет:

mixin middle()
  .col-md-8
    +content
        block
  .col-md-4
    +sidebar

[Андрей Прозоров]

Олег:

Проверил работает=))) ОГОНЬ!!!

[Андрей Прозоров]

Олег:
СПАСИБО!!!

[Олег]

Андрей Прозоров: рад помочь)