Почему мой DataProcessing\MenuProcessor не показывает уровень 3 и уровень 4 для моего дерева страниц

Сначала вы должны проверить, доступны ли данные более чем для первых двух уровней:
вставьте <f:debug title="mainnavigation">{mainnavigation}</f:debug> в свой шаблон.

Затем проверьте свои шаблоны, готовы ли они отображать более двух уровней.
Я могу представить, что ваши шаблоны показывают первый уровень, для второго уровня вызывается партиал, но этот партиал при необходимости не вызывает сам себя.
За исключением если вам нужна разметка для определенного уровня (например, '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:
этот помощник просмотра может быть реализован в 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 ...

По умолчанию MenuProcessor не раскрывает все уровни. Он покажет только ветку, на которой вы находитесь, до уровня ниже уровня, на котором вы находитесь. Если вы хотите показать все уровни для всех ветвей, вам нужно добавить expandAll = 1 в свою конфигурацию:

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

Ваш шаблон Fluid показывает только 2 уровня. По умолчанию в пакете Bootstrap у вас есть двухуровневое меню. Если вы хотите иметь больше, вам нужно настроить шаблон для отображения большего количества уровней. Вот рендеринг уровня 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>

Конечно, у вас должен быть CSS для 5 уровней. :)

Я надеюсь, что смог помочь вам.

Для уровней выше 2, мне кажется, гораздо проще встроить typoscript в ваш 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
}

Привет @Мохамед Масмуди!

Я новичок в TYPO3. Я задавал себе тот же вопрос, что и вы. После долгих исследований я нашел решение, которое работает для меня (TYPO3 v10.4.12 и загрузочный пакет), по крайней мере, в режиме просмотра рабочего стола. Но я не понимаю, что именно происходит в мобильном представлении. Может кто подскажет??? Подуровень существует в исходном коде, но не отображается в мобильной версии.

Первым шагом было изменение MenuProcessor в setup.typoscript.

    ##########################
    ### 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. Вы можете добавить дополнительные подуровни, такие как child3 и т. д., добавив их после определенного тега <a>...</a>.

Не забудьте закрыть все открытые теги.

Чтобы разделить новые подуровни с помощью CSS, я добавил в тег класс dropdown2-menu-Class. Теперь вы можете добавить, например, .dropdown2-menu {margin-left: 50px} в свой CSS.

Bootstrap-Package конечно лучше не трогать. Вместо этого используйте свой собственный sitepackage. Вы можете создать один @ https://sitepackagebuilder.com/

Все это только для того, чтобы вспомнить себя, что я делал и, может быть, помочь другим... :-)