自定义KnpMenuBundle
如何自定义KNPMenuBundle?
我不知道如何使用KnpMenuBundle添加图像或span标签。
我只是想要这个:
<ul> <li> <img src="{{asset('bundles/mybundlehttp://img.dovov.commy_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根据您的需要修改模板 。 例如,如果您决定在每次使用$menu->addChild('Your Title');
时添加一个span标记$menu->addChild('Your Title');
,只需在<a></a>
之间添加span标签:
{% block linkElement %} <a href="{{ item.uri }}"{{ _self.attributes(item.linkAttributes) }}> <span>{{ block('label') }}</span> </a> {% endblock %}
3 现在,您可以在使用菜单时select自定义布局 :
{{ knp_menu_render('main', {'template': 'AcmeBundle:Menu:knp_menu.html.twig'}) }}
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,它将在导航栏中输出图像而不是html。
$image = "<img src='/path/to/image' />"; $menu->addChild( $image , array( 'route' => 'url_route_name', 'extras' => array( 'safe_label' => true ) ) );
希望有所帮助
您需要从父模板导入macros,然后才能使用它们。
{% 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属性 (例如,将这些菜单与Twitter Bootstrap添加其类和ID),可以使用为这种定制提供的方法。
这里有一些有用的资源:
- 以下是KNP Menu Bundle文档中的所有详细信息: 创build菜单:基本信息 – 菜单属性
- 下面是一些具体的例子:( 在GitHub上)KNP菜单包与引导3和字体真棒4
KnpMenuBundles提供了一些文档化的方法,比如setAttributes,selLinkAttirbute或者setLabelAttribute(以及其他方法),这些方法对于自定义menu渲染很有用。
为什么不定义<li>
或<span>
元素的属性并在css中添加图像?