导航，突出显示当前页面

Posted 2023-02-22

【中文标题】导航，突出显示当前页面

【英文标题】：Navigation, highlight current page

【发布时间】：2012-03-18 18:24:49

【问题描述】：

我有一个父布局并从该子站点派生。

父布局有一个导航，每个导航点代表一个子站点。

如何在父布局中突出显示当前查看的子站点？ if 应该是什么样子？

【问题讨论】：

How to get current route in Symfony 2?的可能重复

【参考方案1】：

我知道这是一个旧线程，但您仍然可以在 Google 上找到它在前 3 名中，所以这里对其进行一些更新。

您可以采取不同的方法来使用 Symfony 创建带有“突出显示类”的导航。

1.检查路线 正如@Sebastian J 建议的那样，您可以使用 if else 检查路线。

<li% if app.request.get('_route') == 'foo_products_overview' % class="active"% endif %>

问题：没有官方支持，正如@netmikey 指出的那样：How to get current route in Symfony 2?

1.1.检查路由数组 我实际上在我的项目中使用它，只需进行一次调整。我使用了一个 in 数组函数，以便能够提供多个路由。

<li% if app.request.attributes.get('_route') in [
    'foo_products_overview',
    'foo_products_detail',
    'foo_products_bar'
] % class="active"% endif %>

1.2.检查以 ... 开头的路线 第三种方法是@bernland 所建议的。假设我们想要匹配以foo_products 开头的所有路由，并且我们想通过魔法来应用它。

<li% if app.request.attributes.get( '_route' ) starts with 'foo_products' % class="active"% endif %>

正如我所说，我使用它并且还没有遇到问题。

2。使用捆绑/功能 我确定那里还有其他捆绑包，但我建议您使用这个来创建您的导航：https://github.com/KnpLabs/KnpMenuBundle

3.使用宏 2015 年 7 月编辑 我最喜欢的新方法是使用类似

的宏

% macro menuItem(name, url, subitems) %
    % spaceless %
        % set subitems = subitems|default() %
        % set currentUrl = path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) %
        % set isActive = currentUrl == url %

        % for name, suburl in subitems %
            % set isActive = not isActive and currentUrl == suburl %
        % endfor %

        <li% if isActive % class="is-active"% endif %>
            <a href=" url "% if subitems|length > 0 % class="has-sub-menu"% endif %> name|trans() </a>
            % if subitems|length > 0 %
                <ul class="main-sub-menu">
                    % for name, url in subitems %
                         _self.menuItem(name, url) 
                    % endfor %
                </ul>
            % endif %
        </li>
    % endspaceless %
% endmacro %

只需将此代码添加到您的 twig 文件中的某处（而不是在 % block % 中！） 然后，您可以像这样为单个项目调用它：

 _self.menuItem('FooBar', path('foo_foobar')) 

或对于带有子项目的项目：

 _self.menuItem('FooBar', path('foo_foobar'), 
    'Foo': path('foo_baz', slug: 'foo'),
    "Bar": path('foo_baz', slug: 'bar'),
) 

很漂亮，不是吗？

【参考方案2】：

可能不是最好的选择，但这里有一些基于路由名称的 Symfony2 简单方法：

<ul class="nav">
  <li% if app.request.get('_route') == '_adminIndex' % class="active"% endif %>
    <a href=" path('_adminIndex') ">Admin Home</a>
  </li>
</ul>

【讨论】：

依赖request.get('_route') 不受官方支持，并且并不总是给您预期的结果。请参阅另一个问题：***.com/questions/7096546/…

【参考方案3】：

这是我使用的（用于 Symfony 5）：

<li class="nav-item% if (app.request.pathInfo == path('frontend_index')) % active% endif %">

【参考方案4】：

首先在 Template 中设置一个变量，使其更好的 redable。

% set page = app.request.get('_route') %
<li class="nav-item">
            <a class="nav-link % if page == 'welcome' %active% endif %" href=" path('welcome') ">Home <span class="sr-only">(current)</span></a>
        </li>

【参考方案5】：

这就是我所做的：

<a href=' path( 'products' ) '% if app.request.attributes.get( '_route' ) starts with 'products' % class='active'% endif %>Products</a>
<ul>
    <li><a href=' path( 'products_product1' ) '% if app.request.attributes.get( '_route' ) == 'products_product1' % class='active'% endif %>Product 1</a></li>
    <li><a href=' path( 'products_product2' ) '% if app.request.attributes.get( '_route' ) == 'products_product2' % class='active'% endif %>Product 2</a></li>
</ul>

【参考方案6】：

在Silex中，我是这样做的：

$app->before(function ($request) use ($app) 
    $app['twig']->addGlobal('active', $request->get("_route"));
);

然后在我的 Twig 模板文件中， active 等于当前路线。

简单易行！

【参考方案7】：

为突出显示的菜单项创建一个 css 类，并为每个导航项绑定一个 onClick JS 事件，当该事件被触发时，只需将该类添加到当前导航项并将其从其他导航项中删除，它应该突出显示所选站点在导航中。

【讨论】：

该尝试的问题在于它加载了一个新页面。这不是 ajax，你知道吗？

如果你可以使用php或JS来确定url（假设页面有不同的url）那么你可以通过url值将需要的高亮类添加到相应的导航项中。

是的，这就是我想做的。该项目建立在一个名为 symfony 的框架上，我想知道 symfony 的做法是什么；）

仅在真正需要时才使用该框架，并且在您可以使用常规 PHP 或 JS 的其他情况下，它会让您的生活更轻松。但我想你总是可以查看框架的文档，看看你是如何获得你正在使用的 url 或当前文件的。

我不能不支持您关于“仅在真正需要时”如何使用此框架的建议。相反，尽可能多地使用您选择的框架！