P Get our super special promotional offer! A simple example could be: - var promo_is_live = false
I'm definitely a fan of cats ?️ in real life, but when it comes to code this reverses and I've got a preference for Pug ?️ For those who aren't coders: PugJS is a JavaScript template engine. Also, we define the actual content for block sections.Engineer. P2.product_description The Best Book Ever WrittenĪs you can see, here we extend the main-layout.pug using the extends keyword. Link(rel="stylesheet", href="/css/product.css") We can now use the main-layout reusable template in the shop and add-product templates.
For this purpose, we have some special logic while applying the class property using the incoming path property.
The block keyword is an indication that the actual content for will come from some other template.Īlso, since we now have a common navigation bar, we need to dynamically determine the active navigation item. This is largely the same as the other templates except for the presence of special block sections. Meta(name="viewport", content="width=device-width, initial-scale=1.0") Meta(http-equiv="X-UA-Compatible", content="IE=edge") Inside the folder, we will create a special template file known as main-layout.pug. To use this feature, we will create another folder layouts within the views folder. We can do so by using Pug reusable layout feature. It might benefit the maintainability of our code if we can remove this duplication of template code. Basically, the navigation bar is present in both the templates even though it is practically the same. In the above code, you may have noticed that we are repeating a bunch of template code. If interested, you can read more about routers in this post on Express Routers. Whenever user submits the form, we push a new product to the products array. Second is the POST method handler for adding a new product. In this case, we render the add-product template. One of them is a GET method handler for displaying the Add Product page.
To do so, we can execute the below command: $ npm install express pug body-parserīelow is the package.json for our example application. 2 – NodeJS Express Pug InstallationĪs a first step to using Pug in our Express app, we need to install the necessary packages. In this post, we will look at Pug and how we can use it with NodeJS and Express. Some of the most popular templating engines are:Įach of the engines has its own philosophy for defining the placeholders. In other words, a templating engine performs on-the-fly generation of HTML that is sent to the client. Basically, the engine replaces the placeholders or snippets with actual HTML content. When a request is processed by our application, the templating engine kicks into action. At the heart of a templating engine, there is a HTML template with placeholders for dynamic data. Templating engines help make our web applications dynamic in terms of data. Conclusion 1 – What is a Templating Engine?.3 – Creating NodeJS Express Pug Templates.