Question

我目前正在寻找在页面处于活动状态时添加CSS类。凤凰目前最好的办法是什么？这个案子有帮助吗？

def active(option, conn) do
  if option == conn.request_path do
    " class=\"active\""
  else
    ""
  end
end

在模板中：

<%= "contact" |> active(@conn) |> raw %>

Answer 1

我们将使用conn.path_info将当前路径作为字符串列表而不是conn.request_path返回。我们可以使用它来获取我们的active_class帮助器。

def active_class(conn, path) do
  current_path = Path.join(["/" | conn.path_info])
  if path == current_path do
    "active"
  else
    nil
  end
end

然后我们使用它：

<%= link "Users", to: user_path(@conn, :index), class: active_class(@conn, user_path(@conn, :index))%>

请注意，我们user_path/2两次以上。我们可以用另一个帮助者来解决这个问题：

def active_link(conn, path, opts) do
  class = [opts[:class], active_class(conn, path)]
          |> Enum.filter(& &1) 
          |> Enum.join(" ")
  opts = opts
         |> Keyword.put(:class, class)
         |> Keyword.put(:to, path)
  link text, opts
end

为什么使用conn.path_info代替conn.request_path？这是因为conn.request_path将返回用户请求的确切路径。如果用户访问路径/foo/，则conn.request_path将返回/foo/。问题是我们将要比较的路由器帮助器将始终返回路径/foo，而不会跟踪/。

希望有所帮助！如果有什么不清楚，请告诉我。

Answer 2

我为此创建了一个帮助器，如下所示：

defmodule LinkHelper
  @doc """
  Calls `active_link/3` with a class of "active"
  """
  def active_link(conn, controllers) do
    active_link(conn, controllers, "active")
  end

  @doc """
  Returns the string in the 3rd argument if the expected controller
  matches the Phoenix controller that is extracted from conn. If no 3rd
  argument is passed in then it defaults to "active".

  The 2nd argument can also be an array of controllers that should
  return the active class.
  """
  def active_link(conn, controllers, class) when is_list(controllers) do
    if Enum.member?(controllers, Phoenix.Controller.controller_module(conn)) do
      class
    else
      ""
    end
  end

  def active_link(conn, controller, class) do
    active_link(conn, [controller], class)
  end
end

然后我在def view

内的web/web.ex函数中导入它

def view do
  ...
  import LinkHelper
  ...
end

用法：

<li class="<%= active_link(@conn, PageController)%>"><a href="<%= page_path(@conn, :index) %>">Home</a></li>
<li class="<%= active_link(@conn, [FooController, BarController])%>"><a href="<%= foo_path(@conn, :index) %>">Foo or Bar</a></li>

Answer 3

以下代码正在与我一起使用，包括参数跟踪：

辅助功能如下：

def active_class(path, conn) do
  query_string = cond do
    conn.query_string == "" -> ""
    true -> "?#{conn.query_string}"
  end
  if ("#{conn.request_path}#{query_string}" === path) do "active" else "" end
end

并在视图中：

<% important_issues_path = issue_path(@conn, :index, important: true) %>

<%= link "important", to: important_issues_path,
    class: "nav-link #{
      MyApp.TheHelper.active_class(important_issues_path, @conn)
   }"
%>

如果当前页面在Phoenix中，则在元素上应用CSS类

3 个答案: