为什么我的 DataProcessing\MenuProcessor 不显示我的页面树的 level-3 和 level-4

Question

我使用 Bootstrap_package v10 和 Typo3 9，菜单处理器不显示我的 pagetree 的 3 级和 4 级。

我使用的是 bootstrap 包中的原始模板，代码如下：

10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
    levels = 5
    special = directory
    special.value = 26969
    expandAll = 1
    includeSpacer = 1
    as = mainnavigation
    dataProcessing {
        10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
        10 {
            references.fieldName = nav_icon
            as = icon
            if {
                isTrue.stdWrap.cObject = COA
                isTrue.stdWrap.cObject {
                    10 = TEXT
                    10.value = 1
                    10.if.isTrue = {$page.theme.navigation.icon.enable}
                    20 = TEXT
                    20.value = 1
                    20.if.isTrue = {$page.theme.navigation.dropdown.icon.enable}
                }
            }
        }
    }
}

这是流畅的代码：

<f:section name="MainNavigation">
    <f:if condition="{menu}">
        <ul class="navbar-nav">
            <f:for each="{menu}" as="item">
                <f:if condition="{item.spacer}">
                    <f:then>
                        </ul>
                        <ul class="navbar-nav">
                    </f:then>
                    <f:else>
                        <li class="nav-item{f:if(condition: item.active, then:' active')}{f:if(condition: item.children, then:' dropdown dropdown-hover')}">
                            <a href="{item.link}" id="nav-item-{item.data.uid}" class="nav-link{f:if(condition: item.children, then:' dropdown-toggle')}"{f:if(condition: item.target, then: ' target="{item.target}"')} title="{item.title}"{f:if(condition: item.children, then:' aria-haspopup="true" aria-expanded="false"')}>
                                <f:if condition="{theme.navigation.icon.enable} && {item.icon}">
                                    <span class="nav-link-icon">
                                        <f:if condition="{item.icon.0.extension} === svg">
                                            <f:then>
                                                <bk2k:inlineSvg image="{item.icon.0}" width="{theme.navigation.icon.width}" height="{theme.navigation.icon.height}" />
                                            </f:then>
                                            <f:else>
                                                <f:image image="{item.icon.0}" alt="{item.icon.0.alternative}" title="{item.icon.0.title}" width="{theme.navigation.icon.width}" height="{theme.navigation.icon.height}" />
                                            </f:else>
                                        </f:if>
                                    </span>
                                </f:if>
                                <span class="nav-link-text">{item.title}<f:if condition="{item.current}"> <span class="sr-only">(current)</span></f:if></span>
                            </a>
                            <f:if condition="{item.children}">
                                <ul class="dropdown-menu" aria-labelledby="nav-item-{item.data.uid}">
                                    <f:for each="{item.children}" as="child">
                                        <f:if condition="{child.spacer}">
                                            <f:then>
                                                <li class="dropdown-divider"></li>
                                            </f:then>
                                            <f:else>
                                                <li>
                                                    <a href="{child.link}" class="dropdown-item{f:if(condition: child.active, then:' active')}"{f:if(condition: child.target, then: ' target="{child.target}"')} title="{child.title}">
                                                        <f:if condition="{theme.navigation.dropdown.icon.enable} && {child.icon}">
                                                            <span class="dropdown-icon">
                                                                <f:if condition="{child.icon.0.extension} === svg">
                                                                    <f:then>
                                                                        <bk2k:inlineSvg image="{child.icon.0}" width="{theme.navigation.dropdown.icon.width}" height="{theme.navigation.dropdown.icon.height}" />
                                                                    </f:then>
                                                                    <f:else>
                                                                        <f:image image="{child.icon.0}" alt="{child.icon.0.alternative}" title="{child.icon.0.title}" width="{theme.navigation.dropdown.icon.width}" height="{theme.navigation.dropdown.icon.height}" />
                                                                    </f:else>
                                                                </f:if>
                                                            </span>
                                                        </f:if>
                                                        <span class="dropdown-text">{child.title}<f:if condition="{child.current}"> <span class="sr-only">(current)</span></f:if></span>
                                                    </a>
                                                </li>
                                            </f:else>
                                        </f:if>
                                    </f:for>
                                </ul>
                            </f:if>
                        </li>
                    </f:else>
                </f:if>
            </f:for>
        </ul>
    </f:if>
</f:section>

流体正在调用页面子项，但我不知道它是否是递归的，所以它可以显示所有级别，我在那里缺少什么，看来我是第一个遇到这个问题的人？

在此先感谢您的帮助。

Answer 1

默认情况下，MenuProcessor 不会展开所有级别。它只会显示您所在级别以下的分支。如果你想显示所有分支的所有级别，你必须将 expandAll = 1 添加到你的配置中：

10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
  levels = 5
  expandAll = 1
  ...
}

