CODEWITHSUNDEEP
node.jsexpresspug
Peter
Peter

Reputation: 3184

Jade multiple template files

I'm really new to Node and am playing around with Express and Jade, the tutorial I'm following is out of date and I can't seem to figure out how to do this.

In my app.js file I've declared the following route:

app.get('/helloworld', function(req,res) {
    res.render('tasks/helloworld.jade', { title: 'Hello World!' });
});

So for my views I have the following

layout.jade

doctype 5
html
 head
  title= title
  link(rel='stylesheet', href='http://twitter.github.com/bootstrap/assets/css/bootstrap.css')
 body
  section.container!= body

Attempting to use bootstrap css

and then tasks/helloworld.jade

extends ../layout

body
 h1 Hello World

However, this doesn't seem to yield the result I'm thinking it should. If I remove extends ../layout the template renders but without any header. If I leave it in I get an error that says body is not defined

Any idea how to get that to render properly?

Upvotes: 0

Views: 1999

Answers (1)

Nick Mitchinson
Nick Mitchinson

Reputation: 5480

In jade you use blocks to extend templates. Try this:

layout.jade:

doctype 5
html
 head
  title= title
  link(rel='stylesheet', href='http://twitter.github.com/bootstrap/assets/css/bootstrap.css')
 body
   section.container
      block content

helloworld.jade:

extends ../layout

block content
 h1 Hello World

This will effectively replace whatever's in the block content of your layout with the new content provided, in this case h1 Hello World.

Edit: I added a section.container into the layout because I realized afterwards that I think you are trying to wrap everything inside the body. If that's not what you're trying to do you can remove that line, but make sure you fix the indenting if you do because jade cares about that.

Upvotes: 4

Related Questions