Template Inheritance | Web Development with Jade

Blocks

Blocks function like small containers for Jade. Their content can be appended to, prepended to, or replaced entirely. To define a block, simply use the block keyword, and then the name of the block, as shown:

Jade	HTML
block scripts script(src='jquery.js')	<script src="jquery.js"></script>

By default, a block will just output the nested content, but blocks really become useful when you start to extend them. Blocks can also be nested inside other tags, making them useful as placeholders. For example, in the following file (which we will use for examples throughout the rest of the chapter), we will define three blocks; scripts, styles, and content, as shown:

layout.jade:

Jade	HTML
doctype html head block scripts script(src='jquery.js') block styles body block content p there's no content here	<!DOCTYPE html> <html> <head> <script src="jquery.js"></script> </head> <body> <p>there's...

Jade

HTML

doctype
html
  head
    block scripts
      script(src='jquery.js')
    block styles
  body
    block content
      p there's no content here

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery.js"></script>
  </head>
  <body>
    <p>there's...

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

Blocks

Web Development with Jade

By : Sean Lang

Web Development with Jade

By: Sean Lang

Overview of this book

Blocks

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