Either head on over to the project’s home page and download the correct binaries for your system, or use a version manager such as nvm. There’s a couple options for installing Node/npm. Finally, we’ll explore a couple of Pug’s more advanced features by building a simple Node/Express project which uses Pug as its template engine.īefore we can get to writing some Pug, we’ll need to install Node, npm (which comes bundled with Node) and the pug-cli package. We’ll start by installing it from npm, go over its basic syntax and then look at several examples of using JavaScript in Pug. 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. Here is an example of corresponding code that could be used inside a toc.As web designers or developers, we likely all have to write our fair share of HTML. Here is the example front matter (YAML):. We’ve defined a notoc variable in our front matter that will prevent a table of contents from rendering when specifically set to true. Most of the pages benefit from having the table of contents provided, but sometimes the table of contents doesn’t make a lot of sense. You can provide variables to be used by templates in individual content’s front matter.Īn example of this is used in the Hugo docs. You can define any values of any type and use them however you want in your templates, as long as the values are supported by the front matter format.

for site-wide values) or through the metadata of each specific piece of content (i.e. Hugo provides the option of passing values to your template layer through your site configuration (i.e. But the build would have failed if that code in the HTML comment had an error. So the above example will render Emma Goldman, as the $author variable got evaluated in the HTML comment. The templating engine will strip the content within the HTML comment, but will first evaluate any Go Template code if present within.

Pug template conditional class