Template Inheritance | Web Development with Jade

Includes

The last way to insert content from another file is with an include statement. This is the simplest way, but also the least dynamic because you cannot change/generate the name of the file you want to include. This is because includes are one of the first things that are evaluated when compiling a template; before any loops, logical operations, or variables.

Still, they are quite useful for moving pieces of templates that are reused many times into their own files, or for including static assets such as HTML, CSS, or JS directly in templates.

Static

If you just want to include a static asset, the operation is very basic.

style.css:

p {
  color: blue;
  text-decoration: underline;
}

content.html (in the same directory as style.css):

<h1>includes</h1>
<p>this is a file for demonstrating the use of includes in Jade</p>

example.jade (in the same directory as style.css):

Jade	HTML
doctype html head style(type="text/css") include style.css body include...

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

Includes

Static

Web Development with Jade

By : Sean Lang

Web Development with Jade

By: Sean Lang

Overview of this book

Includes

Static

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