Welcome to my Jade Tutorial. Jade is the templating engine for NodeJS. Like Handlebars, which I covered previously, Jade helps separate your HTML from your dynamic content.
People find generating HTML with a preprocessor provides for more readable code that is easier to maintain. We’ll look at installing, tags, include, indentation, attributes, interpolation, conditionals, looping, mixins, templating, extends and more. All of the code follows the video below.
If you like videos like this, it would help me greatly if you’d support me on Patreon.
After making just $3.49 off of my last 8 videos I decided if I want to keep making educational videos I’ll have to look for an income source. $1 is greatly appreciated! If you can’t afford it though that is perfectly ok because I’m very happy that my videos are helping over 30 million people each month.
Code and Transcript
//- Install Node.js at https://nodejs.org/en/download/
//- The use the Node Package Manager to install Jade by typing
//- npm install jade -g in the terminal or command prompt
//- Compile Jade code by typing jade jadetut.jade in the terminal
//- We can also compile to JS with
//- jade --client --no-debug jadetut.jade
//- h1 Hello Jade
//- There are many doctypes available
//- The default doctype
doctype
//- Xml documents
//- doctype xml
//- Contains presentational or deprecated elements
//- doctype transitional
//- Doesn't include presentational or deprecated elements
//- doctype strict
//- Like transitional with frameset content
//- doctype frameset
//- For devices like PDAs, pagers, settop boxes
//- doctype basic
//- XHTML documents specifically aimed at mobile devices
//- doctype mobile
//- Define the html tag
html
//- You can include other Jade files
include ./head.jade
//- Define the body
body
// Single or block comment
that shows in HTML
//- Jade uses indentation rather then tags to define elements
//- Each level of indents creates a new block that creates a
//- child element in the element above
//- This generates a div with 2 paragraphs in it
//- You can either put the text in the element after the tag
//- You can can define a text block with a | (pipe) and
//- mix in other HTML elements like br
//- Or, you can use a . if you just have a block of text to
//- display
//- Inline HTML tags can be used any place as well
div
p First paragraph
p
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ipsum velit. Nulla finibus enim sit amet nisi congue sagittis.
br
| Cras sem diam, aliquam et bibendum quis, volutpat at eros. Quisque gravida erat quis mauris cursus, sed iaculis lacus laoreet.
p.
Nulla fringilla, nibh sed placerat posuere, metus urna lacinia sapien, in <i>consectetur justo</i> ex sit amet enim. Aenean gravida mauris quis risus tempor tempor. Vivamus malesuada maximus leo, vel aliquam erat mattis lacinia. Nunc sagittis ante at condimentum euismod.
//- Attributes are defined in parentheses and are separated
//- with commas
p(id="4th_Para",
class="lorem_ipsum very_import").
Sed tristique ipsum in pellentesque commodo. Pellentesque mi nibh, dictum non luctus et, porta non nibh. Nulla a mollis quam, sit amet feugiat urna. Phasellus enim nisi, dignissim sit amet mattis a, vestibulum in massa.
//- Divs are defined by default if you don't provide a tag
//- as long as you are defining a class or id
//- You can also define ids (#) and classes (.) with shorthand
//- notation
#2nd_div.lorem_ipsum.very_import
Duis nec nisl risus. Ut eleifend purus vitae orci elementum, eget ultricies sem iaculis. Suspendisse id rutrum odio. Pellentesque a ante in tortor euismod dictum ac sit amet magna. Nulla sed velit tristique, lobortis erat vitae, bibendum sapien. Aenean ac volutpat nibh. Integer et volutpat est.
//- If you are creating lists you can do this
ul
li#bbp_list_item
a(href='#') Barry Bonds
li#bbp_list_item
a(href='#') Hank Aaron
li#bbp_list_item
a(href='#') Babe Ruth
//- Or, you can put them on the same line with a colon
ul
li#hero_list_item: a(href="#") Batman
li#hero_list_item: a(href="#") Superman
li#hero_list_item: a(href="#") The Flash
//- ---------- INTERPOLATION ----------
//- You can execute JavaScript in a template by putting
//- a dash and space in front of it
- myName = "Derek";
//- You can place variables in the HTML with interpolation
//- Everything between #{} is used like code
p Hello #{myName}
//- So we can execute JavaScript any place
p 1234 * 5678 = #{1234 * 5678}
//- The code can be run in attributes
- website = "http://newthinktank.com"
a(href="#{website}") New Think Tank
- heroes = ['Wonder Woman', 'Super Girl', 'Bat Girl']
ul
li#hero_list_item: a(href="#") #{heroes[0]}
li#hero_list_item: a(href="#") #{heroes[1]}
li#hero_list_item: a(href="#") #{heroes[2]}
//- You can shorten tag names, but this normally isn't good
- bq = "blockquote"
#{bq} A Bad Idea
//- You can also use = when a block contains only the variable
//- value
- batmanData = "Batman is a superhero co-created by artist Bob Kane and writer Bill Finger and published by DC Comics. The character made his first appearance in Detective Comics #27 (May, 1939). Batman is the secret identity of Bruce Wayne."
p= batmanData
//- You can do the same with attribute values stored in an
//- object
- fnI = {"type": "text", "name": "fName"}
span First Name
input(type=fnI.type, name=fnI.name)
//- Tags are encoded for security reasons
- someInfo = "<i>Very Interesting</i>"
p= someInfo
//- To turn off encoding use !=
p!= someInfo
//- Or
p !{someInfo}
//- ---------- LOGIC OPERATORS ----------
//- You can provide different output based on if
//- conditions
- date = new Date()
- hour = date.getHours()
- if ((hour >= 6) && (hour <= 17)){
h3 Day Time
- } else {
h3 Night Time
- }
//- This can also be written using indentation
- age = 18
if ((age >= 16) && (age < 18))
h3 You can drive
else if age >= 18
h3 You can drive and vote
else
h3 You can wait till you're 16
//- unless comes out negative if the condition is true
unless age >= 16
h3 You'll drive at 16
else
h3 You can drive
//- You can also use the ternary operator
- dayTime = (((hour >= 6) && (hour <= 17)) ? 'Day Time' : 'Night Time')
h3 #{dayTime}
//- Case works like Switch
- name = "Sue"
case name
when "Sally"
h3 Hi Sally
when "Sue"
h3 Hi Sue
default
h3 Hi You
//- You can also run JS with script
script.
console.log('Hello Jade!')
//- ---------- LOOPING ----------
//- You can use for loops to cycle through data
- qbs = ['Palmer', 'Brees', 'Rivers', 'Brady']
ul
- for(i = 0; i < qbs.length; i++){
li= qbs[i]
- }
//- Each is used to iterate over arrays and objects
ul
each qb in qbs
li= qb
//- While loops iterate as long as the condition is true
- i = 0
ul
while i < 20
li= i
- i++;
//- ---------- MIXINS ----------
//- Mixins are reusable pieces of code that are basically
//- JS functions
mixin nflPlayer(name, pos, team)
li #{name} is the #{pos} for the #{team}
ul#nflPlayers
+nflPlayer("Tom Brady", "Quarterback", "Patriots")
+nflPlayer("Payton Manning", "Quarterback", "Broncos")
//- Mixins don't have to receive parameters and can
//- just provide output like the copyright symbol
mixin copyr
| ©
p
+copyr
| 2016
//- You can receive a variable number of arguments
//- by turning the arguments object into an array
mixin makeList()
ul
- args = Array.prototype.slice.call(arguments);
for item in args
li= item
+makeList("Dog", "Cat", "Fish")
//- ---------- EXTEND ----------
//- extend allows us to replace blocks in a template
extends extendex
block header
h3 The Title
block content
p
| Nulla fringilla, nibh sed placerat posuere, metus urna lacinia sapien, in consectetur justo ex sit amet enim. Aenean gravida mauris quis risus tempor tempor. Vivamus malesuada maximus leo, vel aliquam erat mattis lacinia. Nunc sagittis ante at condimentum euismod.
//- We can append to what is there
block append content2
p
| Appended data
//- We can prepend to what is there
block prepend content3
p
| I come first
head title Jade Tutorial script(src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js')
//- Blocks are containers that can be replaced, appended, or prepended block header h3 Default Header block content p Default Content block content2 p Default Content 2 block content3 p Default Content 3 block footer p Default Footer