自定义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