Как использовать Jade, как объявить класс тела в расширенном шаблоне?

Используя механизм шаблона Jade, я хочу, чтобы возможность необязательно объявлять классы тегам body, в шаблонах, которые расширяют другие.

layout.jade

!!! 5
html(lang='en')
head
    block title
    meta(charset='utf-8')
    link(rel='stylesheet', href='/stylesheets/style.css')
    block addhead

block body
    div#wrap
        header
            div#header_content
                p
                    a(href='/')
                        img(src='/images/logo.png', alt='Template-e-o')
            div.hr.red
        br(style='clear:both;')

        div#content
            block content
            br(style='clear:both;')

index.jade

extends layout

block title
    title bidi

block body
    body.index

block content
    p ’ello govna.

Это не работает.

Ответы

Ответ 1

Хорошо, оператор block body представляет собой всего лишь блок с телом имени, поэтому в вашем макете не включен тэг body, он должен быть добавлен в index.jade(который вы пытаетесь сделать), Однако в вашем index.jade вы заменяете содержимое блока только телом body.index(который, я думаю, поскольку я не на своем компьютере-разработчике и не могу попробовать его прямо сейчас - делает ОК, но вынимает все контента, вы получаете только пустое тело, хотя оно должно иметь атрибут class= 'index).

Что вы можете попробовать, так это (в index.jade):

block prepend body
    body.index

Но я не уверен, что остальная часть вашего layout.jade(div # wrap) будет отображаться правильно под телом (я сомневаюсь).

Что бы я рекомендовал, если это действительно вопрос добавления условного класса в тело, это что-то вроде этого в layout.jade(вместо тела блока):

body(class=myClassLocalVar)

Где myClassLocalVar указан в вашем вызове .render(res.render('index', {myClassLocalVar: 'theClass'});). myClassLocalVar может быть даже массивом, и jade назначит все классы в массиве вашему телу.

Ответ 2

Jade поддерживает рубиноподобную интерпретацию строк

В вашем макете

- var bodyClass = '';
block vars
body(class='#{bodyClass}')
  block content

В ваших файлах просмотра

extends layout
block vars
  - var bodyClass = 'my-page';
block content
  p Hello World!

Ответ 3

Вы можете манипулировать переменными в родительской области, поэтому это решение также возможно:

В вашем макете

- var bodyClasses = [];
block beforeBody

body(class=bodyClasses)
  block content

В ваших файлах просмотра

extends layout
block beforeBody
  - bodyClasses.push('my-page')
block content
  p Hello World!

Это позволяет добавлять несколько классов на разные уровни вашего макета.