-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtutorial_5.html.erb
113 lines (89 loc) · 5.94 KB
/
tutorial_5.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<h1>Fire.app Feature Tutorial</h1>
<h2>Using Partial Files and Specifying Layouts</h2>
<p>In your browser, click the "Home" link in the main menu. You'll see the homepage is different from the previous design, which had no sidebar. This is because all the pages use the same layout, which has a sidebar, including the homepage. To remove the sidebar from the homepage, we need to make another specific layout for it.</p>
<p>It's seems the easiest way to achieve our goal is to make a homepage layout by copying & pasting the current layout's content then removing the sidebar. But if we do this, we'll get duplicated code again:
</p>
<img src="../images/partial_01.png" />
<p>To handle this situation, we need to use partial files with the layout.</p>
<p>The primary use for partial files is collecting the common contents between layouts to independent files. This will efficiently avoid duplicating code. </p>
<img src="../images/partial_02.png" />
<p>Partial files, just like layout files, should have names with an initial underline, so they do not generate individual files after clicking "Build Project." To learn more about partial files, please check <a href="template_layout_partial.html">Templates, Layouts & Partials</a>.</p>
<p>Next, we need to move the common parts in our layouts, like header, footer and main menu to partial files. Let's add the file <code>_layout.html.erb</code> to the project folder. Then, find <code><div class="header-wrapper"></code> block in <code>_layout.html.erb</code>, cut & paste the whole block to <code>_header.html.erb</code>. Save the file and we get the header's partial file:</p>
<pre class="prettyprint linenums lang-html">
<div class="header-wrapper">
<div class="header">
<h1 class="logo"><a href="index.html">Fire.app</a></h1>
<h2><%= lorem_sentence %></h2>
</div>
</div>
</pre>
<p>We also need to insert this into <code>_layout.html.erb</code> at the position we just cut <code><div class="header-wrapper"></code> previously: </p>
<pre class="prettyprint linenums lang-html">
<%= render :partial => "header" %>
</pre>
<p>This lets us use the content of the partial file to replace the origin header block, and the final output is the same.</p>
<p>Because we already prepared the other necessary partial files from the unzipped teaching material file, we only have to change the corresponding segments in <code>_layout.html.erb</code> to use the render partial method. All we need to change are these parts:</p>
<img src="../images/partial_03.png" />
<p>The <code>_layout.html.erb</code> should look like this: </p>
<pre class="prettyprint linenums lang-html">
<!DOCTYPE html>
<html>
<head>
<%= render :partial => "head" %>
</head>
<body>
<%= render :partial => "header" %>
<%= render :partial => "main_menu" %>
<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>
<% 8.times do %>
<li><a href="#"><%= lorem_words (4+rand(3)) %></a></li>
<% end %>
</ul>
</div>
</div>
</div>
<%= render :partial => "footer" %>
<%= livereload_js %>
</body>
</html>
</pre>
<p>In the above code, we can see <code><div class="side"></code> block doesn't use a partial file because the homepage's layout has no sidebar.</p>
<p>After completing these steps, we can start to deal with the layout for the homepage. Add the file <code>_sp_layout.html.erb</code> in the project folder and copy & paste the whole content of <code>_layout.html.erb</code> into it. Then, delete the whole <code><div class="side"></code> and we have finished the layout for the homepage. It should look like this: </p>
<pre class="prettyprint linenums lang-html">
<!DOCTYPE html>
<html>
<head>
<%= render :partial => "head" %>
</head>
<body>
<%= render :partial => "header" %>
<%= render :partial => "main_menu" %>
<div class="main-block">
<div class="main">
<%= yield %>
</div>
</div>
<%= render :partial => "footer" %>
<%= livereload_js %>
</body>
</html>
</pre>
<p>We already made <code>_sp_layout.html.erb</code>, the layout for our homepage, but the homepage file <code>index.html.erb</code> is not using it as its layout. To achieve the goal, we have to use a specific file to assign the layout. This specific file must have the same file name as the file we want to assign the layout to, but change the last part of its extension to <code>.layout</code>. For example, in this project we need to assign a specific layout for the homepage, and the homepage's file name is <code>index.html.erb</code>. So, the file we use for assigning the homepage's layout should be named <code>index.html.erb</code>. And the file's content is the layout's file name. In this case, the content of <code>index.html.layout</code> is :</p>
<pre class="prettyprint linenums lang-html">
_sp_layout.html.erb
</pre>
<p>Now, <code>index.html.erb</code> will use <code>_sp_layout.html.erb</code> as its layout, instead of the common layout. Switch to your browser and you'll see the sidebar in the homepage is now gone. The layout structure of this project is shown below: </p>
<img src="../images/layout_01.png" />
<div class="page-footer">
Next: <a href="tutorial_6.html">Changing the Content of Layouts for Particular Pages (Advanced) <i class="lsf-icon arrow"></i></a>
</div>