У меня есть более сжатая версия nav_link, которая работает точно так же, как link_to, но настроена для вывода оборачивающего тега li.
Поместите следующее в свой application_helper.rb
def nav_link(*args, &block)
if block_given?
options = args.first || {}
html_options = args.second
nav_link(capture(&block), options, html_options)
else
name = args[0]
options = args[1] || {}
html_options = args[2]
html_options = convert_options_to_data_attributes(options, html_options)
url = url_for(options)
class_name = current_page?(url) ? 'active' : nil
href = html_options['href']
tag_options = tag_options(html_options)
href_attr = "href=\"#{ERB::Util.html_escape(url)}\"" unless href
"<li class=\"#{class_name}\"><a #{href_attr}#{tag_options}>#{ERB::Util.html_escape(name || url)}</a></li>".html_safe
end
end
Если вы посмотрите на приведенный выше код и сравните его с кодом link_to в url_helper.rb, единственное отличие состоит в том, что он проверяет, является ли URL-адрес текущей страницей, и добавляет класс «active» в оборачивающий тег li. Это потому, что я использую помощник nav_link с компонентом nav Twitter Bootstrap, который предпочитает, чтобы ссылки были заключены в теги li, а «активный» класс применялся к внешнему li.
Хорошая вещь в приведенном выше коде заключается в том, что он позволяет вам передавать блок в функцию, как вы можете сделать с link_to.
Например, список навигации начальной загрузки со значками будет выглядеть так:
Тонкий:
ul.nav.nav-list
=nav_link root_path do
i.icon-home
| Home
=nav_link "#" do
i.icon-user
| Users
Вывод:
<ul class="nav nav-list">
<li class="active">
<a href="/">
<i class="icon-home"/>
Home
</a>
</li>
<li>
<a href="#">
<i class="icon-users"/>
Users
</a>
</li>
</ul>
Кроме того, как и в случае с помощником link_to, вы можете передать параметры HTML в nav_link, который будет применен к тегу a.
Пример передачи заголовка для якоря:
Тонкий:
ul.nav.nav-list
=nav_link root_path, title:"Home" do
i.icon-home
| Home
=nav_link "#", title:"Users" do
i.icon-user
| Users
Вывод:
<ul class="nav nav-list">
<li class="active">
<a href="/" title="Home">
<i class="icon-home"/>
Home
</a>
</li>
<li>
<a href="#" title="Users">
<i class="icon-users"/>
Users
</a>
</li>
</ul>