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

Question

У меня есть родительский макет, полученный из дочерних сайтов.

Родительский макет имеет навигацию, каждая точка навигации представляет один дочерний сайт.

Как выделить в родительском макете просматриваемый в данный момент дочерний сайт? Как будет выглядеть, если?

Answer 1

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

Вы можете по-разному подходить к созданию навигации с помощью «класса выделения»с Symfony.

1.Проверьте маршрут
Как подсказывает @ Себастьян 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.Используйте макрос edit июль 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 %}

, просто добавьте этот код где-нибудь в файле ветки (не в {% 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

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

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

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

Просто и достаточно просто!

Answer 5

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