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

Question

我正在尝试通过构建一个使用canvas绘制用户数据的小型Web应用程序来学习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')

可以这样做吗？直观地,在我看来它应该是,但我只是错过了这样做的机制.

Answer 1

我在本周播出的一个截屏视频中进入了这个话题.这是一个链接: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 content,block scripts所以他们将成为孩子们body.最后,即使每次调用您的布局block extraHeader 都会出现这种情况,除非您的模板将内容放入其中,否则它不会注入任何符合您要求的内容,正如我所理解的那样.