Инструкция по созданию сайта на MODx. Урок 11 — Реализация цепочки навигации «Хлебные крошки». Сниппет Breadcrumbs

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

Цепочка навигации

Реализовать строку навигации в MODx можно различными способами, но в этом уроке речь пойдет об одном встроенном сниппете Breadcrumbs. Он входит по умолчанию в дистрибутив MODx, и его основной задачей является создание этой цепочки.

Чтобы вызвать сниппет Breadcrumbs в шаблоне мы должны вставить следующую конструкцию:

[[Breadcrumbs]]

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

Результатом работы этого сниппета будет вывод пунктов,  которые отражают иерархию сайта для активной страницы. При этом все пункты навигации будут описаны соответствующими CSS классами.

Например, в нашем случае на странице «О нас» этот сниппет выведет разметку следующего вида:

<span class="B_crumbBox">

<span class="B_firstCrumb"><a class="B_homeCrumb" href="/main.html" title="Описание страницы">Главная</a></span> &raquo; 
<span class="B_lastCrumb"><span class="B_currentCrumb">О нас</span></span>

</span> 

Если проанализировать этот код, то мы увидим, что каждый пункт имеет свой класс, при этом последний пункт у нас выводится без ссылки. Разделителем между пунктами служит правая кавычка-ёлочка. Код этого символа: &raquo;.

Для оформления внешнего вида при выводе сниппета используются следующие CSS классы, которые вы должны знать:

  • .B_crumbBox — служит для оформления всего блока цепочки навигации
  • .B_homeCrumb — служит для оформления ссылки, ведущей на главную страницу
  • .B_currentCrumb — служит для оформления пункта текущей страницы
  • .B_firstCrumb — служит для оформления первого элемента цепочки
  • .B_lastCrumb — оформление последнего пункта цепочки
  • .B_crumb — оформление всех остальных элементов (кроме первого, последнего и текущего)
  • .B_hideCrumb — оформление блока c многоточием «...», который появляется в том случае, когда количество пунктов больше установленного вами значения

Используя эти классы, вы можете в CSS-файле прописать стили для любого тега или пункта навигационной цепочки.

Сейчас давайте выведем на нашем сайте навигационную цепочку. В нашем шаблоне хлебные крошки будут отображаться на всех страницах, кроме главной. И если вы помните, мы вынесли этот элемент в отдельный чанк с именем BREADCRUMB. Отправляемся его редактировать. Сейчас в этом чанке находится следующий код:

<div class="wrapper col2">
  <div id="breadcrumb">
   <ul>
      <li class="first">You Are Here</li>
      <li>&#187;</li>
      <li><a href="#">Home</a></li>
      <li>&#187;</li>
      <li><a href="#">Grand Parent</a></li>
      <li>&#187;</li>
      <li><a href="#">Parent</a></li>
      <li>&#187;</li>
      <li class="current"><a href="#">Child</a></li>
    </ul>
  </div>
</div>

Навигационная цепочка в этом чанке представляет собой ненумерованный список, помещенный в два контейнера <div class="wrapper col2"> и <div id="breadcrumb">. При этом первый элемент цепочки обозначен классом «first», а текущий — «current». Чтобы сделать динамическую цепочку навигации мы удаляем этот список и на его место вставляем конструкцию вызова сниппета Breadcrumbs. После чего чанк BREADCRUMB будет содержать в себе следующий код:

<div class="wrapper col2">
   <div id="breadcrumb">
    [[Breadcrumbs]]
   </div>
</div>

Внимание: в конструкции вызова сниппета имя должно быть написано точно так же, как на странице в администраторской панели: Элементы → Управление элементами → Сниппеты. Это значит, что если вы напишите с маленькой буквы, либо все буквы будут заглавными, то вызов сниппета осуществлен не будет.

Вы можете посмотреть, что получилось после сохранения изменений в чанке. В браузере на всех страницах, кроме главной будет отображаться динамическая цепочка навигации. Вот как она будет выглядеть на странице «Услуги»:

Динамическая цепочка навигации

Как вы видите, вывод цепочки навигации можно сделать за несколько секунд, для этого необходимо в нужном месте вызвать специальный сниппет. Но это еще не все, мы же говорим о MODx, а эта система дает вам доступ к любому тегу на странице. Поэтому сейчас мы рассмотрим специальные параметры, которые вы сможете передавать сниппету Breadcrumbs, чтобы иметь полный доступ к оформлению цепочки навигации.

Напомню, что передача параметров сниппету осуществляется с помощью следующей конструкции:

