创建 TYPO3 VHS Bootstrap-导航栏

Question

我对 TYPO3 VHS 有疑问。我想在我用构建器扩展创建的自己的扩展中声明一个导航栏。它运行完美，当我查看页面的源代码时，一切都像我自己的 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 and PHPStorm Code

Answer 1

我不确定我是否正确理解了您的问题。在子页面的情况下，你想要一个类似切换按钮的东西而不是 link 对吗？要向右切换子菜单的可见性？

这样想想办法：

<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 2

您的问题是 bootstrap 中内置的触摸屏处理。
在纯桌面版本中，您可以在鼠标悬停时弹出菜单，但在触摸屏上，您没有鼠标悬停。因此，没有鼠标且希望菜单飞出的触摸屏用户必须在菜单条目上 'click'。此事件处理由 bootstrap javascript 添加到您的菜单中。
这将导致一个问题：您页面的正常 Link 被阻止。

可能的解决方案：

弹出窗口带有特殊图标。
缺点：
- 确保链接（事件处理程序）没有相互堆叠
- 图标的触摸区域可能很小，用户可能会错过
避免包含子页面的页面上的内容。
这样，完整的菜单条目可用于处理弹出窗口。
缺点：
- 您有空白页面，因为这些页面可以通过其他方式调用（例如面包屑菜单、直接调用 url 中的 ID）。通过为每个带有子页面的页面使用快捷方式页面来避免这种情况。如果您想要此类页面上的内容，请使用此内容创建一个特殊的第一个子页面。

Answer 3

一个可能的解决方案是替换

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

创建 TYPO3 VHS Bootstrap-导航栏

Create TYPO3 VHS Bootstrap-Navbar

typo3

fluid

view-helpers

typo3-8.x