自定义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中添加图像?

Interesting Posts