导航，突出显示当前页面

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 指出的那样：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'}),
}) }}

很漂亮，不是吗？

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

首先在 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>

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

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