Question

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

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

如何在父布局中突出显示当前查看的子网站？如果看起来怎么样？

Answer 1

我知道这是一个老话题，但你仍然在谷歌的前三名中找到它，所以这里有一点点更新。

使用＆＃34;突出显示类＆＃34;创建导航时，您可以采取不同的方法。与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

这就是我的所作所为：

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

在 Silex 中，我这样做：

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

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

简单易行！

Answer 5

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

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

Answer 6

首先在Template中设置一个变量，使其更好地可重用。

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

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

导航，突出显示当前页面

7 个答案: