Skip to content

Templates, layouts, and partials

Jump to bottom Edit New page
miau715 edited this page Dec 21, 2012 · 8 revisions

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.

##Templates

Fire.app supports many template languages like ERB, Haml, Slim and Markdown. 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:

HTML:

<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>

Haml:

%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 .html.haml.

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.

##Layouts

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 two ways to use layouts as shown here:

  1. Adding layout file to the folder.
  2. Using a specific layout file.

###Adding layout file to the folder

ERB and Haml files automatically use _layout.html.erb or _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:

special_layouts/_special_layout.html.erb

Now contact.html.erb will use /special_layouts/_special_layout.html.erb as its layout.

##Partials

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.erb or _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:

Main menu:

<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.

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.

Add a custom footer

Fire.app

中文文件 (Chinese version)

日本語ドキュメント (Japanese version)

Clone this wiki locally