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

标签 javascript node.js templates express pug

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

有可能做这样的事情吗?直觉上在我看来应该是这样,但我只是缺少这样做的机制。

最佳答案

我在本周的截屏系列剧集中讨论了这个主题。这是它的链接: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 contentblock scripts 以便它们成为 body 的子级。最后,即使 block extraHeader 在每次调用您的布局时都会出现,除非您的模板将内容放入其中,否则它不会注入(inject)任何其他内容据我了解,符合您的要求。

关于javascript - Jade模板,扩展模板后添加到头部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21262373/

相关文章:

c++ - 如何在 `operator==` 包装类中使用重载 `std::variant` 来比较 Setting Vs Setting 和 T vs T?

c++ - C++从编译时多态性隐藏模板成语

javaScript show hide 功能在显示从 phpMyAdmin 获取数据的 Accordion 时存在一些问题

node.js - Node : TypeError: Object #<Object> has no method 'endianness'

node.js - 如何在node.js进程错误事件上记录堆栈跟踪

javascript - 如何在electronic中的main.js中调用另一个脚本中的函数

c++ - 通过循环传递不同的数据类型

javascript - 浏览器中的 JavaScript 有反射机制吗?

javascript - ExtJS RESTful服务无法处理json数据

javascript - 如何使用 puppeteer 缓存文件