我使用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>
流体正在呼叫一个页面孩子，但是我不知道它是否是递归的，因此它可以显示所有级别，在那里我缺少什么，看来我是第一个遇到此问题的人？ / p>
在此先感谢您的帮助。
答案 0 :(得分：2)
首先，您应该验证数据是否可用于前两个级别以上：
在模板中插入<f:debug title="mainnavigation">{mainnavigation}</f:debug>。
然后检查您的模板是否准备好显示两个以上的级别。
我可以想象您的模板显示第一级，第二级则调用了partial，但在必要时该partial不会自行调用。
除非您需要一些特定于级别的标记（例如'class="level1"），否则您可以通过将级别彼此堆叠（堆叠ul）来构建菜单。因此，您可以使用具有相同标记的堆叠菜单进行递归调用，或者使用单独的标记为每个级别定义一个部分（或者定义一个包含当前级别的变量并调用该部分递归）。
更糟糕的是：两个级别都写在同一个模板文件中，没有使用任何部分（或部分）。
我将其更改为：
（我留在一个文件中，而不是其他部分，我称之为一个节，该节可以在同一文件中）
<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>
通知在第一级中更改了分隔符的标记！
可能会发生进一步的变化，因为我没有比较代码，而是专注于构建清晰的标记。
增加递归的“参数”。
对于增加的值（level1，level2，level3 ...），您需要在TYPO3之前的版本9中使用viewhelper：
这个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 ...
答案 1 :(得分：1)
默认情况下，MenuProcessor不会展开所有级别。它只会显示您所在的分支，直到您所在的级别以下。如果要显示所有分支的所有级别，则必须在配置中添加expandAll = 1：
10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
levels = 5
expandAll = 1
...
}
答案 2 :(得分：0)
您的流体模板仅显示2个级别。默认情况下，Bootstrap软件包中有一个2级菜单。 如果您想要更多，则需要调整模板以渲染更多级别。 这是模板中第2级的渲染：
<f:for each="{item.children}" as="child">
<f:render section="subLevel" arguments="{item:child}" />
</f:for>
如果要渲染第3级，则需要转到subLevel部分，并检查在item中设置的每个arguments中是否有子代。
示例：
<f:if condition="{item.children}">
<ul>
<f:for each="{item.children}" as="level3Item">
...
</f:for>
</ul>
</f:if>
您应该有5个级别的CSS。 ：）
希望我能为您提供帮助。
答案 3 :(得分：0)
对于超过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
}
答案 4 :(得分：0)
你好@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
不要忘记关闭所有打开的标签。
为了通过 CSS 分隔新的子级别，我在标签中添加了一个 dropdown2-menu-Class。
现在，您可以向 CSS 中添加例如 .dropdown2-menu {margin-left: 50px}。
当然最好不要碰Bootstrap-Package。而是使用您自己的站点包。你可以建立一个@https://sitepackagebuilder.com/
这一切只是为了记住我自己，我在做什么，也许是为了帮助别人...... :-)