javascript - Jade模板，扩展模板后添加到头部

Question

我正在尝试通过构建一个使用 Canvas 绘制用户数据图表的小型网络应用来学习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 .

但是，如果您只想得到答案，请继续阅读。您可以在模板文件中使用多个 block 。在您的情况下，您可能会使 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 block 调用。这应该会让你继续前进。

如果你需要在同一个渲染中从多个模板文件中添加内容到extraHeader，你可以使用block append extraHeader或更简洁的append extraHeader。如果您希望附加内容出现在开头，还有一个 prepend 变体。

编辑:修复了一些缩进。此外，我缩进了 block content 和 block scripts 以便它们成为 body 的子级。最后，即使 block extraHeader 在每次调用您的布局时都会出现，除非您的模板将内容放入其中，否则它不会注入(inject)任何其他内容据我了解，符合您的要求。