创建TYPO3 VHS Bootstrap-Navbar

Question

我有TYPO3 VHS的问题。我想在我自己的扩展中声明一个导航栏，这是我用builder-extension创建的。它工作得很完美，当我查看我的页面的源代码时，一切都像我自己的HTML代码。但是，当我点击我的子页面的母页时，没有任何反应。像：My Navbar。我想我有错误的TYPO3设置，因为母页也有一个href。在我的示例HTML代码开头我创建的所有页面都有href =“＃”。

My HTML Code for The Navbar:

<div class="container-fluid farbflussgrau">
    <div class="row justify-content-md-center">
        <div class="col-lg-8 text-center">
            <nav class="navbar navbar-expand-md navbar-dark bg-dark">
                <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse"
                       data-target="#navbarTogglerEU" aria-controls="navbarTogglerEU" aria-expanded="false"
                       aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-center" id="navbarTogglerEU">
                    <v:page.menu>
                        <ul class="navbar-nav">
                            <f:for each="{menu}" as="item">
                                <li class="nav-item px-2 {f:if(condition: item.hasSubPages, then: 'dropdown')}">
                                    <f:link.page
                                           pageUid="{item.uid }"
                                           title="{item.title}"
                                           class="nav-link{f:if(condition: item.hasSubPages, then: ' dropdown-toggle')}"
                                           additionalAttributes="{f:if(condition: item.hasSubPages, then:
                                                '{data-toggle:\'dropdown\',aria-haspopup:\'true\',aria-expanded:\'false\',href:\'\'}')}">
                                        {item.title}
                                    </f:link.page>
                                    <f:if condition="{item.hasSubPages}">
                                        <v:menu pageUid="{item.uid}">
                                            <div class="dropdown-menu">
                                                <f:for each="{menu}" as="subItem">
                                                    <f:link.page pageUid="{subItem.uid}"
                                                                title="{subItem.title}"
                                                                class="dropdown-item">
                                                        {subItem.title}
                                                    </f:link.page>
                                                </f:for>
                                            </div>
                                        </v:menu>
                                    </f:if>
                                </li>
                            </f:for>
                        </ul>
                    </v:page.menu>
                </div>
            </nav>
        </div>
    </div>
</div>

This is how the sourcecode from my Page looks: https://pastebin.com/NgG0T0m9?fbclid=IwAR2f6TMuI6Q4tOPHPHw8FFv2Zs827vt9HN2_UI4V1KhHbfLYMQ1DD6zmBjM

这两张图片展示了PHPStorm和Pagetree的外观：Pagetree和PHPStorm Code

Answer 1

可能的解决方案是更换

<f:link.page
pageUid="{item.uid }"
title="{item.title}"
class="nav-link{f:if(condition: item.hasSubPages, then: ' dropdown-toggle')}"
additionalAttributes="{f:if(condition: item.hasSubPages, then:'{data-toggle: \'dropdown\', aria-haspopup:\'true\', aria-expanded:\'false\',href:\'\'}')}">
{item.title}
</f:link.page>

有：

<a
class="nav-link{f:if(condition: item.hasSubPages, then: ' dropdown-toggle')}"
href="{f:if(condition: item.hasSubPages, then:'#', else: '{item.link}')}"
{f:if(condition: item.hasSubPages, then:' data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"', else: '')}
pageUid="{item.uid}"
title="{item.title}">
{item.title}
</a>

Answer 2

我不确定我是否正确理解你的问题。如果是子页面，您希望有一个类似切换按钮而不是链接的东西吗？要切换子菜单的可见性吗？

以这种方式考虑解决方案：

<v:page.menu>
<ul class="navbar-nav">
    <f:for each="{menu}" as="item">
        <li class="nav-item px-2 {f:if(condition: item.hasSubPages, then: 'dropdown')}">
            <f:if condition="{item.hasSubPages}">
                <f:then>
                    <button class="togglesubmenu">{item.title}</button>
                    <v:menu pageUid="{item.uid}">
                        <div class="dropdown-menu">
                            <f:for each="{menu}" as="subItem">
                                <f:link.page pageUid="{subItem.uid}"
                                             title="{subItem.title}"
                                             class="dropdown-item">
                                    {subItem.title}
                                </f:link.page>
                            </f:for>
                        </div>
                    </v:menu>
                </f:then>
                <f:else>
                    <f:link.page
                            pageUid="{item.uid}"
                            title="{item.title}"
                            class="nav-link{f:if(condition: item.hasSubPages, then: ' dropdown-toggle')}"
                            additionalAttributes="{f:if(condition: item.hasSubPages, then:
                        '{data-toggle:\'dropdown\',aria-haspopup:\'true\',aria-expanded:\'false\',href:\'\'}')}">
                        {item.title}
                    </f:link.page>
                </f:else>
            </f:if>
        </li>
    </f:for>
</ul>

Answer 3

你的问题是在bootstrap中构建的触摸屏处理。 在纯桌面版本中，您可以在鼠标悬停的情况下执行弹出菜单，但在触摸屏上您没有鼠标悬停。因此，没有鼠标并希望菜单飞出的触摸屏用户必须“点击”菜单条目。此事件处理由bootstrap javascript添加到您的菜单中。 这将导致问题：阻止您网页的正常链接。

可能的解决方案：

• 弹出窗口是用特殊图标完成的。 退税： 确保链接（eventhandler）没有相互堆叠 图标的触摸区域可能非常小，用户可能会错过它
• 避免在包含子页面的页面上显示内容。 以这种方式，完整的菜单条目可用于处理弹出按钮。 退税： 您有空页面，因为可以通过其他方式调用页面（例如，痕迹导航菜单，在URL中使用id直接调用）。通过使用子页面的每个页面的快捷页面来避免这种情况。如果您想在此类页面上创建内容，请使用此内容创建特殊的第一个子页面。