Node Template Engine, a terse language for writing HTML templates, support dynamic code and reusability.
Installation & API
- Installation
$ npm install jade -g- API
2
3
var fn = jade.compile('string of jade',options);
fn(locals);
Jade command line
$ jade [-options] [file]
$ jade layout.jade //compile layout.jade file to layout.html file
$ jade layout //compile whole "layout" directory
Jade Syntax
Common
- doctype html/xml/… e.g.-> <!DOCTYPE html>;
- Indented style
- text at the start of line represents an html tag
- self closing tags(img,meta, link…) and explicitly self close (appending /, e.g. abc/ ->
)
Attributes
- By default, all attributes are escaped, unescapeded attributes need use != instead of =, use !{name} instead of #{name}.
- &attributes can be used to explode an object into attributes of an element, it’s not escaped by default
- Boolean/Style/Class attributes
- Class/ID Literal
Text/PlainText
Piped Text |
| //to prefix the line with a | character(pipe)
HTML Tags
Inline in a Tag
p h1 h2 ... script
Block in a Tag
p. h1. script. ....
JS Code support
prefix - / unbuffered code & block unbuffered code
1
2
3
4- var foo = "foo";
-
each item in list
li= itemprefix = / buffered code ; support JS expressions
1
2
3h1= foo
= foo
p=listunescaped buffered code
p!= “This is “ + “unescaped“- Jade naturely support if, else, else if, until, while , unless
basic controls
if, unless
if name == "xyz"
h1 hello xyz
else
h1 My Name is #{name}
for, each, while
select
each book, i in books
option(value=i) Book #{book}
ul
for book in books
li= book
else
li no books!
case
case month
when 1
p January
when 2
p February
other
p Month : #{month}
extends & inheritance
extends
extends ./view/layout.jade
block
- block, by default, will be replaced within a child template, it’s a recursive process
- (block) append
- (block) prepend
include
- insert the contents of one jade file into another
- plain text file
- js/css
- filtered text
include:markdown article.md
interpolation
String Interpolation, escaped
-var msg = "";
h1= msg
p This is #{msg}
String Interpolation, Unescaped
!{msg}
Tag Interpolation, #[ ]
p.
Please visit my blog on
#[a(target="_blank", href="https://strong689.github.io") GitHub]
Mixins
to create reusable blocks of jade
Mixins decalration & reuse
// Declaration
mixin myfooter
ul
li a(href="abc.com") about me
li a(href="/privacy.html") privary
li a(href="/home.html") home
mixin myfunction(para)
li.classname= para
// use
+myfooter
+myfunction("abc")
mixin blocks
mixin product(name)
.product
h1= name
if block
block
else
p no product detail
+product("samsung galaxy III")
+product("iphone')
p old version
p amazing product
Mixin Attributes
//declaration
mixin link(href,name)
//- attributes == {class:"btn"}
a(class!=attributes.class, href=href)= name
//use
+link('/foo','foo')(class='btn')
Rest Arguments
//declaration
mixin list(id, ...items)
ul(id=id)
each item in items
li= item
//to use
+list('mylist',1,2,3,4)
Comments
- single line comment //same like JS comments
- invisible single line comments //-adding a hyphen
- block comment, indented after the first line comment
- normal HTML style conditional comments , e.g.