CODEWITHSUNDEEP
node.jsexpresspug
Masiar
Masiar

Reputation: 21352

jade template engine, how to use layout.jade?

I have a website in node.js; to create a page, say mypage I noticed I need to create both a layout.jade and mypage.jade files. If I put code in mypage.jade it is not displayed, so first I have to fill layout.jade with the layout of the page.

My question is, how do I reference inside layout.jade that I would like to load the content of mypage.jade in a certain container, for example? Can I have different pages with the same layout? How can I do this?

Thanks

Upvotes: 18

Views: 50754

Answers (4)

TMS
TMS

Reputation: 311

I know an approach that has given me the best results, even with angular (to substitute angular-route/ng-view)

First of all will be necessary to install express-layout:

npm install --save express-layout

After that, express will search for layout.jade file inside your views/ folder. So, inside of that you can use:

views/layout.jade

html
  head
    meta(charset='utf-8')
    title= title
  body
    div!= body

views/home.jade

h1 Welcome aboard, matey!

server.js

var express = require('express'),
    layout = require('express-layout');

var app = express();

app.get('/', function(req, res) {
    res.render('home', {
    title: 'Welcome!'
});

By default express will search for layout.jade in your views/ folder, but you can change the default, by using (yes, it is not necessary to write .jade extension):

app.set('layout', 'default');

After that express will use views/default.jade as the default layout.

Also if you want to use a different layout in a particular page, you can use:

app.get('/', function(req, res) {
    res.render('home', {
    layout: 'login',
    title: 'Welcome!'
});

Here express will render login.jade as the layout.

I suppose that you are using Jade as the default view engine, and don't change the default folder for views.

Here is the express-layout doc.

Upvotes: 1

Scott Rickman
Scott Rickman

Reputation: 560

A little late to the party but I struggled to find the answer initially... In layout.jade

doctype html
html(lang="en")
    head
    body
        h1 Hello World
        block myblock

Then in index.jade

extends layout
    block myblock
        p Jade is cool

Will render

<!DOCTYPE html>
<html lang="en">
<head>
<body>
    <h1>Hello World</h1>
    <p>Jade is cool</p>
</body>
</html>

Upvotes: 7

alessioalex
alessioalex

Reputation: 63663

http://expressjs.com/guide.html#view-rendering

If you don't want to use layouts you can disable them globally:

app.set('view options', {
  layout: false
});

If you don't do that layouts are enabled by default and Express searches for the standard layout in your_view_folder/layout.jade

You can specify a separate layout for each route though:

res.render('page', { layout: 'mylayout.jade' }); 
// you can omit .jade if you set the view engine to jade

Here's how your layout file could be:

doctype html
html(lang="en")
  head
    title Testing 123
  body
    div!= body

Note that body will be taken from "mypage.jade".

Edit:

Here's a real example in an application:

The application file (containing routes and configs):
https://github.com/alexyoung/nodepad/blob/master/app.js

The layout file:
https://github.com/alexyoung/nodepad/blob/master/views/layout.jade

Upvotes: 30

rolin.tencent.Shenzhen
rolin.tencent.Shenzhen

Reputation: 174

In express 3.x

Use Jade blocks, not layouts

http://www.devthought.com/code/use-jade-blocks-not-layouts/

Upvotes: 4

Related Questions