[[Breadcrumbs? &имя_параметра1=`значение` &имя_параметра2=`значение`]]

Мы уже пользовались подобным синтаксисом при передаче параметров сниппету Wayfinder в 7 уроке о реализации динамического меню.

Параметры Breadcrumbs

Общие настройки:

  • &maxCrumbs — максимальное число пунктов в цепочке.
    Возможные значения: целое число.
    По умолчанию: 100.

    Примечание: если установлено число меньше возможного количества пунктов, то посредине цепочки появится многоточие «...» вместо лишних пунктов.

  • &respectHidemenu — скрывать пункты, не помеченные для показа в меню.
    Возможные значения: 0 - отображать | 1 - скрывать.
    По умолчанию: 1.

    Примечание: включать и отключать пункты для показа в меню можно на странице редактирования ресурса на вкладке «Общие». галочка «Показывать в меню».

  • &showCurrentCrumb — показывать в цепочке пункт с  названием текущей страницы.
    Возможные значения 0 - не показывать | 1 - показывать.
    По умолчанию: 1.

    Примечание: с помощью этого параметра можно отключить отображение последнего пункта в цепочке.

  • &currentAsLink — отображать пункт текущей страницы в виде ссылки или в текстовом виде.
    Возможные значения 0 - текст | 1 - ссылка.
    По умолчанию: 0.

    Примечание: по умолчанию этот параметр отображает пункт текущей страницы в виде простого текста, если вы захотите отобразить пункт в виде ссылки на текущую страницу, выставьте значение 1.

  • &linkTextField — название пунктов в цепочке навигации.
    По умолчанию: menutitle или pagetitle.
    Возможные значения: description | longtitle | pagetitle | menutitle.

    Примечание: от этого параметра зависит, какое поле будет браться для формирования названия пунктов цепочки навигации. По умолчанию название пункта цепочки будет совпадать с названием пункта меню, которое можно изменить на странице редактирования ресурса в поле «Пункт меню».

  • &linkDescField — атрибут title для ссылок в цепочке навигации.
    По умолчанию: description.
    Возможные значения: pagetitle, longtitle, description, menutitle.

    Примечание:
    значение атрибута title всплывает при наведении мышки на ссылку в цепочке навигации. По умолчанию берется значение поля «Описание», которое можно изменить на странице редактирования ресурса.

  • &showCrumbsAsLinks — пункты цепочки навигации являются ссылками или текстом.
    Возможные значения: 0 - текст | 1 - ссылки.
    По умолчанию: 1.

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

  • &crumbGap — строка, которая будет представлять собой разрыв цепочки навигации.
    Возможные значения: строка.
    По умолчанию: многоточие «...».

    Примечание: вы можете указать какие символы будут разрывать цепочку навигации, если количество пунктов в цепочке больше указанного в &maxCrumbs значения.

  • &stylePrefix — приставка в названиях CSS классов.
    Возможные значения: строка.
    По умолчанию: B_.

    Примечание: значение этого параметра определяет префикс в названии CSS классов. Чуть выше мы уже отметили, какие классы используются при выводе HTML разметки и за что они отвечают.

Настройки для ссылки на главную страницу:

  • &showHomeCrumb — отображать ссылку на главную страницу.
    Возможные значения: 0 - не отображать | 1 - отображать.
    По умолчанию: 1.

    Примечание: по умолчанию в начале цепочки навигации отображается ссылка на главную страницу, даже если ее нет в иерархии текущего документа.

  • &homeId — идентификатор страницы, которая будет считаться главной.
    Возможные значения: целое число.
    По умолчанию: $modx->config['site_start'].

    Примечание: по умолчанию главной страницей будет считаться та, идентификатор которой указан на странице системной конфигурации в поле «Первая страница».

  • &homeCrumbTitle — текст пункта главной страницы в цепочке навигации.
    Возможные значения: строка.
    По умолчанию: menutitle или pagetitle.

    Примечание: использовать этот параметр вы можете в том случае, когда захотите, чтобы текст пункта главной страницы отличался от названия пункта меню главной страницы или заголовка страницы, которые можно изменить при редактировании ресурсов. Например, некоторые разработчики вписывают вместо названия «Главная страница» в цепочке навигации название домена.

  • &homeCrumbDescription — пользовательский текст, который может быть использован в качестве атрибута title для ссылки на главную страницу.
    Возможные значения: строка.
    По умолчанию: значение, указанное в параметре linkDescField.

    Примечание: если поле оставить пустым, то текст для атрибута title будет определяться параметром &linkDescField. При желании можете вписать текст, который всплывет при наведении курсора на ссылку. Например, «Перейти на главную страницу»

