ruby-on-rails 如何以DRY方式将“active”类应用到基于current_page的导航中?- 导轨3

wko9yo5t  于 2023-05-19  发布在  Ruby
关注(0)|答案(5)|浏览(137)

所以在我的application.html.erb中,我的导航结构看起来像这样:

<div id="navigation">
            <ul class="pills">
                    <% if current_page?(:controller => 'welcome', :action => 'index') %>
                        <li><%= link_to "Profile", vanity_path(:vname => current_user.username) %></li>
                        <li><%= link_to "Settings", settings_path %></li>
                        <li><%= link_to "Sign Out", signout_path %></li>
                    <% elsif !current_page?(:controller => 'welcome', :action => 'index') %>
                        <li><%= link_to "Home", root_path %></li>
                        <li><%= link_to "Profile", vanity_path(:vname => current_user.username) %></li>
                        <li><%= link_to "Settings", settings_path %></li>
                        <li><%= link_to "Sign Out", signout_path %></li>              
                    <% end %>
            </ul>
        </div>

然而,我想做的是,一旦它们出现在导航中的任何页面上,它会将类active应用到相应的链接。
例如,如果用户在mydomain.com/johnbrown上,也就是Profile链接上,rails helper看起来像这样:
link_to "Profile", vanity_path(:vname => current_user.username), :class => "active"
但是我如何以编程的方式做到这一点,这样我就不会复制内容了?也就是说,我如何为我的导航中的所有页面获得该功能,并尽可能地将其写得干燥?
谢谢

xmq68pz9

xmq68pz91#

这真是个好问题。我从来没有对我看到或想出的解决方案感到满意。也许我们可以在这里一起做一个。
这是我过去尝试过的
我做了一个帮助程序,它返回一个散列,因为我使用HAML,所以定义了:class

def active_tab(path)
  request.path.match(/^#{path}/) ? { :class => 'active' } : {}
end

不含用途:

= link_to "Dashboard", dashboard_path, active_tab("#{dashboard_path}$")

或者类似的替代方案

def active_class(path)
  request.path =~ /#{path}/ ? 'active' : nil
end

不含用途:

= link_to 'Presentations', admin_presentations_path, :class => "#{active_class('presentations')}"

我很想看到关于这一点的其他建议。

nbnkbykc

nbnkbykc2#

我在一个与引导相关的导航栏中找到了这个答案,但是你可以很容易地将它与你的导航一起使用。
Answer taken from here
您可以使用helper来处理“current_page?”,示例一个方法:

module ApplicationHelper

 def is_active?(link_path)
  if current_page?(link_path)
    "active"
  else
    ""
  end
 end

end

Bootstrap 导航条示例

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

所以,看起来

<li class="<%= is_active?(some_path) %>">
<%= link_to "name path", some_path %>
</li>

为了哈姆勒

简单的看起来像:

%ul.nav
  %li{class: current_page?(some_path) && 'active'}
    = link_to "About Us", some_path
drnojrws

drnojrws3#

您可以在application_helper.rb中定义一个helper方法

def create_link(text, path)
  class_name = current_page?(path) ? 'my_class' : ''

  content_tag(:li, class: class_name) do
    link_to text, path
  end
end

现在你可以像这样使用:
create_link 'xyz', any_path,将呈现为

<li class="my_class">
  <a href="/any">xyz</a>
</li>

希望有帮助!

pu82cl6c

pu82cl6c4#

你为什么不把多余的部分从if else块中去掉呢?也可以看看'link_to_unless'

<div id="navigation">
        <ul class="pills">

                    <li><%= link_to_unless(current_page?(:controller => 'welcome', :action => 'index'), "Home", root_path %></li>

                   <li><%= link_to "Profile", vanity_path(:vname => current_user.username) %></li>
                    <li><%= link_to "Settings", settings_path %></li>
                    <li><%= link_to "Sign Out", signout_path %></li> 
        </ul>
    </div>

然后我会添加一些jQuery来将活动类注入到与window.location模式匹配的链接中。

bf1o4zei

bf1o4zei5#

我想要一个更像link_to方法的解决方案,而不是传递一组额外的参数。你可以通过在application_helper.rb中创建一个方法(或创建一个LinkHelper)来实现这一点,它接受与link_to相同的两个参数:

def tab_to(title, path)
  link_to title, path, class: active_current_page(path)
end

然后创建一个私有方法来返回'active'类:

def active_current_page(path)
  "active" if current_page?(path)
end

完整文件为link_helper.rb

module LinkHelper
  def tab_to(title, path)
    link_to title, path, class: active_current_page(path)
  end

  private

  def active_current_page(path)
    "active" if current_page?(path)
  end
end

然后可以这样调用:

tab_to "Profile", vanity_path(:vname => current_user.username)

相关问题