Template Inheritance using Extend and Block

Step 1: Create a folder name template-inheritance for the project.

mkdir template-inheritance
cd template-inheritance

Step 2: Install pug client to use the pug command.

npm install pug-cli -g

Template Inheritance: Extend and Block in Pug

While creating websites or different web applications, we can first create a base HTML template, and build different pages on top of the base template. This concept of using building pages over a base template is called Template Inheritance. It’s a powerful feature available in web template engines like Pug. We can use template inheritance in Pug using “extend” or “block”.

In this article, we will explore how we can use template inheritance in Pug, along with some examples.

Table of Content

  • Template Inheritance in Pug
  • Extend in Pug
  • Block in Pug
  • Template Inheritance using Extend and Block
  • Advantages of Template Inheritance

Similar Reads

Template Inheritance in Pug

Template inheritance is a method that allows you to create a hierarchy of templates, where child templates inherit structure and functionality from parent templates. This concept creates modular, maintainable, and scalable web applications by separating layout concerns from content specifics....

Extend in Pug

In Pug, the extend keyword is very important for template inheritance. It enables a child template to inherit from a parent template, thereby establishing a relationship between the two. The parent template usually holds the big-picture layout of a webpage, while the child templates deal with specific content....

Block in Pug

It works together with the “extend” keyword. Blocks let child templates change parts of the parent template. This means you can add your own content to certain areas of the parent template, making the website unique without making the code messy....

Template Inheritance using Extend and Block

Step 1: Create a folder name template-inheritance for the project....

Folder Structure:

...