меню навигация

Использование меню в CMS Made Simple

Nikel, 24.11.2014

Менеджер меню является модулем для представления навигации в CMSMS, который легко использовать и настраивать. Он выделяет  отображаемую часть меню, преобразовывая ее в Smarty-шаблоны. Путем изменения существующих шаблонов или создания своих собственных, вы можете реализовать практически любое меню, которое только можно придумать.

Давайте рассмотрим, что же из себя представляет данный модуль, и, чтобы разобраться, в консоли администратора откроем страницу Оформление | Менеджер меню.  Мы увидим список шаблонов для меню, существующих по умолчанию. Каждый из них обеспечивает свое представление, свою структуру навигации.

  • cssmenu.tpl — генерирует меню вида ul >li>a>spanid=primary-nav), обернутое в div(c id =menuwrapper) и внутренним div класса clearb (видимо для отмены обтекания) . Класс menuparent присваивается пунктам, имеющим дочерние подпункты. Дочерний список пунктов (который также имеет структуру ul>li>a>span) имеет класс unli. А активный пункт — menuactive.
  • cssmenu_ulshadow.tpl — по сути то же самое.
  • accessible_cssmenu.tpl — то же, что и предыдущие, только добавлена нумерация при помощи тега dfn. Структура меню ul>li>a>(dfn+span) — т.е. dfn и span дочерние для a. Нумерация дочерних пунктов вида номер родителя.номер дочернего пункта, например, 6.1 и т.д.
  • minimal_menu.tpl — самый простой вариант меню, обычный список ul>li.  Для очистки обтекания списку присвоен класс clearfix.  Ссылка активного пункта  меню имеет класс currentpage.
  • simple_navigation.tpl — генерирует меню вида ul>li>a>span. Похоже на cssmenu.tpl, только без большей части классов, обертки menuwrapper и вложенного div.clearb. Класс активного пункта также menuactive.
  • accessible_simple_navigation.tpl — шаблон как и предыдущий, отличие в нумерации, добавленной по такому же принципу, как в  accessible_cssmenu.tpl. Но есть и отличие: по-особому выделен активный пункт. Во-первых, он не содержит ссылки и заключен вместе с dfn в тег заголовка h3. Во-вторых, в активном теге dfn не просто номер, а еще и текст Current page is.
  • breadcrumbs.tpl — шаблон для  навигационной цепочки (хлебных крошек), ее можно также вызвать на  страницу тегом {breadcrumbs}.

Для любого меню можно добавить Разделитель-линию (тег hr). Но чтобы разделитель был виден,его нужно предварительно создать в административной панели (щелкнув Контент | Страницы, Добавить новый контент, выбрать Тип контента — Разделитель, Родитель — родительская страница, пункт меню, содержащий дочерний список). Также в кодах шаблонов поддерживается вставка Секции заголовка, как и разделитель это особый тип контента CMSMS (и создается также в административной панели в разделе Контент | Страницы),  который используется, чтобы разбить меню на группы (разделы). Это не имеет отношения к иерархии, а Секции заголовка не имеют связанных с ними страниц, но могут быть использованы для группирования набора ссылок со  сходным  содержанием. Грубо говоря, секция представляет собой просто  небольшой текст, связывающий ближайшие несколько ссылок.

Модуль Меню может кэшировать результаты  в статических файлах, что позволяет уменьшить потребление памяти и количество SQL- запросов, повышая производительность. Это обеспечивает все преимущества статических меню без неудобств  при создании или редактировании страниц. Каждый шаблон меню может быть помечен как ‘кэшируемый’ (при помощи галочки в столбце Кэшируется). Все кэшированные файлы меню удаляются при добавлении, редактировании и удалении контента или шаблона меню.

менеджер меню

Вообще говоря, этого списка достаточно для большинства ситуаций и нужд, но, как я уже сказала, возможности CMSMS в этом отношении гораздо более гибкие и позволяют добавлять сюда собственные, пользовательские шаблоны. Тут могут быть два пути .

Первый из них, с помощью  пункта Добавить шаблон добавить шаблон  создать меню с нуля или скопировать откуда-то, заполнив соответствующие поля (Имя и Содержание).

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

Теперь, имея в распоряжении ваш шаблон, вы можете его изменить (нажав на значок лист бумаги, см. скриншот) или при необходимости удалить (иконка корзины).

редактирование меню

Предположим, мы создали копию простейшего шаблона minimal_menu.tpl и назвали его menu1.  Теперь попробуем разобраться что к чему открыв его на редактирование.

код шаблона

