Настройка KnpMenuBundle
как настроить 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>
заявление?
EDIT: ПРОСТОЙ СПОСОБ
на самом деле есть простой способ сделать это в бандл:
1 скопировать шаблон vendorKnpMenusrcKnpMenuResourcesviewsknp_menu.html.twig
в ваш AcmeAcmeBundleResourcesviewsMenuknp_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'}) }}
5 ответов
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>
Я потратил некоторое время, чтобы разобраться.
существует параметр, который вы можете применить при определении пункта меню под названием "safe_label". Установив значение true, он выводит изображение в navbar вместо html.
$image = "<img src='/path/to/image' />";
$menu->addChild( $image ,
array(
'route' => 'url_route_name',
'extras' => array(
'safe_label' => true
)
)
);
надеюсь, что это поможет
перед использованием макросов необходимо импортировать их из родительского шаблона.
{% 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 %}
чтобы просто добавить классы и другие атрибуты HTML (например, для интеграции menù с Twitter Bootstrap addind его классов и идентификаторов), вы можете использовать методы, предусмотренные для такого рода настройки.
вот некоторые полезные ресурсы:
- вот все подробности из документации KNP Menu Bundle:создание меню: основы-атрибуты меню
- вот некоторые конкретные примеры: (на GitHub) КНП Комплект меню с Bootstrap 3 и шрифтом Awesome 4
KnpMenuBundles предоставляет некоторые документированные методы, такие как setAttributes, selLinkAttirbute или setLabelAttribute (и другие методы тоже), которые полезны для настройки рендеринга menù.