Layouts and Content For Tag in Rails 5

Objective

To learn how to use content_for tag with layouts in Rails 5.

Steps

Step 1

In Rails 5, the application layout app/views/layouts/application.html.erb file looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Todo List</title>
    <%= csrf_meta_tags %>
    <%= action_cable_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>
  </head>

  <body>
     <div id='container'>
         <h1>Todo List</h1>
            <%= yield %>
     </div>
  </body>
</html>

Step 2

In app/views/projects/index.html.erb, we can list the projects to be displayed in the projects index page:

<h1>Projects</h1>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @projects.each do |project| %>
      <tr>
        <td><%= project.name %></td>
      </tr>
    <% end %>
  </tbody>
</table>

Step 3

Add :

<% content_for :head do %>
 This is the content for head
<% end %>

to the top of app/views/projects/index.html.erb:

Step 4

Add the yield :head in app/views/layouts/application.html.erb:

<head>
  <title>Todo List</title>
    ....
    <%= yield :head %>
</head>

Step 5

Reload the projects index page. You will see the content for the head section.

Step 6

Let's add a footer section in the layout file:

<!DOCTYPE html>
<html>
  <head>
    <title>Todo List</title>
    <%= csrf_meta_tags %>
    <%= action_cable_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>
    <%= yield :head %>
  </head>

  <body>
     <div id='container'>
         <h1>Todo List</h1>
            <%= yield %>
     </div>
  </body>

  <%= yield :footer %>

</html>

Step 7

Let's provide the content for the footer section in app/views/projects/index.html.erb:

<% content_for :footer do %>
  This is the footer
<% end %>

Step 8

For the page to load faster move the javascript tag just before the body tag closes. This allows the browser to load the DOM elements without getting blocked by loading javascript. This will work if you are not depending on javascript to load any html elements.

<!DOCTYPE html>
<html>
  <head>
    <title>Todo List</title>
    <%= csrf_meta_tags %>
    <%= action_cable_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => 'reload' %>

    <%= yield :head %>
  </head>

  <body>
     <div id='container'>
         <h1>Todo List</h1>
            <%= yield %>
     </div>
     <-----  THIS IS THE NEW LOCATION OF JAVASCRIPT INCLUDE TAG ----->
     <%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>
  </body>

  <%= yield :footer %>

</html>

Summary

In this article, you learned how to use content_for tag to customize layouts. It is similar to tiles in Java.


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.