In this guide, I’ll demonstrate how to get up and running with Pug. Pug makes it easy both to write reusable HTML, as well as to render data pulled from a database or API. It compiles to HTML and has a simplified syntax, which can make you more productive and your code more readable. Pug is a template engine for Node and for the browser. This can be a nightmare to debug and to maintain. HTML is also static, which means that if you want to display dynamic data (fetched from an API, for example), you invariably end up with a mishmash of HTML stings inside JavaScript. This is where the Pug HTML preprocessor comes in. And while this is not the most difficult task, it can often feel a little boring or repetitive. Note: else unless statements do not work with unless you can chain an else if statement to an unless statement, but else unless does not work.As web designers or developers, we likely all have to write our fair share of HTML. Unless is the inverse operation of if in Pug. You can chain any number of else if statements to an existing if statement, to evaluate a sequence of statements.Įlse if page > 26 & page Lots of numbers! You will need to wrap the statement in parentheses, though (if you omit a dash, you do not need parentheses.) - var showLogin = false You can choose to prepend an if or else operator with a dash, but it is not necessary. You can evaluate variables created in Pug, or those passed to it by your route ( res.render, pug.renderFile, etc).

Official PugJS documentation on conditionals If/Else Statement in PugĬonditionals in Pug can evaluate statements in a manner similar to JavaScript.

Pug template conditional