Answer 2

首先您应该验证数据是否可用于超过前两个级别：
在模板中插入 <f:debug title="mainnavigation">{mainnavigation}</f:debug>。

然后检查您的模板是否已准备好显示多于两个级别。
我可以想象你的模板显示第一级，第二级调用部分，但如果需要，部分不会调用自身。
除非你需要一些特定级别的标记（例如 'class="level1"），否则你可以通过将级别堆叠在彼此内部来构建菜单（给出堆叠的 uls）。因此，您要么使用具有相同标记的堆叠菜单进行递归调用，要么使用单独的标记为每个级别定义一个部分（或者您定义一个包含当前级别的变量并调用部分递归）。

更糟糕的是：两个级别都写在同一个模板文件中，没有使用部分（或部分）。

我会把它改成：
（我保留了一个文件，而不是我调用一个部分的额外部分，它可以在同一个文件中）

<f:section name="MainNavigation">
    <f:if condition="{menu}">
        <ul class="navbar-nav">
            <f:for each="{menu}" as="item">
                <f:render section="subLevel" arguments="{item:item}" />
            </f:for>
        </ul>
    </f:if>
</f:section>

<f:section name="subLevel">
    <f:if condition="{item.spacer}">
         <f:then>
             <li class="dropdown-divider"></li>
         </f:then>
         <f:else>
             <li class="nav-item{f:if(condition: item.active, then:' active')}{f:if(condition: item.children, then:' dropdown dropdown-hover')}">
                 <a href="{item.link}" id="nav-item-{item.data.uid}" class="nav-link{f:if(condition: item.children, then:' dropdown-toggle')}"{f:if(condition: item.target, then: ' target="{item.target}"')} title="{item.title}"{f:if(condition: item.children, then:' aria-haspopup="true" aria-expanded="false"')}>
                 <f:if condition="{theme.navigation.icon.enable} && {item.icon}">
                      <span class="nav-link-icon">
                          <f:if condition="{item.icon.0.extension} === svg">
                              <f:then>
                                  <bk2k:inlineSvg image="{item.icon.0}" width="{theme.navigation.icon.width}" height="{theme.navigation.icon.height}" />
                              </f:then>
                              <f:else>
                                  <f:image image="{item.icon.0}" alt="{item.icon.0.alternative}" title="{item.icon.0.title}" width="{theme.navigation.icon.width}" height="{theme.navigation.icon.height}" />
                              </f:else>
                          </f:if>
                      </span>
                  </f:if>
                  <span class="nav-link-text">{item.title}<f:if condition="{item.current}"> <span class="sr-only">(current)</span></f:if></span>
                 </a>
                 <f:if condition="{item.children}">
                     <ul class="dropdown-menu" aria-labelledby="nav-item-{item.data.uid}"> 
                         <f:for each="{item.children}" as="child">
                             <f:render section="subLevel" arguments="{item:child}" />
                         </for>
                     </ul>
                </f:if>
            </li>
        </f:else>
    </f:if>
</f:section>

注意第一层中间隔符的更改标记！
可能会发生进一步的变化，因为我没有比较代码，而是专注于构建干净的标记。

为递归增加一个'parameter'。

对于递增的值（level1、level2、level3...）您需要 TYPO3 之前版本 9 中的视图助手：
这个 viewhelper 可以在 typoscript 中实现：

lib.math = TEXT
lib.math {
  current = 1
  prioriCalc = 1
}

然后您可以将对 SubLevel 部分的初始调用更改为：

<f:render section="subLevel" arguments="{item:item,level:1}" />

现在您有一个流体变量 level，其值为 1。

必须将递归调用更改为：

<f:render section="subLevel" arguments="{item:child,level:{f:cObject(typoscriptObjectPath:'lib.math', data:'{level}+1')}}" />

增加值 2、3、4 ...

Answer 3

您的流体模板仅显示 2 个级别。默认情况下，在 Bootstrap 包中，您有一个 2 级菜单。如果你想拥有更多，你需要调整模板来渲染更多的关卡。这是您模板中 2 级的渲染：

<f:for each="{item.children}" as="child">
    <f:render section="subLevel" arguments="{item:child}" />
</f:for>

如果要渲染级别 3，则需要转到 subLevel 部分并检查是否有您在 arguments 中设置的每个 item 的子项。示例：

<f:if condition="{item.children}">
    <ul>
        <f:for each="{item.children}" as="level3Item">
             ...
        </f:for>
    </ul>
</f:if>

你应该有一些 CSS 5 个级别的课程。 :)

希望能帮到你

Answer 4

对于 2 级以上的级别，我发现在您的 setup.typoscript 中输入错别字要容易得多。

