Урок 8 - «Хлебные крошки»
Навигационная цепочка «Хлебные крошки» или Breadcrumbs визуально показывает текущее местоположение пользователя на сайта, а также позволяет быстро осуществить переход в предыдущие разделы, что очень удобно. «Хлебные крошки» является весьма удобным инструментом в плане удобства пользования.
В виду того, что у нас в шаблоне предусмотрено данное решение мы приступим к его реализации, для это в MODx у нас имеется специальный сниппет [ [Breadcrumbs]].
Сниппет Breadcrumbs MODx
В нашем шаблоне хлебные крошки представлены в виде ненумерованного списка заключенного в тег div с классом breadcrumb.
Давайте заменим кусок этого кода на вызов сниппета [ [Breadcrumbs? &showCrumbsAtHome=`0` &showHomeCrumb=`1` ¤tAsLink=`0` ]], здесь осуществляется кэшируемый вызов сниппета с параметрами.
Сохраните шаблон и обновите страницу, вы увидите, что сниппет работает, но у нас съехали стили. Случилось это, потому что наш сниппет генерирует немного другой HTML код.
Чтобы все заработало верно, найдите файл layout.css на сервере assets/templates/site/styles/layout.css и откройте его для редактирования, далее находим строки со стилями, которые отвечают за отображение хлебных крошек и меняем их на следующие:
#breadcrumb{padding:20px 0;}
#breadcrumb a{text-decoration:underline;}
#breadcrumb a:hover{text-decoration:none;}
Сохраняем и обновляем страницу в браузере, у нас должно все отображаться корректно.
Чтобы все сделать в рамках хорошего тона, давайте откроем наш шаблон еще раз и скопируем содержимое блока отвечающего за вывод хлебных крошек в шаблоне на вызов чанка { {BREADCRUMBS}} и создадим новый чанк с именем «BREADCRUMBS», в который вставим скопированный код.
Параметры сниппета Breadcrumbs
Теперь давайте познакомимся с параметрами вызова сниппета Breadcrumbs, начнем с тех, которые мы уже использовали:
- &showCrumbAtHome – отображать хлебные крошки на главной странице (0 – не отображать, 1 - отображать);
- &showHomeCrumb – отображать ссылку на главную страницу (0 – нет, 1 - отображать);
- ¤tAsLink – отображать текущую страницу в виде ссылки (0 – нет, 1 - да);
- &maxCrumbs – целое число, максимальное количество узлов в цепочке (остальные заменяются «…»);
- &respectHidemenu – скрывать пункты, которые скрыты от показа в меню (0 – нет, 1 - да);
- &showCurrentCrumb – показывать в цепочке текущий пункт;
- &linkTextField – текст ссылки в цепочке (анкор). Возможные значения: description, longtitle, pagetitle, menutitle;
- &linkDescField – атрибут title для ссылки в цепочке. Возможные значения: description, longtitle, pagetitle, menutitle;
- &crumbGap – разделитель в цепочке, если количество пунктов превышено заданное в параметре maxCrumbs, по умолчанию «…»;
- &homeId – идентификатор ресурса, который будет считаться главной страницей;
- &homeCrumbTitle – текст для вывода главной страницы;
- &hideOn – задает через запятую список идентификаторов ресурсов, на которых не должна показываться цепочка;
В данном уроке мы познакомилис еще с одним сниппетом MODx и создали навигационную цепочку «Хлебные крошки». В следующем уроке мы познакомимся со специальными тегами ресурсов MODx.
Скачать файлы урока
Постов: 1
Добавлен #1 на : Ср августа 26, 2015, 23:13:15