Настройте KnpMenuBundle

Question

Настройте KnpMenuBundle

40

Как настроить KNPMenuBundle?

Я не могу понять, как добавить изображение или тег span с помощью KnpMenuBundle.

Я просто хочу:

<ul>
    <li>
         <img src="{{asset('bundles/mybundle/images/my_image.png')}} /">
         <span>My Title</span>        
     </li>
</ul>

В MenuBuilder это начнется с:

$menu->addChild('My Title');

Как я могу добавить изображение в оператор <li>?

РЕДАКТИРОВАТЬ: ЛЕГКИЙ ПУТЬ

На самом деле есть простой способ сделать это в комплекте:

1 Скопировать шаблон vendor\KnpMenu\src\Knp\Menu\Resources\views\knp_menu.html.twig в Acme\AcmeBundle\Resources\views\Menu\knp_menu.html.twig и продолжите его следующим образом:

{% extends 'knp_menu.html.twig' %}

2 Измените шаблон в соответствии с вашими потребностями. Например, если вы решили добавить тег span каждый раз при использовании $menu->addChild('Your Title');, просто добавьте тег span между <a></a>:

{% block linkElement %}
    <a href="{{ item.uri }}"{{ _self.attributes(item.linkAttributes) }}>
        <span>{{ block('label') }}</span>
    </a>
{% endblock %}

3 Теперь вы можете выбрать свой собственный макет при использовании меню:

{{ knp_menu_render('main', {'template': 'AcmeBundle:Menu:knp_menu.html.twig'}) }}

Mick 27 июнь 2012, в 14:03

Источник

3

Почему бы не определить атрибут элемента <li> или <span> и добавить изображение в css?
j0k 27 июнь 2012, в 13:53
5

«Легкий путь», перечисленный выше, потрясающий. Благодарю.
Kevin 09 фев. 2013, в 16:47
0

Я хотел поместить «knp_menu.html.twig» в каталог «app / Resouces / views». Это не работает В чем может быть ошибка?
Slowwie 18 фев. 2014, в 14:44
0

Как сказал @ DARSC0D3 в своем ответе , вам нужно импортировать родительский шаблон, чтобы атрибуты работали.
PutzKipa 04 май 2014, в 19:49
1

В дополнение к копированию шаблона, как описано выше, необходимо также изменить config.yml так, чтобы template: line в knp_menu: block YourBundle:Menu:knp_menu.html.twig .
geoB 26 июнь 2014, в 23:05
0

Следование вашим инструкциям заканчивается Unable to find template "AppBundle:Menu:knp_menu.html.twig" . Кстати, я одобрил ваш ответ за время, потраченное на предоставление этого урока
Trix 06 март 2017, в 12:20

Показать ещё 4 комментария

Теги:

symfony

knpmenubundle

5 ответов

6

Я потратил некоторое время на то, чтобы понять это.

Существует параметр, который вы можете применить при определении пункта меню под названием "safe_label". Установив для этого значение true, оно выводит изображение на панели навигации вместо html.

    $image = "<img src='/path/to/image' />";
    $menu->addChild( $image , 
      array(
        'route' => 'url_route_name',
        'extras' => array(
          'safe_label' => true
        )
      )
    );

Надеюсь, что поможет

onnyjay 23 дек. 2012, в 02:15

2

