Templates, Layouts & Partials
Fire.app provides many template languages to simplify HTML development. Template languages help reduce repetitive work when using features like layouts and partials during prototyping.
Fire.app supports many template languages:
- Markdown (Kramdown)
We recommend the ERB or Haml to best utilize Fire.app's features including layouts, partials and template helpers. Those good with HTML will find ERB and Haml are easy to get familiar with. Particularly, ERB (HTML with embedded Ruby) supports plain HTML and Ruby code for handling duplicate HTML parts. For example:
<h1>sample list</h1> <ul> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li>list 4</li> <li>list 5</li> </ul>
ERB: less code and easier to change its size.
<h1>sample list</h1> <ul> <% (1..5).each do |n| %> <li>list <%= n %></li> <% end %> </ul>
%h1 sample list %ul - (1..5).each do |n| %li="list "+n.to_s
Using template languages with Fire.app is very easy, just name the file with a corresponding file extension. For example, ERB uses this file extension
.html.erb. In the same way, if you chose Haml, use
Given a file named
test.html.erb in the project folder, opening the url
http://127.0.0.1:24681/test.html in your browser displays the render result.
If you want to learn more about the ERB and Haml, please follow these links below. In all the following examples we use ERB.
Pages within a website often have the same layout and several identical elements. You will need to copy the source code of these duplicate parts to many files when prototyping in plain HTML. Modifying the duplicate parts in these files is very inconvenient and tedious. Fire.app solves this problem with layouts. The rendered results of every single page are generated at the
<%= yield %> position. For example, the ERB layout file might look like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Site Title</title> <link href="/stylesheets/style.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="header"></div> <%= yield %> <div class="footer"></div> </div> </body> </html>
There are three ways to use layouts as shown here:
- Adding layout file to the folder
- Using a specific layout file
- Specifying render template
Adding layout file to the folder
ERB and Haml files automatically use
_layout.html.haml as their layout when these files are found in the same folder or parent folder. Please note, file names with an initial underline are NOT generated to an individual file. If both current and parent folders have layout files, the first one is used.
Using a specific layout file
When a particular page doesn't use the default layout, you can assign another specific layout file. For example, you have a page
contact.html.erb which needs to use the specific layout
/special_layouts/_special_layout.html.erb. Add a file named
contact.html.layout, which corresponds with the page's file name as shown:
contact.html.erb will use
/special_layouts/_special_layout.html.erb as its layout.
Specifying render template
This method is usually used with
content_for. For example, if we write this segment in our common layout
<% if content_for? :ad %> <%= yield :ad %> <% end %>
The code above will display the content of the identifier
But, if we need to use the same
:ad content in all of the pages in the folder
/doc with the common layout, we can add a new layout file
_layout.html.erb in the
/doc folder with this content:
<% content_for :ad do %> Common content for pages in /doc. <% end %> <%= render :template => "/_layout" %>
With the code above, we can add common content with
content_for and still use the common layout. For more about
content_for, please check Template Helpers.
Besides layout, websites often have common elements, like a main menu or advertisements. They may only appear on some particular page or specific layouts. Partials help you maintain and easily reuse these parts and use the same initial underline as layouts, for example:
_footer.html.haml. To get partial content, just use a render statement similar to
<%= render :partial => "footer" %>.
Here is another example using our main menu to become a partial file:
<ul id="main_menu"> <li class="about"><a href="#">About</a></li> <li class="products"><a href="#">Products</a></li> <li class="contact"><a href="#">Contact</a></li> </ul>
Name the file
_main_menu.html.erb. Then, put file
_layout.html.erb in the same folder:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Site Title</title> <link href="/stylesheets/style.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="header"> <%= render :partial => "main_menu" %> </div> <%= yield %> <div class="footer"></div> </div> </body> </html>
Please note, when using a render statement with a partial file, there is no need to include an underscore or file name extension.