Learn Jade in One Video
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 |
//- 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 |
|
1 2 3 |
head title Jade Tutorial script(src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js') |
|
1 2 3 4 5 6 7 8 9 10 11 |
//- 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 |
Leave a Reply