lib.textmenu {

# We define the first level as text menu.
 1 = TMENU

 # The first level of this menu. 0 is rootline. -1 is 1 level up from rootline. 1 is 1 level down from rootline
entryLevel = 0

# UID's to exclude from the menu.  Change this for each subsite, but will require a new template on each subsite.
excludeUidList = 21

 # Turn spacers on, I use them to do sections of my menu.
 1.SPC = 1
 1.SPC.allWrap = <li class="a nav-item dropdown text-light bg-secondary SPC">|</li>

# Expand the whole menu - ie a sitemap
1.expAll = 1

# We define the normal state ("NO").
1.NO = 1
1.NO.wrap = <li class="nav-item NO">|</li>
1.NO.linkWrap = <li class="nav-item NO">|</li>
1.NO.ATagParams = class="nav-item dropdown NO"

# We define the active state ("ACT").
1.ACT = 1
1.ACT.wrapItemAndSub = <li class="nav-item active ACT">|</li>

# Get level 2 to get the format from level 1
2 <.1

# Do some customization for level 2
2.CUR = 1
2.CUR.wrapItemAndSub = <li class="nav-item dropdown active level2CUR">|</li>
2.CUR.ATagParams = class="active text-white"

# Make Levels 3 to 6 the same as level 1. I'll leave it to you to study all the typoscript wrapping.
3 < .1
4 < .1
5 < .1
6 < .1
}

Answer 5

你好@Mohamed Masmoudi！

我是 TYPO3 的新手。我问自己和你一样的问题。经过大量研究，我找到了一个至少在 桌面视图模式 下对我有用的解决方案（TYPO3 v10.4.12 和 bootstrap-package）。但我不明白 移动视图 中到底发生了什么。也许有人可以给我提示？？？子关卡存在于源代码中，但未显示在移动视图中。

第一步修改setup.typoscript

中的MenuProcessor

    ##########################
    ### DATA PREPROCESSING ###
    ##########################
    dataProcessing {
        1 = BK2K\BootstrapPackage\DataProcessing\ConstantsProcessor
        1 {
            as = theme
            key = page.theme
        }
        10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
        10 {
            #modify these lines
            levels = 5
            expandAll = 1
            includeSpacer = 1
            as = mainnavigation

第二步修改 /bootstrap_package/Resources/Private/Partials/Page/Navigation/Main.html 通过在

之后直接将以下行添加到流体模板

<a href="{child.link}" class="dropdown-item{f:if(condition: child.active, then:' active')}"{f:if(condition: child.target, then: ' target="{child.target}"')} title="{child.title}">
...
</a>

来了：

<!-- 3rd Level -->                                                  
                                                <ul class="dropdown-menu dropdown2-menu">
                                                  <f:for each="{child.children}" as="child2">
                                                     <li>
                                                        <a href="{child2.link}" class="dropdown-item{f:if(condition: child2.active, then:' active')}"{f:if(condition: child2.target, then: ' target="{child2.target}"')} title="{child2.title}">
                                                            <f:if condition="{theme.navigation.dropdown.icon.enable} && {child.icon}">
                                                                <span class="dropdown-icon">
                                                                    <f:if condition="{child.icon.0.extension} === svg">
                                                                        <f:then>
                                                                            <bk2k:inlineSvg image="{child.icon.0}" width="{theme.navigation.dropdown.icon.width}" height="{theme.navigation.dropdown.icon.height}" />
                                                                        </f:then>
                                                                        <f:else>
                                                                             <f:image additionalAttributes="{loading: 'lazy'}" image="{child.icon.0}" alt="{child.icon.0.alternative}" title="{child.icon.0.title}" width="{theme.navigation.dropdown.icon.width}" height="{theme.navigation.dropdown.icon.height}" />
                                                                        </f:else>
                                                                    </f:if>
                                                                </span>
                                                            </f:if>
                                                                <span class="dropdown2-text">{child2.title}<f:if condition="{child2.current}"> <span class="sr-only">(current)</span></f:if></span>
                                                            </a>
                                                        </li>
                                                  
                                                  </f:for>
                                                </ul>
<!-- End of 3rd Level -->

如你所见，我添加了一个 child2。您可以通过在特定 <a>...</a>-tag

之后添加它们来添加更多子级别，例如 child3 等

别忘了关闭所有打开的标签。

为了用 CSS 分隔新的子级别，我在标签中添加了一个 dropdown2-menu-Class。现在您可以将 .dropdown2-menu {margin-left: 50px} 添加到您的 CSS.

当然最好不要碰Bootstrap-包裹。而是使用您自己的网站包。你可以建一个@https://sitepackagebuilder.com/

所有这一切只是为了记住我自己，我在做什么，也许是为了帮助别人......:-)

为什么我的 DataProcessing\MenuProcessor 不显示我的页面树的 level-3 和 level-4

Why my DataProcessing\MenuProcessor don't show level-3 and level-4 for my page tree

typo3

fluid

typoscript