When Rails renders a view as a response, it does so by combining the view with the current layout. A layout defines the surroundings of an HTML page. It’s the place to define a common look and feel of your final output.
By default, Rails uses the app/views/layouts/application.html.erb file as the main layout. It is created when you create a new ails application.
If you create a library application with rails new library command, its main layout code would be as follows:
The application.html.erb file acts as a base template used by the individual view templates. For example, the index action in the BooksController renders the index.html.erb view. The tag <%= yield %> inside application.html.erb marks a section where content from the view should be inserted.
This can be verified by looking at the log generated on the command terminal when you start the server and visit the index view (http://localhost:3000/books/)
StartedGET"/books"for::1 at 2025-03-2500:11:13+0530Processing by BooksController#index as HTMLRendering layout layouts/application.html.erb
Rendering books/index.html.erb within layouts/application
BookLoad(4.3ms)SELECT"books".*FROM"books"/*action='index',application='Controllerdemo',controller='books'*/
â³ app/views/books/index.html.erb:1Rendered books/index.html.erb within layouts/application (Duration:14.6ms |GC:0.0ms)Rendered layout layouts/application.html.erb (Duration:519.7ms |GC:0.3ms)Completed200OKin2448ms (Views:518.6ms |ActiveRecord:4.3ms (1 query,0 cached)|GC:0.3ms)
Rails first renders the application layout and then renders the index.html.erb inside it. Thus the yield tag is a place holder for the output of the view to be inserted.
Let us assume that the Rails application has a BooksController with index and show actions, A bookmodel that has been migrated and a few book records already entered.
classBooksController<ApplicationControllerdefindex@books=Book.all
end
The index action renders the index view (index.html.erb):
<% if @books.blank? %>
<p>There are not any books currently in the system.</p>
<% else %>
<p>These are the current books in our system</p><ul id = "books">
<% @books.each do |c| %>
<li><%= link_to c.title, {:action => 'show', :id => c.id} -%></li>
<% end %>
</ul>
<% end %>
<p><%= link_to "Add new Book", {:action => 'new' }%></p>
The following figure shows the output of index view when the default application layout is used.
Changing the Default Layout
Let us now change the default layout. Save the following code to app\views\layouts\standard.html.erb.
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns ="http://www.w3.org/1999/xhtml"><head><meta http-equiv ="Content-Type" content ="text/html; charset = iso-8859-1"/><meta http-equiv ="Content-Language" content ="en-us"/><title>LibraryInfoSystem</title></head><body id ="library"><div id ="container"><div id ="header"><h1>LibraryInfoSystem</h1><h3>Library powered by Ruby on Rails</h3></div><div id ="content"><%= yield -%>
</div>
<div id ="sidebar"></div></div></body></html></pre>
You let the controllers know what template to use by the name of the file, so following a same naming scheme is advised. Now open books_controller.rb and add layout command to specify the layout to be used.
classBooksController<ApplicationController
layout "standard"defindex@books=Book.all
end
It instructs the controller that we want to use a layout available in the standard.html.erb file. Now try browsing books that will produce the following screen. Restart the server and visit the index view. The browser shows the following output.
The command terminal log also confirms that the standard layout is in use.
Rendered books/index.html.erb within layouts/standard (Duration:6.9ms |GC:0.0ms)Rendered layout layouts/standard.html.erb (Duration:9.0ms |GC:0.0ms)
Adding the Style Sheet
Till now, we have not created any style sheet, so Rails is using the default style sheet. Now let's create a new file called style.css and save it in /public/stylesheets. Add the following code to this file.
You can also create a layout with multiple yielding regions:
<html><head>
<%= yield :head %>
</head><body>
<%= yield %>
</body></html>
The main body of the view will always render into the unnamed yield. To render content into a named yield, call the content_for method with the same argument as the named yield.
Using Partials
Rails supports Partial templates - usually just called "partials" are reusable components stored in files prefixed with an underscore (_).
Let us add a navbar to the standard layout. For this purpose, first save the following HTML as _navbar.html.erb in app\views\books folder
To render a partial as part of a view, you use the render method inside the standard layout. Here, the navbar is to be displayed on the top, so add the following stamen in the <head> section.
<%= render "navbar" %>
This will render a file named _navbar.html.erb at that point within the view being rendered. Note the leading underscore character: partials are named with a leading underscore to distinguish them from regular views, even though they are referred to without the underscore.
You may have to update the style.css to include the navbar styles.
.horizontal-navbar {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
.horizontal-navbar li {
margin-right: 20px;
}
.horizontal-navbar li a {
text-decoration: none;
color: black;
}
Save the changes and refresh the browser. The index view now displays the navbar at the top as a result of including the partial template.
Leave a Reply