使用 Jade，如何在扩展模板中声明 body 类？

Question

使用 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.

这不起作用。

Answer 1

Jade 支持类似 ruby​​ 的字符串解释

在你的布局中

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

在您的视图文件中

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

Answer 2

你可以在父作用域中操作变量，所以这个解决方案也是可以的：

在你的布局中

- var bodyClasses = [];
block beforeBody

body(class=bodyClasses)
  block content

在您的视图文件中

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

这样做可以让您在布局的不同级别中添加多个类。

Answer 3

好的，block body 语句只是一个名称为 body 的块，因此在您的布局中您没有包含 body 标记，它必须添加到 index.jade（您尝试这样做） .但是，在您的 index.jade 中，您 替换 块内容只有 body.index （我猜 - 因为我不在我的开发计算机上，现在无法尝试 -渲染正常，但取出整个内容，最终得到的只是一个空主体，尽管它应该具有 class='index' 属性）。

你可以试试这个（在 index.jade 中）：

block prepend body
    body.index

但我不确定你的 layout.jade (div#wrap) 的其余部分是否会在 body 下正确呈现（我对此表示怀疑）。

如果真的只是在主体上添加一个条件类，我会建议在 layout.jade（而不是块主体）中使用类似这样的内容：

body(class=myClassLocalVar)

在您的 .render 调用 (res.render('index', {myClassLocalVar: 'theClass'});) 中指定了 myClassLocalVar。 myClassLocalVar 甚至可以是一个数组，jade 会将数组中的所有类分配给你的 body。