WedX - журнал о программировании и компьютерных науках

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

Я использую Bootstrap_package v10 и Typo3 9, процессор меню не показывает уровень 3 и 4 для моего дерева страниц.

Я использую оригинальные шаблоны из пакета начальной загрузки, код ниже:

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>

Жидкость вызывает дочернюю страницу, но я не знаю, является ли она рекурсивной или нет, поэтому она может показывать все уровни, что мне там не хватает, кажется, я первый, у кого возникла эта проблема?

Заранее благодарю за любую помощь.

14.01.2019

Ответы:


1

Сначала вы должны проверить, доступны ли данные более чем для первых двух уровней:
вставьте <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 ...

14.01.2019
  • я добавил код жидкости для меню в первое сообщение, я действительно не знаю, является ли это рекурсивным вызовом, как я могу отладить это, чтобы узнать? 14.01.2019
  • Я дополнил свой ответ решением с одним файлом. 14.01.2019
  • Большое спасибо, это спасло мне жизнь. 14.01.2019
  • Могу ли я улучшить ваш код, чтобы добавить класс уровня, например, ‹ul class=level-1› ... ‹ul class=level-2›? 14.01.2019
  • тогда вам нужен дополнительный параметр, который нужно увеличивать при каждом рекурсивном вызове. Расчет встроен в жидкость, начиная с TYPO3 9, с более ранними версиями вам нужен помощник просмотра для расчета следующего уровня (см. отредактированный ответ) 15.01.2019
  • О, это здорово, мне очень нравится эта версия 9, спасибо за ответ, улучшите. 15.01.2019
  • в TYPO3 v9 и выше вы просто используете {f:variable(name: 'level', value: '{level + 1}')} <f:for each="{item.children}" as="child"> <f:render section="subLevel" arguments="{item:child,level:level}" /> </f:for> 26.04.2021

  • 2

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

    10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
    10 {
      levels = 5
      expandAll = 1
      ...
    }
    
    14.01.2019
  • спасибо за ответ, теперь я добавил expandAll = 1, но это не решило проблему. 14.01.2019
  • В этом случае вам следует попробовать предложение @BerndWilkeπφ для отладки переменной и проверки вашего шаблона. 14.01.2019

  • 3

    Ваш шаблон 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 уровней. :)

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

    14.01.2019

    4

    Для уровней выше 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
    }
    
    17.05.2020

    5

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

    Я новичок в 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/

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

    16.02.2021
    Новые материалы

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


    Для любых предложений по сайту: [email protected]