Contents
Pug
An HTML template engine: short markup syntax, variables, loops, mixins and template inheritance.
1.Getting started
- What is PugWhat a template engine is, what Pug markup looks like, what it turns into and where Pug is used.
- Installing and buildingHow to install Pug with npm and turn a template into an HTML file with a small Node.js script.
- Pug with ViteHow to use Pug templates in a Vite project with the vite-plugin-pug-transformer plugin.
2.Syntax
- Tags and indentationHow tags are written in Pug, how indentation sets nesting and what a page skeleton with doctype looks like.
- Classes and idsThe short syntax for classes and ids in Pug: a dot and a hash after the tag name, and div by default.
- AttributesHow to set tag attributes in Pug: parentheses, several attributes, attributes on several lines and boolean attributes.
- TextThree ways to write text in Pug: on the tag line, with a vertical bar and as a block after a dot, plus tags inside text.
- CommentsThe two kinds of comments in Pug: those that end up in the HTML and those that stay in the template only.
3.Data and logic
- Variables and interpolationCode lines with a hyphen, outputting a value with =, inserting #{} into text and passing data to the template from the build script.
- Unescaped outputHow !{} and != differ from #{} and =, when you need them and why they are dangerous with data from visitors.
- ConditionalsHow to show different markup depending on data: if and else, unless and case in Pug.
- IterationHow to output lists from data in Pug: each over arrays and objects, the item index, else for an empty list and while.
4.Reuse
- MixinsHow to declare a repeated piece of markup once in Pug and call it with arguments and nested content.
- IncludesHow to move the header, footer and mixins into separate files and insert them into pages with include.
- Template inheritanceA shared page layout with blocks, extends and block in pages, and append and prepend to add to blocks.
- FiltersHow to put text in another markup language, such as Markdown, into a Pug template with filters.
5.In practice
- A multi-page siteBuilding the café site from three pages: a shared layout, a header with the active menu item, a footer and a script that builds every page.
- Pug with ExpressHow an Express server renders pages from Pug templates on every request with res.render.
- Pug and other template enginesHow Pug differs from plain HTML and from EJS, Nunjucks and Handlebars, and when it is worth choosing.