Настройки для отображения цепочки навигации на различных страницах:

  • &showCrumbsAtHome — отображать цепочку навигации на главной странице.
    Возможные значения: 0 - не отображать | 1 - отображать.
    По умолчанию: 1.

    Примечание: с помощью этого параметра можно отключить показ цепочки навигации на главной странице.

  • &hideOn — не отображать цепочку навигации на страницах
    Возможные значения: разделенные запятыми идентификаторы страниц, на которых не должна отображаться цепочка навигации.

    Примечание: этот параметр удобно использовать для небольшого количества страниц, на которых в качестве исключения не нужен вывод строки навигации. Если же таких страниц много, то лучше воспользоваться параметром &hideUnder либо подумать над созданием еще одного шаблона.

  • &hideUnder — не отображать цепочку навигации на дочерних страницах
    Возможные значения: разделенные запятыми идентификаторы папок, на дочерних документах которых не должна отображаться строка навигации.

    Примечание: указание ID папок скрывает строку навигации только на дочерних страницах. Если вы хотите, чтобы строка не отображалась как на дочерних, так и на родительских страницах, добавьте ID родительских ресурсов как в &hideUnder так и в &hideOn.

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

В принципе, в нашем случае вывод строки навигации мы могли бы оставить по умолчанию, не передавая никаких параметров. По внешнему виду она соответствует тому, что было задумано в шаблоне. Но так как мы с вами хотим как можно подробнее разобрать сниппет Breadcrumbs, то потренируемся передавать дополнительные параметры во время вызова сниппета.

Давайте выведем цепочку навигации, у которой текст ссылки на главную страницу будет «Главная», при наведении мышки на ссылку главной страницы будет всплывать надпись «Перейти на главную страницу», атрибут title для всех остальных ссылок будет подставляться из поля «Расширенный заголовок». Остальные все значения параметров оставим по умолчанию.

В результате вызов сниппета с передаваемыми параметрами и их значениями должен представлять из себя вот такую конструкцию:

[[Breadcrumbs?  &homeCrumbDescription=`Перейти на главную страницу` &linkDescField=`longtitle`]]

Вот как будет выглядеть получившаяся цепочка навигации:

Итоговый вид цепочки навигации

Теперь я бы еще посоветовал вам изменить внешний вид цепочки навигации в CSS стилях. Давайте сделаем так, чтобы ссылки отличались от обычного текста. Сделаем ссылки подчеркнутыми, а при наведении курсора на ссылку — без подчеркивания. Для этого мы идем редактировать CSS-файл, который лежит в директории:

assets/templates/site/styles/layout.css

Находим в этом файле стили, отвечающие за отображение блока BreadCrumb (в 114 строке).

/* ----------------BreadCrumb--------------*/

#breadcrumb{
	padding:20px 0;
	}

#breadcrumb ul{
	margin:0;
	padding:0;
	list-style:none;
	}

#breadcrumb ul li{display:inline;}
#breadcrumb ul li.current a{text-decoration:underline;}

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

После изменения у вас этот блок в CSS-файле должен выглядеть вот так:

#breadcrumb{padding:20px 0;}
#breadcrumb a{text-decoration:underline;}
#breadcrumb a:hover{text-decoration:none;}

После обновления страницы внешний вид нашей цепочки навигации изменится, но незначительно. Ссылки будут подчеркнуты.

Теперь можно подводить итог урока. Вы в подробностях ознакомились со встроенным сниппетом Breadcrumbs и научились применять его на практике. Сейчас на нашем сайте на всех страницах, кроме главной, отображается симпатичная динамическая цепочка навигации. Если есть желание, вы можете поиграться с передачей параметров сниппету во время вызова и посмотреть на результаты его работы.

Так же вы можете посетить в Wiki страницу сниппета (на английском). На русском языке про Breadcrumbs подробнее, чем я описал, информации не встретил.

Во время урока мы внесли изменения в чанк BREADCRUMB и в CSS-файл  layout.css, при желании можете скачать их содержимое:

Еще вы можете посмотреть видео к этому уроку. Там показано, как сделать цепочку навигации с помощью сниппета Breadcrumbs.

Автор: Ефимов Виктор

Вы можете также посмотреть другие уроки по созданию сайта на MODx:

08.07.2010
top


blog comments powered by Disqus
Рубрики
3 месяца отличного хостинга бесплатно
Система Orphus