Template Inheritance | Web Development with Jade

Extends

The extends keyword allows us to specify that a particular template extends another template. This means the template in which the keyword is used gets to modify the blocks of the other template.

The syntax is simple; using extends layout means that the template in which it is used gets to extend layout.jade (the .jade part of the filename is implied). Also, full paths can be used; like if layout.jade was one directory above the location of the current template, we could use ../layout to access it.

Replace

To replace the content of a block, we use the same syntax as defining a block, but it must be put in a template that extends the file in which the block was defined. For example, if we have a page in which we need both jQuery and underscore.js, we could redefine the scripts block as follows:

page1.jade (in the same directory as layout.jade):

Jade	HTML
extends layout block scripts script(src='jquery.js') script(src='underscore.js') block content	<!DOCTYPE html> <html...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Web Development with Jade

By : Sean Lang

Web Development with Jade

By: Sean Lang

Overview of this book

Extends

Replace

Web Development with Jade

By : Sean Lang

Web Development with Jade

By: Sean Lang

Overview of this book

Extends

Replace

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access