自定义 KnpMenuBundle答案

【问题标题】：Customize the KnpMenuBundle自定义 KnpMenuBundle
【发布时间】：2012-06-28 22:18:39
【问题描述】：

如何自定义 KNPMenuBundle？

我不知道如何使用 KnpMenuBundle 添加图像或跨度标签。

我只是想要这个：

<ul>
    <li>
         <img src="{{asset('bundles/mybundle/images/my_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 标签，只需在<a></a> 之间添加一个span 标签：

{% 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'}) }}

【问题讨论】：

为什么不定义<li>或<span>元素的属性并在css中添加图片？
上面列出的“简单方法”很棒。谢谢。
我想把“knp_menu.html.twig”放到“app/Resouces/views”目录下。这行不通。可能是什么错误？
正如@DARSC0D3 在他的answer 中所说，您需要导入父模板才能使属性生效。
除了复制上述模板外，还必须修改config.yml，使knp_menu:块中的template:行读取YourBundle:Menu:knp_menu.html.twig。

标签： symfony knpmenubundle

【解决方案1】：

为什么不定义<li>或<span>元素的属性并在css中添加图片？

【讨论】：

【解决方案2】：

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>

【讨论】：

感谢 MDrolette，这个答案对我帮助很大！你的指导真的很有帮助！除了在这种情况下我只扩展了模板 knp_menu.html.twig 之外，我做了一些与您推荐的非常相似的事情。如果您有兴趣，我已经编辑了我的问题。再次，很棒的回复。干杯:-)
是否有完整的示例来说明如何使用自定义渲染器？ symfony.com/doc/master/bundles/KnpMenuBundle/…我已经关注了这个但仍然没有帮助。

【解决方案3】：

我花了一段时间才弄清楚。

在定义名为“safe_label”的菜单项时，您可以应用一个参数。通过将此设置为 true，它会在导航栏中而不是 html 中输出图像。

    $image = "<img src='/path/to/image' />";
    $menu->addChild( $image , 
      array(
        'route' => 'url_route_name',
        'extras' => array(
          'safe_label' => true
        )
      )
    );

希望有帮助

【讨论】：

正确，但在渲染包时也应该使用原始格式，例如：{{ knp_menu_render('main',{'template':'AcmeBundle:Menu:knp_menu.html.twig',{ 'allow_safe_labels': true})|raw }}
对@repincln 的救命建议的小修改：symfony 2.8 的正确语法是{{ knp_menu_render('main', {'template': 'AcmeBundle:Menu:knp_menu.html.twig', 'allow_safe_labels': true})|raw }}

【解决方案4】：

您需要先从父模板导入宏，然后才能使用它们。

{% 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 %}

【讨论】：

【解决方案5】：

要简单地添加类和其他 HTML 属性（例如，将菜单与 Twitter Bootstrap 集成并添加其类和 ID），您可以使用为此类自定义提供的方法。 p>

这里有一些有用的资源：

以下是 KNP Menu Bundle 文档中的所有详细信息：Creating Menus: The Basics - Menu attributes
以下是一些具体示例：(On GitHub) KNP Menu Bundle with Bootstrap 3 and Font Awesome 4

KnpMenuBundles 提供了一些文档化的方法，例如 setAttributes、selLinkAttirbute 或 setLabelAttribute（以及其他方法），这些方法对于自定义菜单呈现很有用。

【讨论】：