Fire.app 機能應用教學

使用 Template Helper

Template Helper 是一些能夠在樣板語言中使用的函式，能更簡單的達成許多建置網頁時不可或缺的功能。

在瀏覽器中開啟 http://127.0.0.1:24681/screenshots.html 即可看見目前的 Screenshots 頁面。 使用慣用的編輯器打開 screenshots.html 觀察原始碼，可以看到此頁面的原始碼是以許多重複的 HTML 組成頁面中的假文內容。

首先請將檔案 screenshots.html 的副檔名 .html 更改成對應 ERB 檔案的 .html.erb ，這樣之後才能在檔案中撰寫 ERB 語法。

修改完檔名後，可在 </body> 的前一行插入生成 LiveReload js 的 helper ：

<%= livereload_js %>

加入後先切換至瀏覽器重新整理一次使 LiveReload 生效，之後修改檔案存檔時瀏覽器便會自動重新整理頁面。

接下來要使用 ERB 語法簡化頁面中假文內容的部份，
請先找到內文區塊 <div class="main"> 中重複 5 次的 HTML 假文內容：

<h2>Lorem ipsum title</h2>
<p><img src="http://placehold.it/640x360" /></p>
<p>Lorem ipsum … </p>

將此 5 組 HTML 刪除 4 組只留下 1 組後，使用 Helper 來替代原有的內容：

<h2><%= lorem_words(4+rand(4)) %></h2>
<p><img src="<%= lorem_image("640x360") %>" /></p>
<p><%= lorem_paragraph %></p>

在上面的程式碼中可以看見 rand() 的應用，使用 lorem_words(4+rand(4)) 可以確保輸出的假文字數在 4 字（即4+0）至 7 字（即4+3）之間。以 Helper 產生假資料的優點除了可讓頁面看起來更為真實，由於每次重新整理頁面時假文資料都會改變，可以有效在早期發現當資料長度不符預期時發生的版面問題。

變更假資料的產生方式後，使用 ERB 語法來達成區塊重複的效果：

<% 5.times do %>
    <h2><%= lorem_words(4+rand(4)) %></h2>
    <p><img src="<%= lorem_image("640x360") %>" /></p>
    <p><%= lorem_paragraph %></p>
<% end %>

切換至瀏覽器，便可看見此頁面的內容變成 5 組內容相異的假文。

以同樣的方式將側欄部分的 <div class="links"> 和 footer 區域 <div class="footer"> 的內容也替換成 Helper 的形式：

側欄：

<div class="links">
    <h2>Information Links</h2>
    <ul>
        <% 5.times do %>
            <li><a href="#"><%= lorem_words(4+rand(4)) %></a></li>
        <% end %>
    </ul>
</div>

footer：

<div class="footer">
    <%= lorem_sentence %>
</div>

切換至瀏覽器確認頁面內容已經被更換成假文後即可進行下一階段的操作。