В шаблоне меню используется некоторый Smarty код, который нужно объяснить. Самая важная часть в коде Smarty переменная $nodelist. Она содержит всю информацию, такую  как тексты меню или URL-адреса всех активных страниц нашего веб-сайта. Цикл foreach обходит  каждую страницу, сохраненную в переменной {$nodelist} и печатает HTML-код, помещенный между тегами  <foreach>  столько раз, сколько страниц найдено в переменной. Для каждого запуска значения для одной страницы сохраняются в переменной $node, которая представляет собой объект. Эта переменная создается с помощью параметра item=node в теге foreach.  Доступ к данным по конкретной сохраненной странице можно получить через  свойства объекта $node. Приведу их ниже.

  • $node->idID контента
  • $node->urlURL контента
  • $node->accesskey — Горячая клавиша, если задана
  • $node->tabindex — Порядок обхода, если задан
  • $node->titleattribute — Описание (атрибут title), если задано
  • $node->hierarchy — Позиция иерархии, (например, 2.2.3)
  • $node->depth — Глубина (уровень) данного узла в текущем меню
  • $node->prevdepth — Глубина (уровень) узла, непосредственно предшествующего данному
  • $node->haschildren — Возвращает true, если у данного узла есть дочерние узлы для отображения
  • $node->children_exist — Возвращает true, если для данного узла в БД доступны дочерние узлы, которые могут быть отображены в меню
  • $node->menutext — Текст пункта меню
  • $node->raw_menutext — Текст пункта меню без экранирования элементов HTML.
  • $node->alias — Алиас (псевдоним) страницы
  • $node->extra1 — Значение свойства страницы extra1, если не задано значение параметра loadprops, запрещающее загрузку свойств.
  • $node->extra2 — Значение свойства страницы extra2
  • $node->extra3 — Содержит значение свойства страницы extra3
  • $node->image — Содержит значение свойства страницы image (если не пусто), если не задано значение параметра loadprops.
  • $node->thumbnail — Это поле содержит значение свойства страницы thumbnail (если не пусто), если не задано значение параметра loadprops.
  • $node->target — Атрибут Target ссылки (если не пусто), если не задано значение параметра loadprops.
  • $node->created — Дата создания пункта
  • $node->modified — Дата последнего изменения пункта
  • $node->index — Номер этого узла в едином меню.
  • $node->parentTrue, если данный узел является родителем выбранной в данный момент страницы
  • $node->currentTrue, если данный узел является выбранной в данный момент страницей
  • $node->first — задано и равно 1, если первый пункт на уровне.
  • $node->last — задано и равно 1, если последний пункт на уровне.

Хотя мы рассмотрели простейший из встроенных шаблонов, он все-таки довольно сложен из-за большого количества условных операторов.  Приведу еще пару простых примеров.

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

Добавляем шаблон под именем footer_menu в MenuManager’е. Теперь его можно вставить на страницу или в Основной шаблон (Оформление | Шаблоны) с помощью такого тега — {menu template="footer_menu"}. На том месте страницы, где был вставлен код будет что-то вроде этого

вывод меню

Как видно, цикл foreach — мощный инструмент создания любой формы навигации, которую вы только можете себе представить. Еще один пример касается того, как может  быть создана графическая навигация.

Тут все похоже  на первый пример, только вместо текста в качестве ссылок используются картинки. В качестве названия картинок подставляются алиасы страниц.  Предварительно потребуется создать в графическом редакторе свою картинку для каждой страницы и сохранить так, чтобы ее имя совпадало с алиасом страницы ( например  cтраница Отзывы, ее алиас — otzyvy, изображение — otzyvy.jpg  и т.д.). Затем готовые изображения нужно загрузить на сайт в папку uploads/design. Читайте статью о том, как работать с изображениями и добавлять галереи в CMS Made Simple.

Соответственно для графической навигации порядок действий будет такой же — создаем шаблон меню (к примеру graphical_menu.tpl) и размещаем тег меню на странице или в Основном шаблоне — {menu template="graphical_menu"}.

MenuManager используется не только для отображения навигационной структуры сайта, но  и  участвует в  создании Карты сайта или Хлебных крошек. Это означает, что вы можете использовать зарегистрированые Smarty теги MenuManager’а {breadcrumbs} и {site_mapper}, которые по сути являются просто обертками для модуля Меню, чтобы сделать синтаксис проще.

Как вы уже наверно догадались, навигация выводится на страницу тегом {menu}, в этом случае будет показано меню, сгенерированное в соответствии с шаблоном принятым по умолчанию в Менеджере меню. Чтобы определиться какой шаблон будет применен в каждом конкретном случае  и  используется параметр template, как мы могли видеть в том же Менеджере и наших примерах. Но он далеко не единственный.

Вот основной список параметров,  которые можно использовать в теге {menu

  • collapse='1' — Скрывает пункты не относящиеся к текущей странице.
  • loadprops='0' — Отменяет загрузку дополнительных полей (к ним относятся extra1, extra2, extra3, image, thumbnail и т.д.). Служит для уменьшения количества запросов к базе данных и экономии памяти. При установке в 1 позволяет загружать расширенные свойства для каждго узла и использовать их при создании очень сложных меню.
  • items='contact,home' — Перечисляет список алиасов (псевдонимов) страниц через запятую и, таким образом, указывает какие страницы нужно отображать в меню.
  • number_of_levels='1' — Ограничивает количество уровней меню, которые будут отображаться.
  • show_all='0' — Отображает все пункты меню, в том числе скрытые, за исключением неактивных страниц.
  • show_root_siblings='1' — Отображает сестринские элементы, находящиеся на одном уровне иерархии (по сторонам) заданного параметра start_page или start_element. Используется вместе с start_element или start_page.
  • start_level='2' — Задает отображение меню с указанного уровня.
  • start_element='1.2' -Задает отображение, начиная с определенного элемента из иерархии (например 1.2).
  • start_page='home' — Показывает в меню только эту страницу и ее дочерние элементы, задается по  псевдониму страницы.
  • template='simple_navigation.tpl' — Имя шаблона меню.
  • excludeprefix=' ' — Исключает страницы, алиасы которых перечислены через запятую.
  • includeprefix=' ' — Включает только страницы, алиасы которых перечислены через запятую.
  • childrenof=' ' — Отображает дочерние элементы определенной страницы. Например {menu childrenof=$page_alias} покажет только детей текущей страницы.
  • nocache=' ' — Отменяет кэширование.

Вот и все, что я хотела написать по этой теме. Спасибо за внимание.