Используя Jade, как я могу объявить класс тела в расширенном шаблоне? - PullRequest
Новая
       1

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

10 голосов
/ 09 февраля 2012

Используя движок шаблонов 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.

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

Ответы [ 3 ]

37 голосов
/ 21 июля 2013

Jade поддерживает интерпретацию слов в стиле ruby ​​

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

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

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

extends layout
block vars
  - var bodyClass = 'my-page';
block content
  p Hello World!
6 голосов
/ 11 июня 2014

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

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

- var bodyClasses = [];
block beforeBody

body(class=bodyClasses)
  block content

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

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

Выполнениепоэтому позволяет добавлять несколько классов на разных уровнях макета.

4 голосов
/ 09 февраля 2012

Хорошо, оператор 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 назначит все классы в массиве вашему телу.

...