自定义 KnpMenuBundle [英] Customize the KnpMenuBundle

问题描述

如何自定义 KNPMenuBundle?

我不知道如何使用 KnpMenuBundle 添加图像或 span 标签.

我只是想要这个:

<li><img src="{{asset('bundles/mybundle/images/my_image.png')}}/"><span>我的标题</span>

在 MenuBuilder 中，这将从以下内容开始:

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

如何在

语句中添加图像?

<小时>

简单的方法

实际上有一个简单的方法可以在包中做到这一点:

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 标签，只需在 <;/a>:

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

3 您现在可以在使用菜单时选择自定义布局:

{{ 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标签的服务定义:

服务:mopa_bootstrap.navbar_renderer:类:Mopa\Bundle\BootstrapBundle\Navbar\Renderer\NavbarRenderer参数:[ @service_container, [] ]标签:# 别名是用来检索菜单的- { 名称:knp_menu.renderer，别名: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') -%}{%- 设置 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) }}</表单>{％ 万一 ％}{{ navbar.hasMenu('rightmenu') ?knp_menu_render(navbar.getMenu('rightmenu'), {'currentClass': 'active', 'ancestorClass': 'active', 'allow_safe_labels': 'true'}) : '' }}

How to customize KNPMenuBundle?

I can't figure out how to add an image or a span tag using the KnpMenuBundle.

I simply want this:

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

In the MenuBuilder, this would start with:

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

How could I add the image in the <li> statement?

---

EDIT: THE EASY WAY

There is actually an easy way to do this within the bundle:

1 Copy the template vendor\KnpMenu\src\Knp\Menu\Resources\views\knp_menu.html.twig into your Acme\AcmeBundle\Resources\views\Menu\knp_menu.html.twig and extend it as follow:

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

2 Modify the template according to your needs. For example, if you decide to add a span tag each time you use $menu->addChild('Your Title');, simply add the span tag between <a></a>:

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

3 You can now choose your custom layout when using the menu:

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

解决方案

CSS works for this case, but sometimes you might need to add or change the markup more significantly. For that you can use a custom renderer as defined here: https://github.com/KnpLabs/KnpMenuBundle/blob/master/Resources/doc/custom_renderer.md

An example of a bundle that does this is the MopaBoostrapBundle I've highlighted the important parts here.

The service definition where the knp_menu.renderer tag is added:

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 }

and the twig template can be written like so, for example.

<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>

这篇关于自定义 KnpMenuBundle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！