Step into Jadejs

Posted on   |   In , ,   |  

Node Template Engine, a terse language for writing HTML templates, support dynamic code and reusability.

Installation & API

  • Installation
    $ npm install jade -g
  • API
    1
    2
    3
       var jade require("jade");
    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= item

  • prefix = / buffered code ; support JS expressions

    1
    2
    3
       h1= foo
    = foo
    p=list

  • unescaped 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.

Resources

JADE
Jade Syntax - interactive demo
Segmentfault