Правильно, но вы также должны использовать необработанный формат при визуализации пакета, например: {{knp_menu_render ('main', {'template': 'AcmeBundle: Menu: knp_menu.html.twig', {'allow_safe_labels': true}) | raw}}
repincln 13 нояб. 2013, в 20:04
0

Небольшая поправка к предложению @repincln по спасению жизни: правильный синтаксис Symfony 2.8: {{ knp_menu_render('main', {'template': 'AcmeBundle:Menu:knp_menu.html.twig', 'allow_safe_labels': true})|raw }}
Attila Fulop 11 май 2016, в 19:52

3

Вам нужно импортировать макросы из родительского шаблона, прежде чем вы сможете их использовать.

{% block linkElement %}
    {% import 'knp_menu.html.twig' as knp_menu %}
    <a href="{{ item.uri }}"{{ knp_menu.attributes(item.linkAttributes) }}>
        <span>{{ block('label') }}</span>
    </a>
{% endblock %}

D4R5C0D3 19 фев. 2014, в 18:24

2

Чтобы просто добавить классы и другие атрибуты HTML (например, чтобы интегрировать menù с Twitter Bootstrap, добавьте его классы и идентификаторы), вы можете использовать методы, предусмотренные для этой настройки. p >

Вот некоторые полезные ресурсы:

Вот подробности из документации KNP Menu Bundle: Создание меню: Основы - атрибуты меню
Вот некоторые конкретные примеры: (On GitHub) KNP Меню Bundle с Bootstrap 3 и шрифтом Awesome 4

KnpMenuBundles предоставляет некоторые документальные методы, такие как setAttributes, selLinkAttirbute или setLabelAttribute (и другие методы), которые полезны для настройки рендеринга men.

Aerendir 18 фев. 2015, в 19:36

0

битые ссылки, было бы неплохо еще посмотреть документы.
Dung 01 июнь 2016, в 00:42
1

@ Навоз, я только что проверил их, и они работают! оо
Aerendir 02 июнь 2016, в 08:24

1

Почему бы не определить атрибут элемента <li> или <span> и добавить изображение в css?

j0k 27 июнь 2012, в 15:34

Ещё вопросы

Почему бы не определить атрибут элемента <li> или <span> и добавить изображение в css?
«Легкий путь», перечисленный выше, потрясающий. Благодарю.
Я хотел поместить «knp_menu.html.twig» в каталог «app / Resouces / views». Это не работает В чем может быть ошибка?
Как сказал @ DARSC0D3 в своем ответе , вам нужно импортировать родительский шаблон, чтобы атрибуты работали.
В дополнение к копированию шаблона, как описано выше, необходимо также изменить config.yml так, чтобы template: line в knp_menu: block YourBundle:Menu:knp_menu.html.twig .
Следование вашим инструкциям заканчивается Unable to find template "AppBundle:Menu:knp_menu.html.twig" . Кстати, я одобрил ваш ответ за время, потраченное на предоставление этого урока
Правильно, но вы также должны использовать необработанный формат при визуализации пакета, например: {{knp_menu_render ('main', {'template': 'AcmeBundle: Menu: knp_menu.html.twig', {'allow_safe_labels': true}) | raw}}
Небольшая поправка к предложению @repincln по спасению жизни: правильный синтаксис Symfony 2.8: {{ knp_menu_render('main', {'template': 'AcmeBundle:Menu:knp_menu.html.twig', 'allow_safe_labels': true})|raw }}
битые ссылки, было бы неплохо еще посмотреть документы.
@ Навоз, я только что проверил их, и они работают! оо

MDrollette · Accepted Answer · 2012-06-27T17-22-00.000Z

CSS работает для этого случая, но иногда вам может потребоваться добавить или изменить разметку более существенно. Для этого вы можете использовать собственный визуализатор, как определено здесь: https://github.com/KnpLabs/KnpMenuBundle/blob/master/Resources/doc/custom_renderer.md

Пример пакета, который делает это MopaBoostrapBundle Я выделил важные части здесь.

Объявление службы, в которое добавлен тег knp_menu.renderer:

services:
    mopa_bootstrap.navbar_renderer:
        class: Mopa\Bundle\BootstrapBundle\Navbar\Renderer\NavbarRenderer
        arguments: [ @service_container, [] ]
        tags:
            # The alias is what is used to retrieve the menu
            - { name: knp_menu.renderer, alias: navbar }

и шаблон ветки может быть написан, например, так.

<div class="navbar {{ (navbar.hasOption('fixedTop') and  navbar.getOption('fixedTop')) ? 'navbar-fixed-top' : '' }}">
    <div class="navbar-inner">
        <div class="container{{ (navbar.hasOption('isFluid') and navbar.getOption('isFluid')) ? '-fluid' : '' }}">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            {% if navbar.hasOption('title') %}<a class="brand" href="{{ path(navbar.getOption('titleRoute')) }}">{{ navbar.getOption('title') }}</a>{% endif %}
            <div class="nav-collapse">
                {{ navbar.hasMenu('leftmenu') ? knp_menu_render(navbar.getMenu('leftmenu'), {'currentClass': 'active', 'ancestorClass': 'active', 'allow_safe_labels': 'true'}) : '' }}
                {% if navbar.hasFormView('searchform') %}
                    {%- set form_view = navbar.getFormView('searchform') -%}
                    {%- set form_type = navbar.getFormType('searchform') -%}
                    {%- set form_attrs = form_view.vars.attr -%}
                    {% form_theme form_view _self %}
                    <form class="navbar-search pull-{{ form_attrs.pull|default('left') }}" method="{{ form_attrs.method|default('post') }}" action="{{ path(navbar.getFormRoute('searchform')) }}">
                    {{ form_widget(form_view) }}
                    </form>
                {% endif %}
                {{ navbar.hasMenu('rightmenu') ? knp_menu_render(navbar.getMenu('rightmenu'), {'currentClass': 'active', 'ancestorClass': 'active', 'allow_safe_labels': 'true'}) : '' }}
            </div>

        </div>
    </div>
</div>

Спасибо MDrolette, этот ответ мне очень помог! Ваше руководство было действительно полезным! Я сделал нечто очень похожее на то, что вы рекомендовали, за исключением того, что в этом случае я только расширил шаблон knp_menu.html.twig. Я отредактировал свой вопрос на случай, если вы заинтересованы. Опять офигенный ответ. Ура :-)
Есть ли полный пример того, как иметь работающий пользовательский рендер? symfony.com/doc/master/bundles/KnpMenuBundle/… Я следил за этим, но все равно не помог.