Yield

yield is a variable that includes that a particular path’s contents. For example, when visiting /blog, the entire contents of blog/index.jade would be available within the variable yield.

Why?

When using Layouts and Partials, you will want to work with the content from the page that the Layout or Partial is wrapping. This content is contained within the variable yield, and can be placed wherever you’d like in a Partial or Layout.

Usage

yield will be available as a variable in any _layout.jade or _layout.ejs file. It will also be available in any explicit layout set in a _data.json file, which is covered in the Layouts documentation. It’s also possible to use the yield variable in any Partial.

Jade Example

Using the following directory structure:

myproject/
  |- _layout.jade
  |- index.jade
  |- about.md

When visiting /about, the content from the about.md file needs to be shown. Likewise, visting /index should show the content in index.jade. Both these files will be wrapped by _layout.jade first.

Therefore, in _layout.jade, you need to indicate where the output, or “yield” will go:

doctype
html
  head
    title Example
  body
    != yield

Now, the content from whatever page you are visiting will be included in the <body> element. Note that in Jade, the != (instead of just =) indicates you don’t want the HTML to be escaped.

If you wanted to move where the output was in this template, it is now simply a matter of moving the yield variable:

doctype
html
  head
    title Example
  body
    article
      h1 Hello, world
      section
        != yield

EJS Example

Using the following directory structure:

myproject/
  |- _layout.ejs
  |- index.ejs
  |- about.md

When visiting /about, the content from the about.md file needs to be shown. Likewise, visting /index should show the content in index.ejs. Both these files will be wrapped by _layout.ejs first.

Therefore, in _layout.ejs, you need to indicate where the output, or “yield” will go:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <%- yield %>
  </body>
</html>

Now, the content from whatever page you are visiting will be included in the <body> element. Note that in EJS, opening tags with <%- (instead of just <%=) indicates you don’t want the HTML to be escaped.

If you wanted to move where the output was in this template, it is now simply a matter of moving the yield variable:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <article>
      <h1>Hello, world</h1>
      <section>
        <%- yield %>
      </section>
    </article>
  </body>
</html>

Also see