pug.js, also known as PUG, is a Javascript library that was previously known as JADE. It is an easy-to-code template engine used to code HTML in a more readable fashion. One upside to PUG is that it equips developers to code reusable HTML documents by pulling data dynamically from the API.
PUG syntax is sensitive to indentation/whitespace
Here are some standard syntaxes of PUG.
' '
or a comma ,
// Single attributea(href='//educative.io') Educative// Multiple attributes separated by a commaa(href='//educative.io', target='_blank')// Attributes spanning over multiple linesimg(alt='Edpresso logo'src='logo.png'width='50'height='50'style="border:6px solid black;float:left;")
Case statements work just like JavaScript switch statements.
case
when
to specify a conditiondefault
//- Generating a random number between 0 and 99- var number = Math.floor(Math.random() * 100)//- using case to figure out in what range is the numbercase numberwhen number < 25p Number is between 0 and 24 inclusivewhen number < 50p Number is between 25 and 49 inclusivewhen number < 75p Number is between 50 and 74 inclusivedefaultp Number is between 75 and 99 inclusive
Unbuffered Code vs. Buffered Code
-
and does not directly output anything. It can be used in the PUG code later to make changes.=
. If there is an expression, it will evaluate it and output the result.// Unbuffered Code- var number = 99- var coffee = 'latte'- var list = ["Belgium", "France", "China"]// Buffered Codep= "99 times 2 is: " + number*2p= "I prefer " + coffee + " over cappuccino"
Buffered Comments vs. Unbuffered Comments vs. Multiline Comments
//
. They appear in the rendered HTML file.//-
. They do not appear in the rendered HTML file.//
followed by an indented block.// This is a Buffered Comment//- This is an Unbuffered Comment//This isa multilinecomment
To compile a standard HTML5 doc, use doctype
followed by html
.
doctype html
Use include
to add other PUG files.
Caution: adding non
.pug
files will result in plain text being added to the rendered HTML doc.
// This is playlist.pugheadulli Memories - Adam Lavineli Hymm for the weekend - Coldplayli Bad Liar - Imagine Dragons// Using this in my base PUG filedoctype htmlhtmlbodyh2 My playlistinclude playlist.pug
PUG inheritance makes use of the block
and extend
keywords. You can create a parent template with multiple blocks, which can be extended over the child template to replace those blocks.
//- This is what a typical parent template will contain named layout.pugdoctype htmlhtmlheadh2 Include scripts hereblock scriptsheadh2 Include your favorite candy name hereblock content//- Extending this over child templateextend layout.pugblock scriptsscript(src='courses.js')script(type='application/javascript')block contentp gummy bears
Interpolation is an easy way to substitute placeholders in a template with corresponding JavaScript expressions. This can be done using #{}
.
// Replacing with a variable- var name = 'leonard hofstader'h2 Printing name in all lower capsp Dr. #{name}h2 printing name with first letter of each name in uppercasep Dr. #{name.charAt(0).toUpperCase() + name.slice(1, 7) + name.charAt(8).toUpperCase() + name.slice(9)}
You can iterate over a specific range or list using the each
keyword, or you can iterate conditionally using the while
keyword.
- var superheroes = ["Spiderman", "Ironman", "Hulk", "Thor"]// Use of eacholeach hero in superheroesli = hero// Use of whilevar count = 0while superheroes[count] != "Hulk"count++p #{superheroes[count]} SMASH!
Tags are what make PUG clean, readable, and easy to code. Instead of having closing tags, PUG relies on whitespace/indentation that is later rendered accordingly to an HTML doc.
// Observe the use of indentationdoctype htmlhtmlbodytitle How to code Tagsh1 Use proper indentationp| The file will not| render properly if the| programmer does not make| sure of proper indentation