Menu

Fire.app 機能應用教學

取得目前的頁面路徑及其應用（進階）

接下來要將主選單加上對應目前的頁面時項目會較為醒目的效果，此部份提供初學者較單純的解決方案，也提供讓進階者更了解其作用原理的說明。

初學者版本

可以直接使用我們提供的 Helper 來達成需求。請在根目錄中建立檔案 view_helpers.rb ，內容如下： 

module ViewHelpers
  def new_link_to(name, href, options={})
    if href == request.path
      options[:class] ||=''
      options[:class] += "active"
    end
    link_to name, href, options
  end
end

使用這個 new_link_to Helper 時需要傳入兩個參數，第一個是 <a> tag 裡面要放的內容，第二個是 <a> tag 中 href 屬性的值。例如我們想要製作一個連結到 /index.html 且顯示文字為 首頁 的連結，利用這個 Helper 的寫法便是：

<%= new_link_to("首頁","/index.html") %>

使用 new_link_to Helper 後會自動判斷目前的頁面路徑是否和該連結的路徑相同來決定輸出的結果。當目前的頁面不是 /index.html 時，產出的結果為：

<a href="/index.html">首頁</a>

若目前的頁面是 /index.html 時，產出的結果為：

<a href="/index.html" class="active">首頁</a>

在此份教學範例中，必須改寫 _main_menu.html.erb 的內容如下：

<div class="main-menu">
    <ul>
        <li>
            <%= new_link_to('<span class="icons-home">Home</span>',"/index.html") %>
        </li>
        <li>
            <%= new_link_to('<span class="icons-features">Features</span>',"/features/index.html") %>
        </li>
        <li>
            <%= new_link_to('<span class="icons-documents">Documents</span>',"/documents.html") %>
        </li>
        <li>
            <%= new_link_to('<span class="icons-screenshots">Screenshots</span>',"/screenshots.html") %>
        </li>
    </ul>
</div>

由於在 CSS 中我們已經定義了主選單連結在 class="active" 時應呈現的樣式，完成改寫後便可達成對應目前的頁面時主選單項目會較為醒目的效果。

注意：在上面的程式碼中傳入 new_link_to 的第一個參數使用了含有 class 的整個 span <span class="icons-home">Home</span>，由於其中包含了雙引號 " ，故傳入時需要使用單引號 ' 來包圍才不會發生錯誤。

進階者版本

此需求實際上是先利用 request.path 來取得目前的路徑，再配合判斷式來達成想要的效果。以下先列出不使用 Helper 而是直接插入 if 判斷式的 _main_menu.html.erb 寫法，較易看出作用的原理：

<div class="main-menu">
    <ul>
        <li>
            <a href="/index.html" <%= 'class="active"' if request.path == "/index.html" || request.path == "/" %>>
                <span class="icons-home">Home</span>
            </a>
        </li>
        <li>
            <a href="/features/index.html" <%= 'class="active"' if request.path =~ /^\/features\// %>>
                <span class="icons-features">Features</span>
            </a>
        </li>
        <li>
            <a href="/documents.html" <%= 'class="active"' if request.path == "/documents.html" %>>
                <span class="icons-documents">Documents</span>
            </a>
        </li>
        <li>
            <a href="/screenshots.html" <%= 'class="active"' if request.path == "/screenshots.html" %>>
                <span class="icons-screenshots">Screenshots</span>
            </a>
        </li>
    </ul>
</div>

了解 request.path 的作用原理後，可以看見前面提供的 Helper 寫法其實同樣是利用 request.path 來達成效果：

module ViewHelpers
  def new_link_to(name, href, options={})
    if href == request.path
      options[:class] ||=''
      options[:class] += "active"
    end
    link_to name, href, options
  end
end

關於自訂 Helper 的詳細說明請參考： Template Helper

Next: Build Project