Alternatively, we could use Unbuffered code to achieve the same result 😎 pug Copy - const balance = 100 if balance >= 50 span Nice! else if balance >= 0 span Cool else span Uh oh! html Copy Nice! Iteration Pug provides conditional operators that feel familiar to those we use elsewhere. number = ` Random number is $ ! ` html Copy Hey Geoff! Conditionals

Buffered - Code prefixed with = is evaluated and output is included.

Unbuffered - Code prefixed with - is not included in the output.

You can use valid JavaScript within Pug templates. pug Copy //- layout.pug html head title Some awesome site! body include menu.pug main block content pug Copy //- menu.pug nav ul li a ( href = '/' ) Home li a ( href = '/about' ) About html Copy Some awesome site! Home About Inline code 🤓

To stop our pug files from growing out of control, we can split them into separate files and include them.Ĭonsider a layout where we 'include' a menu section of markup.

Giving us html Copy Awesome site Welcome to an awesome site! Includes pug Copy //- layout.pug html head title Awesome site body block content pug Copy //- home.pug extends layout.pug block content h1 Welcome to my awesome site! The common example is a layout extension. Pug supports template inheritance via extends and blocks. if ( isAwesome (pug ) ) return 'Hell yeah!' Inheritance via extends and blocks If you need to include plain text within an element, suffix with. You can write comments with //(included in output) and //-(not included in output). If we wanted a div with the class flower, we only need pug Copy.

Define attributes optionally comma-separated within the brackets.

If no tag is defined, pug defaults to div

Text at the start of a line with no special character prefix is treated as a tag.

It uses an indent sensitive syntax allowing you to write clean markup with less code 😎įor those in camp TL DR, scroll down for demos! 😎 Jumping in 👟 Īn element follows this structure pug Copy input #check. A template engine for node and browser environments.

Pug template define attributes