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

Posted 2023-02-16

【中文标题】Pimcore 与树枝;根据菜单深度渲染 html

【英文标题】：Pimcore with twig; render html based on menu depth

【发布时间】：2019-03-06 09:52:37

【问题描述】：

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

【参考方案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') " 
                    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

【参考方案2】：

不能覆盖部分吗？

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

【讨论】：

这很混乱：<?= $this->navigation()->menu()->htmlify($page); ?> 那是什么？