45

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');追加するだけ<a></a>です。

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

5 に答える 5

16

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>
于 2012-06-27T16:17:33.483 に答える
6

私はこれを理解するのにしばらく時間を費やしました。

'safe_label'というメニュー項目を定義するときに適用できるパラメータがあります。これをtrueに設定すると、htmlではなくナビゲーションバーに画像が出力されます。

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

お役に立てば幸い

于 2012-12-23T01:54:39.047 に答える
3

マクロを使用する前に、親テンプレートからマクロをインポートする必要があります。

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


于 2014-02-19T17:19:01.380 に答える
2

クラスやその他のHTML属性を追加するだけで（たとえば、メニューをTwitter Bootstrapに統合して、そのクラスとIDを追加する）、その種のカスタマイズ用に提供されているメソッドを使用できます。

ここにいくつかの有用なリソースがあります：

KnpMenuBundlesは、メニューレンダリングをカスタマイズするのに役立つsetAttributes、selLinkAttirbute、setLabelAttribute（およびその他のメソッド）などのドキュメント化されたメソッドを提供します。

于 2015-02-18T17:50:28.840 に答える
1

<li>または要素の属性を定義し<span>、cssに画像を追加してみませんか？

于 2012-06-27T14:21:34.237 に答える