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

我不确定我是否正确理解了您的问题。如果是子页面，您想使用切换按钮而不是链接来代替吗？要向右切换子菜单的可见性？

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

<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

您的问题是引导程序中内置的触摸屏处理。
在纯台式机版本中，可以将鼠标悬停在菜单上，而在触摸屏上则没有鼠标悬停。因此，没有鼠标并且希望菜单弹出的触摸屏用户必须“单击”菜单项。此事件处理是通过引导javascript添加到菜单中的。
这将导致问题：正常的页面链接被阻止。

可能的解决方案：

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

Answer 3

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

([^a-zçğşöü])üst(?![a-zçğşöü])

具有：

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

创建TYPO3 VHS Bootstrap-Navbar

3 个答案: