In my previous blog post I showed how one would install jade template engine for node.js and the terse markup that it provides. In this post I will continue on the jade and show the basic syntax of using jade template engine.
Basic syntax of Jade Template Engine for Node.js
As mentioned in earlier post, Jade is indentation-based, each level of indentation creates its own block. Thus the spaces are important/significant to it, also jade does not use end tags like html nor angle brackets. As we saw earlier in the p tag in our example.
Here is a simple example of h4 wrapped in span
span
h4
|
|
In the next example if we removed the indentation we will not get h4 as the child of a span.
span
h4
|
|
The using of the | character can also signal for a textblock of text.
span
| Hello
br
| world
|
Hello
|
Jade also provides a shorthand for textblock rather than using all the pipe “|” character one can just add a period to the tag, and add additional html elements.
span.
Hello
world
|
Hello
world
|
Attributes
Attributes like class and id can be added by using the bracket sytanx to a tag, and multiple styles can be added with an array like syntax.
span(id="mySpanId", class="boldTheSpan") Hello World
span(class=['boldTheClass', 'italicClass', 'underlineClass']) Goodbye World
|
|
Hello World
Goodbye World
|
|
One can also pass in data as JSON for data-* attributes
span(data-sizes={options: ['small', 'large', 'xlarge']}) Hello World
Hello World
Shortcuts
Here are some shortcuts of attributes for class and id when using jade, one can use the “#” for id and the period “.” of class right after the tag, and there is also automatic divs that jade provides
span#mySpanId.BoldClass Hello World
#myDiv Goodbye world
|
Hello World
|
Block expansion
Sometimes the indentation could becoming annoying when you are creating ordered or unordered list.
ol
li
a(href="apple.html")Apple
li.hightlight
a(href="orange.html")Orange
li
a(href="pear.html")Pear
Jade has a solution to this since being terse is what jade is all about, it provides a “:” shortcut to simplify this for us.
ol
li: a(href="apple.html")Apple
li.highlight: a(href="orange.html")Orange
li: a(href="pear.html")Pear
Comments and Block Comments
Jade also provides a way to comment out your template like the Javascript syntax it uses // and if you use // – it will not show the comment in the rendered html. It also provides a block syntax where if you indent the line after the comment it will comment out the following tags also.
// this is a comment
// - this will not show up in the render html
// comment out the tag below
span#mySpanId.BoldClass Hello World
|
|
Summary
I have covered most of the basic syntax of Jade here in this blog post, in my next post I will write about how to bind data into the template.