Layouts

Location

The view layout files are located in the app/views/layouts directory.

Default

The default layout is set to be main.erb, which is a file that is already included in Eucalypt. However, this can be changed in the core application file.

app/views/layouts/main.rb
<html>
    <head>
        <title><%= @page_title %></title>
        <%= manifest :stylesheet, :script %>    
    </head>
    <body>
        <%= yield %>
    </body>
</html>

NOTE: manifest is an in-built helper method for including the manifest stylesheet and javascript files.

Observe the yield method - this is essential to include in any layout file, as it specifies where the rendered content should be placed in the view.

Example

Suppose we have an index page that says Hello World!:

app/views/index.erb
<h1>Hello World!</h1>

But this isn't a complete webpage without the html, body and head tags (which were in the main.erb layout).

If we were to render the index page by inserting the contents of index.erb into the location of the yield method call in main.erb, and set the instance variable @page_title to 'Welcome to the welcome page!', we would have a perfect webpage that looks like:

<html>
    <head>
        <title>Welcome to the welcome page!</title>
        <%= manifest :stylesheet, :script %>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

To render the index.erb file using the main.erb file as a layout (whenever we visit /, /index or /home), simply add the following resource handler in your controller:

get '/' do
  @page_title = 'Welcome to the welcome page!'
  erb :index, layout: :'layouts/main'
end

But remember, since the default layout is main.erb, we don't need to specify the layout.

This means we can get rid of the layout keyword argument to the erb rendering method, along with the :'layouts/main' symbol that specifies the layout:

get '/' do
  @page_title = 'Welcome to the welcome page!'
  erb :index
end

Don't want a layout?

For some views, you might want to render the entire page from a single view file (without a layout). This is often the case with pages that are unique and don't follow a pattern like having the same navigation bar as other pages. Such page examples are typically index pages, 404 pages etc.

To omit a layout, simply set false as the keyword argument layout::

error Sinatra::NotFound do 
  erb :"404", layout: false
end
PreviousViewsNextPartials

Last updated