我正在尝试通过构建一个使用画布来绘制用户数据图形的小型网络应用程序来学习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')
有可能做这样的事吗?直观地,在我看来它应该是,但我只是错过了这样做的机制。
答案 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 content
和block scripts
,以便他们成为body
的孩子。最后,即使每次调用布局时block extraHeader
都会,但除非您的模板将内容放入其中,否则它不会注入任何符合您要求的内容,据我所知。