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