导航，突出显示当前页面

Question

我有一个父布局并源自该子站点。

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

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

Answer 1

我知道这是一个旧线程，但你仍然可以在 Google 上找到它的前 3 名，所以这里有一些更新。

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

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

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

问题：它不受官方支持，正如@netmikey指出的那样：如何在Symfony 2中获取当前路由？

1.1。检查路由数组
我实际上在我的项目中使用了它，只需进行一次调整。我使用数组函数，能够给出多个路线。

<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 %}

只需将此代码添加到您的树枝文件中的某个位置（而不是在

{% 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'}),
}) }}

很漂亮，不是吗？

Answer 2

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

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

Answer 3

这是我使用的（Symfony 5）：

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

Answer 4

首先在模板中设置一个变量，它更好地可编辑。

{% 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>

Answer 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>

Answer 6

在Silex中，我这样做：

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

然后在我的Twig模板文件中，

{{ active }}

等于当前路线。

够简单又容易！

Answer 7

简单易行： PHP 8.1.26、Symfony 6.4.1、Twig 3.0

{% if (app.request.pathInfo == path('route_name')) %}
    <li class="nav-item active header-navbar-li">
{% endif %}

Answer 8

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