Fire.app 機能應用教學

基於現有 Layout 製作變更部分內容的延伸 Layout（進階）

在範例網站中可以看到 Features 列表頁和內容頁的主選單下方都有一個宣傳文字區塊，為了讓 features 資料夾內的頁面都能擁有這個宣傳區塊，我們必須使用提供另一個 layout 給 features 資料夾內的頁面使用。但是如果要將共通 Layout 的內容複製一次的話便又增加了重複的程式碼量，因此我們可以改用指定 render template 搭配 content_for 的方式解決。

首先更改全站共用的 Layout 檔案 /_layout.html.erb ，在 <%= render :partial => "main_menu" %> 下方加上要插入宣傳文字的 content_for 區塊：

<% if content_for? :feature_slogan %>
    <%= yield :feature_slogan %>
<% end %>

由於預設狀況下此位置並不需要顯示任何內容，故無需撰寫 else 的部份。

接下來在 features 資料夾中新增一個 _layout.html.erb 檔案。由於資料夾中的檔案會使用離自己最近的 Layout 檔案， features 資料夾內的檔案便會使用新增的 Layout 檔案做為 Layout。

新增的 _layout.html.erb 內容如下：

<% content_for :feature_slogan do %>
    <div class="well">
        <h3><%= lorem_sentences 2 %></h3>
    </div>
<% end %>
<%= render :template => "/_layout" %>

上面的程式碼建立了一個基於共用 Layout 的 新 Layout，使用 <%= render :template => "/_layout" %> 表示套用這個 Layout 的頁面仍是以根目錄的 _layout.html.erb 做為實際上的 Layout ，而 content_for :feature_slogan 的部份則是指定套用此 Layout 的頁面都會擁有宣傳文字的區塊。完成後切換至瀏覽器便可看見 Features 列表頁和內容頁都加上了宣傳文字區塊。