玉模板,在扩展模板后添加到头部

时间:2014-01-21 15:30:21

标签: javascript node.js templates express pug

我正在尝试通过构建一个使用画布来绘制用户数据图形的小型网络应用程序来学习jade / express。

目前,我只是把一个Jade模板放在一起,我扩展了一个以前的模板(我称之为layout.jade),其中包含几乎所有页面都使用的一般资源。

我的问题是我想扩展模板,然后只为那个页面而不是其他页面向主题部分提出一些建议。我已经玩弄了一段时间并进行了研究,但找不到具体的信息。

这就是我所拥有的

layout.jade
!!! 5
html
    head
        title EZgraph
        link(rel='stylesheet', href='bootstrap/css/bootstrap.min.css')
        link(rel='stylesheet', href='stylesheets/ezgraph.css')
    body
    block content
    block scripts

这是我正在研究的模板

extends layout

head
    link(rel='stylesheet', href='stylesheets/barchartentry.css')

有可能做这样的事吗?直观地,在我看来它应该是,但我只是错过了这样做的机制。

1 个答案:

答案 0 :(得分:24)

我在本周播出的一系列截屏视频中进入了这个话题。以下是指向它的链接:http://www.learnallthenodes.com/episodes/10-more-advanced-jade

但是,如果您只想得到答案,请继续阅读。您可以在模板文件中使用多个块。在您的情况下,您可以使layout.jade看起来像这样:

layout.jade
!!! 5
html
    head
        title EZgraph
        link(rel='stylesheet', href='bootstrap/css/bootstrap.min.css')
        link(rel='stylesheet', href='stylesheets/ezgraph.css')
        block extraHeader
    body
        block content
        block scripts

然后是您的模板文件:

extends layout

block extraHeader
    link(rel='stylesheet', href='stylesheets/barchartentry.css')

请注意匹配的extraHeader块调用布局和模板。这应该让你去。

如果您需要在同一呈现中从多个模板文件向extraHeader添加内容,则可以使用block append extraHeader或更简洁的append extraHeader。如果您希望在开头显示其他内容,还可以使用prepend变体。

编辑:修复了一些缩进。此外,我缩进block contentblock scripts,以便他们成为body的孩子。最后,即使每次调用布局时block extraHeader 都会,但除非您的模板将内容放入其中,否则它不会注入任何符合您要求的内容,据我所知。