Jade templates, adding to a head after extending a template

Question

I'm trying to learn jade/express by building a small web app that uses canvas to graph user data.

Currently, I'm just throwing together a Jade template, I've extended a previous template (one I call layout.jade) that includes general resources that are used on almost all pages.

My problem is that I want to extend the template, then ammend something to the head section for only that page and not others. I've been toying with it for a while and researching but can't find specific information on it.

Here's what I have

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

And here's the template I'm working on

extends layout

head
    link(rel='stylesheet', href='stylesheets/barchartentry.css')

Is it possible to do something like this? Intuitively it seems to me like it should be but I'm just missing the mechanism to do it.

Answer 1

I get into that very topic in this week's episode of a screencast series I do. Here's a link to it: http://www.learnallthenodes.com/episodes/10-more-advanced-jade.

But, if you'd rather just have the answer, read on. You can use more than one block in your template files. In your case, you might make layout.jade look something like this:

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

And then your template file:

extends layout

block extraHeader
    link(rel='stylesheet', href='stylesheets/barchartentry.css')

Note the matching extraHeader block calls in both the layout and the template. That should get you going.

If you needed to add content to extraHeader from more than one template file in the same rendering, you can use block append extraHeader or the more succinct append extraHeader. There's also a prepend variant if you want the additional content to appear at the beginning.

Edit: fixed some indenting. Also, I indented block content and block scripts so that they would be children of body. Lastly, even though that block extraHeader will be there on every call to your layout, unless your template gives it content to put in there, it won't inject anything else which meets your requirements, as I understand them.