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

Question

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

javascriptnode.jstemplatesexpresspug

12

我正在尝试通过构建一个小型 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')

有没有可能做类似这样的事情？直觉上，我觉得应该可以，但我只是缺少具体的实现机制。

- Eogcloud

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- juanpaco · Accepted Answer

这周我在一档屏幕录制系列节目中讨论了这个话题。这是链接：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，但除非模板提供要放置在其中的内容，否则它不会注入其他满足您要求的内容，就我所理解的那样。