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
|
|
||||
In the next example if we removed the indentation we will not get h4 as the child of a span.
|
|
||||
The using of the | character can also signal for a textblock of text.
|
|
||||
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.
|
|
||||
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.
|
||
|
||
One can also pass in data as JSON for data-* attributes
|
1 |
span(data-sizes={options: ['small', 'large', 'xlarge']}) Hello World |
|
1 |
<span data-sizes='{"options":["small","large","xlarge"]}'>Hello World</span> |
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
|
|
||||
Block expansion
Sometimes the indentation could becoming annoying when you are creating ordered or unordered list.
|
1 2 3 4 5 6 7 |
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.
|
1 2 3 4 |
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.
|
|
||||
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.
Leave A Comment