Контакты | E-mail: info@modx-evo.ru | Заказать обратный звонок



Урок 8 - «Хлебные крошки»

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

В виду того, что у нас в шаблоне предусмотрено данное решение мы приступим к его реализации, для это в MODx у нас имеется специальный сниппет [ [Breadcrumbs]].

Сниппет Breadcrumbs MODx

В нашем шаблоне хлебные крошки представлены в виде ненумерованного списка заключенного в тег div с классом breadcrumb.

Давайте заменим кусок этого кода на вызов сниппета [ [Breadcrumbs? &showCrumbsAtHome=`0` &showHomeCrumb=`1` &currentAsLink=`0` ]], здесь осуществляется кэшируемый вызов сниппета с параметрами.

Сохраните шаблон и обновите страницу, вы увидите, что сниппет работает, но у нас съехали стили. Случилось это, потому что наш сниппет генерирует немного другой HTML код.

breadcrumbs modx

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

В данном уроке мы познакомилис еще с одним сниппетом MODx и создали навигационную цепочку «Хлебные крошки». В следующем уроке мы познакомимся со специальными тегами ресурсов MODx.

Скачать файлы урока


Просмотров: 5321


Статьи по теме:


Написать комментарий

Поля помеченные * обязательны для заполнения.


Константин
Постов: 1
Comment
Re: статья
Добавлен #1 на : Ср августа 26, 2015, 23:13:15
Это для modx-revo, а не для evo... (
admin
Постов: 1
Comment
Breadcrumbs
Добавлен #2 на : Чт августа 27, 2015, 08:33:46
Это для evo. С чего вы взяли, что это для revo?

Будь в курсе!

Введите Ваш Email и имя.

Digital Newsletter

Чтобы отписаться нажмите сюда ».