ruby-on-rails - 如何使用active_link_to？

Question

我刚接触 Rails，刚刚完成了一个月的 Rails 类(class)。当我在当前链接上时，我用谷歌搜索了如何使我的导航链接具有不同的颜色，例如当我在主页中时，导航主页链接应该具有背景颜色等。但是我发现了这个 active_link_to ，我还不知道如何阅读文档。我应该如何使用它？

这是 active_link_to 文档的链接:https://github.com/comfy/active_link_to

这是我认为应该放置 active_link_to 的代码:

<nav class="navbar navbar-static-top navbar-default" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "Pinteresting", root_path, class: "navbar-brand" %>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <%= link_to root_path do %>
            <span class="glyphicon glyphicon-home"></span> Home
          <% end %>
        </li>
        <li>
          <%= link_to about_path do %>
            <span class="glyphicon glyphicon-user"></span> About
          <% end %>
        </li>
        <% if user_signed_in? %>
          <li>
            <%= link_to new_pin_path do %>
              <button type="button" class="btn btn-primary btn-xs">
                <span class="glyphicon glyphicon-pushpin"></span> New Pin
              </button>
            <% end %>
          </li>
          <li>
            <%= link_to edit_user_registration_path do %>
              <span class="glyphicon glyphicon-cog"></span> Account Settings
            <% end %>
          </li>
          <li>
            <%= link_to destroy_user_session_path, method: :delete do %>
            <span class="glyphicon glyphicon-off"></span> Log out
            <% end %>
          </li>
        <% else %>
          <li>
            <%= link_to new_user_session_path do %>
              <span class="glyphicon glyphicon-check"></span> Sign in
            <% end %>
          </li>
        <% end %>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav> 

Answer 1

这是一个简单的例子，展示了如何添加 active_link_to到一个项目:

将其添加到您的 Gemfile 中:

gem "active_link_to"

通过 Bundler 安装 gem:

bundle install

然后，要在您的项目中使用，只需替换您的 link_to helper active_link_to - 您不必修改任何其他内容，因为 active_link_to 充当了 link_to 的包装器。

完成后，您可以为 .active 添加样式。添加到任何事件链接的类。

样式表中的某处:

a.active {
  background-color: #6699ff;
  /* other styling here, as desired */
}

希望这可以帮助!