Layout and Yield

Every web page has a bunch of HTML code in common - doctype, <body>, <head> and <html> tags and stylesheet link for starters.

It's likely that most of your sites will have considerably more in common to add to that: things like navigation, masthead and footer are probably the same for most pages - even the general layout of the page (main content area, sidebars) may be the same sitewide. You might also have links to javascript libraries and embedded code for statistics tracking.

Rather than duplicating this stuff in every template, you can put it in the layout file in your site folder layout.html.erb.

Somewhere in that file you simply need to include <%= yield %>, to tell Blueprint where to inject your template content.

Here's an example.

In layout.html.erb, you have:

<html>
  <head>
    <title>My Website</title>
  </head>
  <body>

    <ul class="navigation">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Get in Touch</a></li>
    </ul>

    <%= yield %>

  </body>
</html>

In another template - your page/index.html.erb for example, you have this snippet:

<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit     
    anim id est laborum.
  </p>
</div>

If you were to visit a page of your site, those two things would be combined, with the template snippet being inserted in place of the <%= yield %>, so that it looked like this:

<html>
  <head>
    <title>My Website</title>
  </head>
  <body>

    <ul class="navigation">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Get in Touch</a></li>
    </ul>

    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt  
        mollit anim id est laborum.
  </p>
    </div>

  </body>
</html>

It's possible to have multiple yields in your layout. This can be useful if every page on your site has a main content area and a sidebar, or if you want to be able to add head information (like template-specific styles, Javascript, or meta-tags).

For example, in the layout:

<html>
  <head>
    <title>My Website</title>
    <%= yield :head %>
  </head>
  <body>
  ...

And then in the template:

<% content_for :head do %>
  <style>
    h1 {
      color: #fof;
      font-size: 2.8em;
    }
  </style>
<% end %>

This would result in:

<html>
  <head>
    <title>My Website</title>
      <style>
        h1 {
          color: #fof;
          font-size: 2.8em;
        }
      </style>
  </head>
  <body>

  ...

(and of course would give you large pink page headings!)

Layout and Yield

User notes

Note preview