NodeJS Jade
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
- Load Template
- Compile Jade code
- 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…
Hello There. I discovered your weblog the use of msn. That is a
very neatly written article. I’ll make sure to bookmark it and come back to learn extra of your
useful information. Thanks for the post. I will definitely return.