Навигация, выделение текущей страницы

Ответ 1

Вероятно, это не самый лучший вариант, но вот какой-то простой подход для Symfony2, основанный на имени маршрута:

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

Ответ 2

Я знаю, что это старый поток, но все же вы находите его среди лучших 3 в Google, поэтому немного обновите его.

Вы можете использовать разные апробации для создания навигации с помощью класса выделения с помощью 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. Используйте функцию Bundle/function Я уверен, что есть другие Bundles, но я рекомендовал бы вам это, чтобы создать вашу навигацию: https://github.com/KnpLabs/KnpMenuBundle

3. Используйте макрос Июль 2015

Моим новым фаворитом является использование макроса типа

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

Красивая, не так ли?

Ответ 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>

Ответ 4

в Silex, я делаю это вот так:

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

Затем в файле шаблона Twig {{ active }} соответствует текущему маршруту.

Просто и легко!

Ответ 5

Сначала установите переменную в шаблоне, ее лучше редактировать.

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

Ответ 6

Создайте класс css для выделенного элемента меню и для каждого элемента навигации привяжите событие onClick JS, и когда это событие будет запущено, просто добавьте класс в текущий элемент навигации и удалите его из других, и он должен выделить выделенный сайт в навигации.