Юзабилити сайта является неотъемлемой частью веб разработки. На неё действует много факторов, одним из которых выступает наличие навигационной цепочки, или как её еще называют «Хлебные крошки»
Хлебные крошки — цепочка из навигационных элементов, представляющей из себя путь от начальной директивы, а в нашем случае главной страницы, до конечной, страницы на которой в данный момент вы находитесь.
Для drupal 7 есть множество модулей позволяющих создать хлебные крошки, однако по праву своё внимание заслуживает Path Breadcrumbs. Его можно скачать с официального сайта drupal воспользовавшись данной ссылкой, а как правильно его установить можно ознакомится в нашей статье.
Подключение модуля
После установки, его необходимо активировать. Это можно сделать перейдя admin/modules, найти наш модуль. Перед нами откроется Path Breadcrumbs (собственно сам модуль) и Path Breadcrumbs UI (пользовательский интерфейс позволяющий его настроить), их нам и надо активировать для дальнейшей работы.
После того, как мы активировали наш модуль для создания хлебных крошек, у нас появиться новая вкладка в разделе «Структура».
Перейдя по ссылке мы попадём на страницу хлебных крошек.
На ней мы можем добавить свои хлебные крошки или импортировать уже существующие, при помощи соответствующих ссылок, а также перейти на страницу настройки.
Настройка модуля
Перед началом работы с модулем стоит обратить внимание на его общие настройки, и сконфигурировать их под свой конкретный случай.
Перед нами откроется страница с настройками данного модуля, которые для удобства объединены в группы.
Первая группа называется «THEMING SETTINGS»( настройки темизации).
Если мы хотим использовать собственные настройки темизации то нам необходимо оставить галочку на поле «Использовать собственный рендер модуля для отображения строк навигации» в противном случае нам не будут доступны дальнейшиеполя находящиеся в этой группе.
Следующее выплывающее меню «PER THEME SETTINGS» где можно выбрать тему, в которой будут использоваться наши крошки. Если это поле оставить не заполненным то они будут отображаться на теме установленной по умолчанию.
В поле разделитель можно написать свой текст или символ который будет разделять между собой элементы навигационной цепочки.
Поддержка расширенных форматов — настройка, позволяющая добавить расширенное описание для хлебных крошек.
И последняя настройка в этой группе позволит скрывать хлебные крошки, если длина цепочки не превышает 1 элемент.
Следующая группа настроек называется «PERFORMANCE SETTINGS» и касается кэширования строк навигации. В них мы можем включить или отключить кэширование крошек, а также выставить время обновления кэша.
Затем идёт группа под названием «настройки ссылки на главную страницу».
Если активировать «Добавлять ссылку на главную страницу по умолчанию» то все наши хлебные крошки будут начинаться с ссылки на главную страницу сайта, а в следующем поле мы можем вписать название этой ссылки
Заключительная группа настроек называется «Другие настройки»
В этих настройках мы моем выбрать метод очистки url. Задать максимальную длину одной цепочки в символах, разрешить или запретить преобразовывать HTML символы, а также разрешить вывод хлебных крошек на страницах с ошибками 403 и 404.
На этом настройки хлебных крошек закончены, поэтому нажимаем кнопку сохранить и переходим в раздел их создания.
Создание хлебных крошек
Создадим хлебные крошки для материалов типа Basic page. Для этого нажимаем на ссылку «Create new path breadcrumb»
На первом экране нам необходимо задать имя и машинное имя нашим крошкам, а также задать путь страниц на которых они будут выводится. Так как нам нужны все страницы типа «Basic page» в этой графе я подставлю системный шаблон «node/%node»
И нажимаем кнопку «Продолжить»
В разделе путь можно задавать как подстановочные шаблоны так и конкретные адреса страниц
Вторым экраном является выбор аргумента. Для этого нам необходимо нажать на кнопку «Изменить»
И в выплывающем окне выбрать необходимый нам аргумент. В моём случае мне необходим «Материал: ID» и нажимаем продолжить. Именно по этому критерию на последующих шагах настройки path breadcrumbs будет отбираться информация доступная пользователю для настройки вывода крошек. Так, выбрав «Материал: ID» мы после сможем оперировать информацией из полей конкретной страницы.
На следующем окне оставляем всё по умолчанию и нажимаем сохранить
После выбора аргумента нажимаем на кнопку продолжить и попадаем на третий экран настроек «Критерии»
Что бы добавить критерий необходимо сначала его выбрать в выплывающем списке а затем нажать на кнопку «Добавить». На данном этапе у нас выбраны все ноды, а при помощи аргумента мы связанны с материалом. Поэтому для того что бы выбрать конкретный тип материала находим в списке «Материал: Тип» и нажимаем кнопку «добавить»
Перед нами откроется окно с типами материалов, в котором мы выбираем Basic page и нажимаем сохранить.
Критериев может быть несколько, поэтому на этой странице есть дополнительные настройки «Все критерии должны соблюдаться.» и «Достаточно соблюдения одного критерия.»
Если выбрана «Достаточно соблюдения одного критерия.» то крошки будут выведены на тех страницах, которые отвечают хотя бы одному из критериев, а если выбрано «Все критерии должны соблюдаться.», то они будут выведены на страницах отвечающим одновременно всем критериям.
Так как у нас один критерий, то эти настройки не как не повлияют на дальнейшую работу.
Поэтому нажимаем «продолжить»
И мы попадаем на последний экран в котором мы и создадим наши хлебные крошки.
Перед тем как их создавать, мы можем сделать их переводимыми, для мультиязычных сайтов:
А также сразу добавить первую ссылку, ведущую на главную страницу:
Добавление хлебных крошек
Вся гибкость данного модуля заключается в том, что он позволяет использовать подстановочные шаблоны при создании названия хлебной крошки, и формирования её ссылки.
Рассмотрим таблицу добавления хлебных крошек более детально.
Первый столбец «link title» в нём мы будем заполнять название; второй столбец «путь ссылки» в этом поле напишем адрес самой ссылки, в последнем столбце находится ссылка на удаление хлебной крошки. А под полями находится кнопка добавление нового звена навигационной цепочки.
В поле additional substitutions находятся подстановочные шаблоны, которые также можно использовать при создании навигационной цепочки.
Для основных страниц обычно не делают длинные хлебные крошки, однако мы ради эксперимента создадим её из нескольких звеньев.
Первая ссылка уже существует и ведёт на главную страницу, второй сделаем сслыку на текущею страницу при помощи подстановочных шаблонов ноды.
Для этого в столбце «link title» напишем «%node:title» этот шаблон выведет тайтл страницы, а «путь ссылки» подставим шаблон который будет формировать ссылку на текущую ноду «%node:url».
Затем добавим звено без ссылки воспользовавшись шаблоном модуля. Для этого в первом поле напишем !Page_title, а в поле ссылки
И в конце добавим собственное звено под названием «Крошка» которая также не будет не куда вести. И нажмём кнопку «готово».
Теперь перейдём на саму страницу и посмотрим что у нас получилось
Как мы видим навигационная цепочка выводится в том порядке и с темы ссылками которые мы задали.
Теперь перейдём в редактирование этих хлебных крошек и уберём ненужные элементы. Для этого нам необходимо перейти admin/structure/path-breadcrumbs и нажать на кнопку «Правка»
Интерфейс редактирования хлебных крошек несколько отличается от его создания, однако функционал и возможности остались прежними.
Перейдём по ссылки breadcrumbs и в открывшимся окне удалим ненужные звенья цепи, после чего нажмём на кнопку «обновить и сохранить»
Теперь добавим хлебные крошки для типа материала Articles.
Для этого переходим admin/structure/path-breadcrumbs
И в открывшимся окне нажимаем Create new path breadcrumb
Заполняем форму создания хлебных крошек
В контексте также привязываемся к «Материал: ID»
В аргументе выбираем «Материал: тип» и в открывшимся окне ставим галочку на «Article».
Первая ссылка будет на страницу новостей поэтому в графе «LINK TITLE» мы напишем «Новости», а в «ПУТЬ ССЫЛКИ» поставим ссылку «/novosti».
Наши статьи можно разделить по термину таксаномии, отобразим же это в нашей навигационной цепочке, а для этого мы воспользуемся шаблонами подстановки. Что бы в зависимости от выбраного нами теримина менялось и его название в «link title» подставляем шаблон %node:field-type-news:name
А для ссылки на этот терми %node:field-type-news:url
И заключительным звеном нашей цепи сделаем название статьи без ссылки, для этого в первом поле подставляем уже известный шаблон «!page_title», а в поле для ссылки подставляем
В итоге у нас получилась следующая цепочка из хлебных крошек.
Экспорт и импорт хлебных крошек
Рядом с кнопкой добавления хлебных крошек есть сыка на импорт уже существующих хлебных крошек
Если на неё перейти, то откроется окно в котором нас попросят ввести код.
Этот код можно взять зайдя на страницу admin/structure/path-breadcrumbs и открыть действия, которые можно совершить с уже существующими крошками
В выплывающем списке наряду с очевидными ссылками есть «Экспорт», перейдя по которой перед нами откроется окно с тем самым кодом, необходимым для импорта.
Итог
Как показывает практика, значимость хлебных крошек часто недооценивают, а они в свою очередь сильно повышают юзабилити сайта, тем более если это интернет магазин. Модуль Path Breadcrumbs прост в использовании, а благодаря его возможности использовать подстановочные шаблоны его гибкость практически не ограничена.
