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


Create your own user feedback survey