Pimcore 与树枝;根据菜单深度渲染 html

Question

我将 Pimcore 5.4.4 与 twig 结合使用，并且正在尝试自定义我的输出。目前我有这个：

$this->setViewAutoRender($event->getRequest(), true, 'php');
$this->view->navigation=$navStartNode;

我用这个渲染：

{{ pimcore_render_nav(mainNavigation) }}

这完成了它的工作，但是它非常不可定制。 我想为具有子项的菜单项呈现一个向下箭头图标。这可以通过任何方式实现吗？

为了澄清，我希望我的标记看起来像这样：

<ul>
  <li> m1 </li>
  <li class='hasChildren'><i 'arrow-down'> m2 </i></li>
     <ul>...

然后应该在有子项的项目旁边显示一个箭头图标。

这里的任何帮助将不胜感激。

你好，derelektrischemoench

Answer 1

这是一个完整的自定义导航栏，适用于我的 Bootstrap 4.3.1 和 mdbootstrap 4.8.9，使用 Pimcore 6.2.0 测试：

<header>
    {% set mainNavStartNode = document.getProperty('mainNavStartNode') %}
    {% if mainNavStartNode is empty %}
        {% set mainNavStartNode = pimcore_document(1) %}
    {% endif %}

    {% set mainNav = pimcore_build_nav(document, mainNavStartNode) %}
    {% set renderer = pimcore_nav_renderer('menu') %}
    <nav class="navbar navbar-expand-lg navbar-dark indigo mb-4">

        <!-- Additional container -->
        <div class="container">

            <!-- Navbar brand -->
            <a class="navbar-brand" href="{{ mainNavStartNode }}">
                <img src="{{ asset('static/img/lovia-navbar-white.png') }}" alt="Lovia"
                    style="height: 1.3rem; margin-bottom: 0.4rem;">
                {# <strong>Lovia</strong> #}
            </a>

            <!-- Collapse button -->
            <button class="navbar-toggler" type="button"
                data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="{{ "Toggle navigation"|trans }}">
                <span class="navbar-toggler-icon"></span></button>

            <!-- Collapsible content -->
            <div class="navbar-collapse collapse" id="navbarSupportedContent">

            <!-- Links -->
            <ul class="navbar-nav mr-auto">
            {% for page in mainNav %}
                {% if page.isVisible() and renderer.accept(page) %}
                    {% if page.hasPages %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ page.label|trans }}</a>
                        <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                            {% for child in page.pages %}
                            <a class="dropdown-item" href="{{ child.href }}">{{ child.label|trans }}</a>
                            {% endfor %}
                        </div>
                    </li>
                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ page.href }}">{{ page.label|trans }}</a>
                    </li>
                    {% endif %}
                {% endif %}
            {% endfor %}
            </ul>
            <ul class="navbar-nav ml-auto">
                {{ include('Includes/login.html.twig') }}
                {{ include('Includes/language.html.twig') }}
            </ul>

        </div>
    </nav>
</header>

改编自https://pimcore.com/docs/master/Development_Documentation/Documents/Navigation.html#page_Using-Partials-Generating-a-Customized-Navigation

Answer 2

不能覆盖部分吗？

查看文档： https://pimcore.com/docs/master/Development_Documentation/Documents/Navigation.html#page_Individual-Partial-Navigation-View-Script