NodeJS Jade

Posted by On 6月 07, 2014 1 Comment

Get Started

Jade is node template engine.
You can write layout with programming like.

Install jade

You can use npm

npm install jade

First Sample

Jade can be used just as a short hand for HTML.
html -> <html>

index.jade

doctype
html
   head
      meta(charset="utf-8")
      title Sample
      link(rel="stylesheet", href="style.css")
   body
      h1 Index Page
      p This is Test Page

No tab! Only space, Intent has very important role for jade.

Use Jade

var http = require('http');
var fs = require('fs');
var jade = require('jade');
var index = fs.readFileSync('./index.jade', 'utf8');
function doRequest(req, res) {
	var path = url.parse(req.url);
	switch(path.pathname){ 
		case '/':
			var fn = jade.compile(index); 
			var tmp = fn();
			res.setHeader('Content-Type','text/html'); 
			res.write(tmp);
			res.end();
			break;
        }
}

Steps

  1. Load Template
  2. Compile Jade code
  3. Render code

Jade requires compile jade.compile(index);

var index = fs.readFileSync('index.jade', 'utf8');
var fn = jade.compile(index);
var tmp = fn();
res.write(tmp);

Jade – How to write

Rule

  • Space after tag
  • Add | or . as break line
  • Attribute id p#id class p.class
  • Other attrs use ()
  • Use variable directly
  • Format val #{}
  • JavaScript –

Text

p This is test
p= 'This is test'

Line break

p This is test
   | this is test

or

p. This is test.
   This is test

Attributes

id, class

# is for id, . is for class

p#test.mystyle This is test

The result is 

<p id="test" class="mystyle">This is test</p>

Others

with ()

a(href='/hello', target="_blank")Test Ah

Result

<a href="/hello" target="_blank">Test Page</a>

Layout

Form

doctype
html
  head
    meta(charset="utf-8")
    title Sample Page
    link(rel="stylesheet", href="style.css")
  body
    h1= title
    p= msg + '(' + form.myname + ',' + form.mail + ',' + form.age + ')'
    form(method='post', action='/')
      table
        tr
          td
            input(type='text', name='myname',value=form.myname)
        tr 
          td
            input(type='text', name='mail', value=form.mail)
        tr
          td
            input(type='text', name='age', value=form.age)
        tr
          td
            input(type='submit')

Table

doctype
html
  head
    meta(charset="utf-8")
    title Sample Page
    link(rel="stylesheet", href="style.css")
  body
    h1= title
    if form != null
      -myname = form.myname
      -mail = form.mail
      -age = form.age
    else
      p= msg
    table
      for item,index in datas
        case index % 3 
          when 0
            tr(style='color:red') 
              td= item.myname 
              td= item.mail
              td= item.age
          when 1
            tr(style='color:green') 
              td= item.myname
              td= item.mail
              td= item.age
          when 2
            tr(style='color:blue')
              td= item.myname
              td= item.mail
              td= item.age

Template

include filename
header, footer etc…

Create file

  • include/header_file.jade
  • include/footer_file.jade

header – header_file.jade

h1= title
p.header= msg

title, msg are paramters from somewhere

footer – footer_file.jade

p.footer copyright 2015 atmarkplant.

Main index.jade

doctype
html
  head
    meta(charset="utf-8")
    title title
    link(rel="stylesheet", href="style.css")
  body
    include include/header_file
    p This is index .
    include include/footer_file

Use include to include jade file from outside.

JavaScript – main.js

var http = require('http');
var fs = require('fs');
var url = require('url');
var jade = require('jade');

var index = fs.readFileSync('./template.jade', 'utf8'); 
var style = fs.readFileSync('./style.css', 'utf8');

var server = http.createServer();
server.on('request', doRequest); 
server.listen(1337);

function doRequest(req, res) {
	var path = url.parse(req.url);
	switch(path.pathname){ 
	case '/':
		var fn = jade.compile(index,{
			filename:'include',
			rootpath: __dirname
		});
		
		var tmp = fn({
			title:"Toppage",
			msg:"This is message"
		});
		res.setHeader('Content-TYpe', 'text/html');
		res.write(tmp);
		res.end();
		break;
	case '/style.css': 
		res.setHeader('Content-Type','text/css'); 
		res.write(style);
		res.end();
		break;
	case '/favicon.ico': 
		break;
	default:
		res.setHeader('Content-Type', 'text/plain'); res.write('NO PAGE!');
		res.end();
		break;
	} 
}
console.log('Server running at http://127.0.0.1:1337/');

filename : relative path
rootpath : root

Inheritance

Add block statement as include position
title, msg, content, footer, etc…

TOPICS