-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtutorial_4.html.erb
86 lines (73 loc) · 4.88 KB
/
tutorial_4.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<h1>Fire.app Feature Tutorial</h1>
<h2>Basic Usage of Layout </h2>
<p>We found many duplicated parts in the example files we have seen previously:</p>
<img src="images/structure_02.png" />
<p>In the image above, we can see the same header, footer and main menu are shown on every page. Moreover, besides the homepage, all the other pages have the same sidebar. If we use plain HTML to make this prototype, duplicated code would be unavoidable and difficult to maintain. With a template language, we can use layout to solve this problem. It's used to contain the duplicated parts and can be applied per page. To know more about layout, please check <a href="template_layout_partial.html">Templates, Layouts & Partials</a>。</p>
<p>After understanding layouts, let's write some code. In the image above we see only the homepage has no sidebar, so the homepage is an exception and we skip it now. Next, move the common parts of the rest of the pages into a layout.</p>
<p>Because the content we want for making the layout is already part of the Screenshots page, we'll use the content of <code>screenshots.html.erb</code> to make our layout.</p>
<p>First, add a file <code>_layout.html.erb</code> in the project folder. Please note, when we use "Build Project", file names with an initial underline do NOT generate individual files.</p>
<p>Copy the whole content of <code>screenshots.html.erb</code> and paste it into <code>_layout.html.erb</code>. Then replace the innards of <code><div class="main"></code> with <code><%= yield %></code> for the layout file to use to get page content. Now the `_layout.html.erb` might look like this:</p>
<pre class="prettyprint linenums lang-html">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fire.app Demo</title>
<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" />
</head>
<body>
<div class="header-wrapper">
<div class="header">
<h1 class="logo"><a href="index.html">Fire.app</a></h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
</div>
</div>
<div class="main-menu">
<ul>
<li><a href="/index.html"><span class="icons-home">Home</span></a></li>
<li><a href="/features/index.html"><span class="icons-features">Features</span></a></li>
<li><a href="/documents.html"><span class="icons-documents">Documents</span></a></li>
<li><a href="/screenshots.html"><span class="icons-screenshots">Screenshots</span></a></li>
</ul>
</div>
<div class="main-block">
<div class="main">
<%= yield %>
</div>
<div class="side">
<div class="ad">
Ad Words
</div>
<div class="links">
<h2>Information Links</h2>
<ul>
<% 5.times do %>
<li><a href="#"><%= lorem_words(4+rand(4)) %></a></li>
<% end %>
</ul>
</div>
</div>
</div>
<div class="footer-wrapper">
<div class="footer">
<%= lorem_sentence %>
</div>
</div>
<%= livereload_js %>
</body>
</html>
</pre>
<p>After completing the layout, we still have to deal with the content of <code>screenshots.html.erb</code> to fit our layout. Otherwise, the common parts between these two files will be duplicated in the final result ( you can switch to the browser to see this situation ). That's why we need to delete the common parts in <code>screenshots.html.erb</code>. The content of <code>screenshots.html.erb</code> should be:</p>
<pre class="prettyprint linenums lang-html">
<% 5.times do %>
<h2><%= lorem_words(4+rand(4)) %></h2>
<p><img src="<%= lorem_image("640x360") %>" /></p>
<p><%= lorem_paragraph %></p>
<% end %>
</pre>
<p>Let's see the schematic diagram:</p>
<img src="images/layout.png" />
<p>Now, you already did the step using layout and you can see the result in your browser. Because the other pages' content is already prepared in the teaching material file, you can click any link in the main menu to see other pages. Also, you can open other page's files in your IDE and you'll see they're all generated from ERB helpers with HTML.</p>
<div class="page-footer">
Next: <a href="tutorial_5.html">Using Partial Files and Specifying Layouts <i class="lsf-icon arrow"></i></a>
</div>