Approach to Create Pug Lists
- Setting Up ExpressJS: The code initializes an Express.js server.
- Setting View Engine: It sets Pug as the view engine for rendering templates.
- Routing: There’s a single route defined for the root URL (
/). When a user accesses this URL, it renders thelistPug template. - Pug Template: The Pug template defines the structure and styling of the HTML page. It consists of ordered and unordered lists with different list item styles (disc, circle, square) and types (numeric, alphabetical, roman numerals).
- Styling: The styling is done using CSS embedded within the Pug template (
style.). It sets styles for the body, headings, containers, and list items.
How to create Lists in Pug View Engine ?
Pug is a template engine for NodeJS and browsers to render dynamic reusable content. At compile time, the template engine compiles our Pug template code to HTML. Pug has many powerful features like conditions, loops, includes, and mixins using which we can render HTML code based on user input or reference data.
Pug also supports JavaScript natively, hence using JavaScript expressions, we can format HTML code. This approach allows us to reuse static web pages which have dynamic data. Angular brackets are not used while specifying the tags.
Contact Us