Как вывести меню сайта
Сначала азы. Каждое меню имеет произвольное, но обязательно уникальное название. Ну например: "Верхнее меню", "Меню sidebar 2", "подвал" и так далее. А создаются менюшки контент-менеджером в разделе страницы » Меню сайта вашей админпанели.
По сравнению с популярными CMS, здесь менюшки наполняются непривычным образом: сначала нужно один раз создать меню (то есть объявить его название), потом во время редактирования желаемых страниц следует выбрать меню по названию, куда хотелось бы прикрепить эту страницу. Необычность проявляется и в том, что позиционное положение пунктов меню определяется так называемым весом страниц, то есть порядком ручной расстановки страниц в их общем списке.
Однако Подобное неудобство управления менюшкой исчезает при установке визуальных инструментов администратора в клиентский шаблон сайта. Там есть инструмент для интуитивно понятного перемещения пунктов меню относительно друг друга.
Структура готовой менюшки представляет собой обычный список ссылок на страницы с упорядочением ссылок по весу их страниц. Но поскольку в меню могли быть добавлены страницы разного типа (категории, бренды, товары, новости, статьи, медиафайлы, специальные или как их ещё называют - "статические" страницы), то эти страницы группируются в структуре меню по типу и перечисляются с помощью соответствующего тега.
На словах подобная схема кажется мудрёной, на деле же всё оказывается простым и достаточно гибким, чтобы всего двумя тегами обслуживать разные меню сайта с непредсказуемым сочетанием типовых групп ссылок в менюшках.
Пример кода
Простейший случай вывода пунктов меню с поддержкой мультиязычности сайта выглядит так:
{getTopMenu}
<ul class="menu sections">
{enumSections}
<li class="item" {activeSection}>
<a href="{url}{htmlLangMarker}" class="link section">
{polyglot}
{name}
{/polyglot}
</a>
</li>
{/enumSections}
</ul>
Принцип действия С помощью первого тега мы извлекли из CMS структуру главнейшего меню. По умолчанию главнейшим считается менюшка, названная в админпанели как "Верхнее меню". Затем с помощью второго тега мы перечислили все ссылки типа "статическая страница", так как первый тег по умолчанию извлекал в структуру ссылки именно такого типа, игнорируя прочие. И затем для каждой перечисляемой ссылки мы вывели анкор на страницу, на всякий случай отметив также активную ссылку.
Для продемонстрированной выше разметки у нас получится следующий каркас стилей меню:
.menu.sections {
}
.menu.sections .item {
}
.menu.sections .link.section {
}
.menu.sections .item[selected] {
}
.menu.sections [selected] .link.section {
}
Другие меню и типы ссылок
Не исключено, что когда-нибудь вебмастеру придётся готовить более сложную структуру сайта, например с менюшками в шапке, на панельках сбоку, в подвале и тому подобное. Тогда у вебмастера возникнут резонные вопросы:
- Как быть если меню названо иначе чем "Верхнее меню"?
- Как быть если в меню прикреплены не только специальные страницы?
Для решения первого вопроса в теге {getTopMenu} предусмотрен необязательный параметр name, в котором вы можете указать название желаемой менюшки. Например, давайте выведем все статические страницы меню "Hello", скажем для случая одноязычного сайта.
{getTopMenu name='Hello'}
<menu>
{enumSections}
<a href="{url}">
{name}
</a>
{/enumSections}
</menu>
А для решения второго вопроса предусмотрен необязательный параметр type, в котором задаётся желаемый тип ссылок. Возможные значения параметра: categories, brands, products, sections, files, articles, news. Например, выведем все товары меню "Акции".
{getTopMenu name='Акции'
type='products'}
<menu>
{enumSections}
<a href="{url}">
{name}
</a>
{/enumSections}
</menu>
Длина меню
Иногда возникает необходимость искусственно ограничить число выводимых пунктов меню. Скажем, в подвале сайта хотим вывести не более 5 статических страниц дефолтной менюшки (напомню, это "Верхнее меню"). Тогда во втором теге используем необязательный параметр max.
{getTopMenu}
<menu>
{enumSections max=5}
<a href="{url}">
{name}
</a>
{/enumSections}
</menu>
Вложенные уровни
Так как контент-менеджеру позволено вкладывать категории друг в друга и при необходимости даже бренды друг в друга, то прикрепляя категорию или бренд к менюшке, следует понимать, что вы прикрепляете всю её вложенную ветвь. А значит при перечислении становится доступна проверка на наличие вложенности и соответственно перечисление этой вложенности. Например, давайте выведем прикреплённые в верхнее меню категории и их вторые уровни, если они есть:
{getTopMenu type='categories'}
<menu>
{enumSections}
<a href="{url}">
{name}
</a>
{ifHasBranch}
<div class="submenu">
{enumSubcats }
<a href="{url}">
{name}
</a>
{/enumSubcats}
</div>
{/ifHasBranch}
{/enumSections}
</menu>
Принцип действия Сначала мы извлекли список прикреплённых категорий дефолтного меню. Затем перечисляем категории - и для каждой выводим ссылку на страницу. Если притом категория имеет ветвление, тогда перечисляем подкатегории - и для каждой тоже выводим ссылку на страницу.
Параметр from использован для того, что тег {enumSubcats} по умолчанию работает с переменной $category, а перечисление категорий менюшки у нас выполнялось тегом {enumSections} через неявную переменную $item, поэтому пришлось в этом месте принудительно указать правильное имя оперируемой переменной, доставшейся от родительского перечисления.
