среда, 22 декабря 2010 г.

Взаимосвязанные меню в TYPO3

 
Довольно часто на сайтах система меню устроена таким образом, что сверху расположены основные разделы сайта, а сбоку его подразделы, как это показано на скриншоте ниже.




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

Это кусочек кода который отвечает за верхнюю строку меню. За это отвечает параметр - entryLevel = 0

tempmenu.TOP_MENU = HMENU
tempmenu.TOP_MENU.entryLevel = 0
# исключаем из меню некоторые страницы, например Карта сайта и все-такое...
tempmenu.TOP_MENU.excludeUidList = 44,163
tempmenu.TOP_MENU.1 = TMENU
tempmenu.TOP_MENU.1 {
noBlur = 1
ACT = 1
CUR = 1
}
tempmenu.TOP_MENU.1.NO {
allWrap = <span class="menu_left"> </span><span class="menu">|</span><span class="menu_right"> </span>
}
tempmenu.TOP_MENU.1.ACT {
allWrap = <span class="curmenu_left"> </span><span class="curmenu">|</span><span class="curmenu_right"> </span>
}
tempmenu.TOP_MENU.1.CUR {
allWrap = <span class="curmenu_left"> </span><span class="curmenu">|</span><span class="curmenu_right"> </span>
doNotLinkIt = 1
}

А это кусочек typoscript, который отвечает за генерацию бокового меню или меню подразделов (entryLevel = 1):

# Настройка левого меню
tempmenu.LEFT_MENU = HMENU
tempmenu.LEFT_MENU.entryLevel = 1
tempmenu.LEFT_MENU.wrap = <ul>|</ul>
# Настройка 1-го уровня левого меню
tempmenu.LEFT_MENU.1 = TMENU
tempmenu.LEFT_MENU.1 {
noBlur = 1
ACT = 1
CUR = 1
}
tempmenu.LEFT_MENU.1.NO {
allWrap = <li class="menu_v1_lev2">|</li>
}
tempmenu.LEFT_MENU.1.ACT {
allWrap = <li class="menu_v1_lev2 active">|</li>
}
tempmenu.LEFT_MENU.1.CUR {
allWrap = <li class="menu_v1_lev2 current"><span>|</span></li>
doNotLinkIt = 1
}
# Настройка 2-го уровня левого меню
tempmenu.LEFT_MENU.2 = TMENU
tempmenu.LEFT_MENU.2 {
noBlur = 1
ACT = 1
CUR = 1
}
tempmenu.LEFT_MENU.2.NO {
allWrap = <li class="menu_v1_lev3">|</li>
}
tempmenu.LEFT_MENU.2.ACT {
allWrap = <li class="menu_v1_lev3 active">|</li>
}
tempmenu.LEFT_MENU.2.CUR {
allWrap = <li class="menu_v1_lev3 current"><span>|</span></li>
doNotLinkIt = 1
}


Совет

Несмотря на то, что, по своей неопытности, я использовал в скриптах имя объекта - tempmenu, рекомендую делать красиво и не повторять моих прежних "ошибок".

Используйте в своих TypoScript либо lib объект, либо temp. Возможно Вы спросите - но какая разница между ними? В каких случаях нужно использовать один объект, а когда другой?

Дело в том, что объекты, которые хранятся внутри temp носят временный характер, и как следствие - не кэшируются, в отличии от объекта - lib. Это также означает, что Вы не сможете делать ссылку на объект temp или изменять его по ссылке.

Хочу привести наглядный пример. Допустим у нас есть объекты temp и lib:

temp.myTemp = TEXT
temp.myTemp.value = Это текст внутри temp!
lib.myLib = TEXT
lib.myLib.value = Это текст внутри lib!

Попытаемся вывести данный текст на страницу 3-мя различными способами...
# Вывод значений объектов
page.10 = COA
page.10 {
10 < temp.myTemp
10.wrap = <strong>Temp: </strong>|<br />
20 < lib.myLib
20.wrap = <strong>Lib: </strong>|<br />
wrap = <p>|</p>
}
# Вывод значений объектов по ссылке
page.20 = COA
page.20 {
10 =< temp.myTemp
10.wrap = <strong>Temp: </strong>|<br />
20 =< lib.myLib
20.wrap = <strong>Lib: </strong>|<br />
wrap = <p>|</p>
}
# Передача объекта lib по ссылке объекту temp
temp.myTemp =< lib.myLib
page.30 = COA
page.30 {
10 < temp.myTemp
10.wrap = <strong>Temp: </strong>|<br />
20 < lib.myLib
20.wrap = <strong>Lib: </strong>|<br />
}

Результатом работы данного скрипта будет следующий вывод:

Это текст внутри temp!
Это текст внутри lib!

Это текст внутри lib!

Это текст внутри temp!
Это текст внутри lib!

Надеюсь, Вам все понятно - почему результаты работы именно такие.

 

3 коммент.:

NosDmit комментирует...

Здравствуйте, использую вашу инструкцию, но не могу понять структуру Вашего меню. Как сделать так что даже переходя по ссылкам которые 2-3-го уровня, верхнее меню оставалось таким же?

Вадим Гиркало комментирует...

Верхнее меню не должно изменяться! А что у Вас происходит?

Анонимный комментирует...

Спасибо! Вы очень помогли!

Отправить комментарий

О себе

Моя фотография
Вадим Гиркало
Фрилансер, веб-разработчик сайтов на базе бесплатной, мощнейшей и очень гибкой CMS системы - TYPO3.
Просмотреть профиль

Позвонить мне в Skype

TOP - 3