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

Question

我使用 Bootstrap_package v10 和 Typo3 9，菜单处理器不显示我的页面树的第 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

首先，您应该验证数据是否可用于前两个级别以上：
在您的模板中插入<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>

注意第一级 spacer 标记的变化！
由于我没有比较代码，而是专注于构建干净的标记，因此可能会发生进一步的变化。

---

为递归增加一个“参数”。

对于增加的值（level1、level2、level3...），您需要 TYPO3 之前版本 9 中的视图助手：
这个viewhelper可以用打字稿来实现：

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 2

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

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

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>

当然，你应该有 5 个级别的 CSS。 :)

希望能帮到你。

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。 现在，您可以在 CSS 中添加例如 .dropdown2-menu {margin-left: 50px}。

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

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