Question

我正在尝试使用PHP数组创建嵌套的导航菜单，并使用Twig将其输出。我正在使用Yii2作为PHP框架。我的目标是实现两件事：

自动将.active添加到嵌套/子项中（它们应该能够超过2个级别）。
自动在item.url上获取父子弹，因此您无需在数组中的每个子子上都输入它。

这是PHP数组：

return [
    [
        'label' => 'Home',
        'url' => '/',
    ],
    [
        'label' => 'About',
        'url' => 'about',
        'children' => [
            [
                'label' => 'Secondary 1',
                'url' => 'secondary-1',
            ],
            [
                'label' => 'Secondary 2',
                'url' => 'secondary-2',
            ],
        ],
    ],
    [
        'label' => 'Foo',
        'url' => 'foo',
        'children' => [
            [
                'label' => 'Bar',
                'url' => 'bar',
            ],
        ],
    ],
];

这是到目前为止的Twig模板代码：

{% macro nav(navigation) %}
    {% import _self as macros %}

    {% for item in navigation %}
        {% set active = app.request.getPathInfo starts with item.url or item.url == '/' and app.request.getPathInfo is empty %}

        <li>
            <a href="{{ baseUrl }}/{{ item.url|trim('/',side='left') }}" {{ active ? 'class="active"' : '' }}>{{ item.label }}</a>
            {% if item.children is iterable %}
                <ul>
                    {{ macros.nav(item.children) }}
                </ul>
            {% endif %}
        </li>

    {% endfor %}
{% endmacro %}

{% import _self as macros %}

<nav id="navigation" class="navigation" role="navigation">
    <div class="container">

        <ul>
            {{ macros.nav(navigation) }}
        </ul>

    </div>
</nav>

Answer 1

为了获取完整的URL，需要将当前URL向下传递到递归中。

render(){
    return <div>
//..
    <button customAttribute="My Custom Event Message" onClick={this.alertMessage.bind(this) } >Click Me</button>
            </div>
        }
//...

树枝导航宏

1 个答案: