. При этом первый элемент цепочки обозначен классом
first, а текущий —
current. Чтобы сделать динамическую цепочку навигации мы удаляем этот список и на его место вставляем конструкцию вызова сниппета
Breadcrumbs. После чего чанк
BREADCRUMB будет содержать в себе следующий код:
Внимание: в конструкции вызова сниппета имя должно быть написано точно так же, как на странице в администраторской панели: Элементы → Управление элементами → Сниппеты. Это значит, что если вы напишите с маленькой буквы, либо все буквы будут заглавными, то вызов сниппета осуществлен не будет.
Вы можете посмотреть, что получилось после сохранения изменений в чанке. В браузере на всех страницах, кроме главной будет отображаться динамическая цепочка навигации. Вот как она будет выглядеть на странице
Услуги, рис. 10.1.
Рис. 10.1
Как вы видите, вывод цепочки навигации можно сделать за несколько секунд, для этого необходимо в нужном месте вызвать специальный сниппет. Но это еще не все, мы же говорим о MODx, а эта система дает вам доступ к любому тегу на странице. Поэтому сейчас мы рассмотрим специальные параметры, которые вы сможете передавать сниппету Breadcrumbs, чтобы иметь полный доступ к оформлению цепочки навигации.
Напомню, что передача параметров сниппету осуществляется с помощью следующей конструкции:
[[Breadcrumbs? &имя_параметра1=`значение` &имя_параметра2=`значение`]]
Мы уже пользовались подобным синтаксисом при передаче параметров сниппету Wayfinder на уроке о реализации динамического меню.
10.2. Параметры Breadcrumbs
Общие настройки:
&maxCrumbs — максимальное число пунктов в цепочке.
Возможные значения: целое число.
По умолчанию: 100.
Примечание: если установлено число меньше возможного количества пунктов, то посредине цепочки появится многоточие «...» вместо лишних пунктов.
&respectHidemenu — скрывать пункты, не помеченные для показа в меню.
Возможные значения: 0 - отображать | 1 - скрывать.
По умолчанию: 1.
Примечание: включать и отключать пункты для показа в меню можно на странице редактирования ресурса на вкладке Общие. галочка Показывать в меню.
&showCurrentCrumb — показывать в цепочке пункт с названием текущей страницы.
Возможные значения 0 - не показывать | 1 - показывать.
По умолчанию: 1.
Примечание: с помощью этого параметра можно отключить отображение последнего пункта в цепочке.
¤tAsLink — отображать пункт текущей страницы в виде ссылки или в текстовом виде.
Возможные значения 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, то потренируемся передавать дополнительные параметры во время вызова сниппета.
10.3. вызова сниппета Breadcrumbs
Давайте выведем цепочку навигации, у которой текст ссылки на главную страницу будет
Главная, при наведении мышки на ссылку главной страницы будет всплывать надпись
Перейти на главную страницу, атрибут
title для всех остальных ссылок будет подставляться из поля
Расширенный заголовок. Остальные все значения параметров оставим по умолчанию.
В результате вызов сниппета с передаваемыми параметрами и их значениями должен представлять собой вот такую конструкцию:
[[Breadcrumbs? &homeCrumbDescription=`Перейти на главную страницу` &linkDescField=`longtitle`]]
Вот как будет выглядеть получившаяся цепочка навигации, рис.10.2.
Рис. 10.2
Теперь я бы еще посоветовал вам изменить внешний вид цепочки навигации в CSS стилях. Давайте сделаем так, чтобы ссылки отличались от обычного текста. Сделаем ссылки подчеркнутыми, а при наведении курсора на ссылку — без подчеркивания. Для этого мы идем редактировать CSS-файл, который лежит в директории:
assets/templates/site/styles/layout.css
Находим в этом файле стили, отвечающие за отображение блока
BreadCrumb (в 114 строке).
01 /* ----------------BreadCrumb--------------*/
02
03 #breadcrumb{
04 padding:20px 0;
05 }
06
07 #breadcrumb ul{
08 margin:0;
09 padding:0;
10 list-style:none;
11 }
12
13 #breadcrumb ul li{display:inline;}
14 #breadcrumb ul li.current a{text-decoration:underline;}
Так как список, с помощью которого была реализована строка навигации, мы удалили, то смело удаляем и стили для них. Единственное, для чего нам надо оставить стиль, — для ссылок.
После изменения у вас этот блок в CSS-файле должен выглядеть вот так:
1 #breadcrumb{padding:20px 0;}
2 #breadcrumb a{text-decoration:underline;}
3 #breadcrumb a:hover{text-decoration:none;}
После обновления страницы внешний вид нашей цепочки навигации изменится, но незначительно. Ссылки будут подчеркнуты.
10.4. итоги
Теперь можно подводить итог урока. Вы в подробностях ознакомились со встроенным сниппетом Breadcrumbs и научились применять его на практике. Сейчас на нашем сайте на всех страницах, кроме главной, отображается симпатичная динамическая цепочка навигации.
10.5. Контрольные задания
-
Какой сниппет позволяет создать навигационную цепочку "хлебные крошки"?
Как передать параметры сниппету?
Как изменить внешний вид цепочки навигации?
Задание 11
Создание ленты новостей. Сниппет Ditto
цели занятия
освоение методов создания ленты новостей;
знакомство со сниппетом Ditto;
Форма организации занятия
Фронтальная.
Студент должен знать
методы создания ленты новостей,
параметры сниппетом Ditto.
Студент должен уметь
выполнять лабораторно-практическое задание №10,
создавать новостную ленту.
Обеспеченность
компьютер с доступом в Интернет,
настоящий курс лабораторно-практических работ.
Практическое задание
На прошлом уроке мы с вами научились создавать навигационную цепочку для сайта. И, в принципе, если вы дошли до этого урока, у вас уже есть вполне рабочий, немного ограниченный в своей функциональности сайт-визитка. Теперь я буду постепенно рассказывать, как вашему сайту добавить различный функционал. Сегодня мы поговорим о выводе новостей на страницах вашего сайта. А в следующих уроках научимся создавать форму обратной связи и разберемся с организацией дополнительного вспомогательного меню.
Итак, не будем отвлекаться, и сразу приступаем к организации новостной ленты в MODx.
11.1. создание страниц с новостями
Для того, чтобы нам было что выводить, мы должны сперва создать несколько страниц с новостями, поэтому заходим в администраторскую панель сайта и в дереве документов MODx создаем несколько дочерних ресурсов для пункта Новости. Если вы помните, этот пункт мы создали по ходу 5 урока. Этот пункт не отмечен для показа в меню, но нас пока это устраивает.
Дочерние ресурсы можно создать двумя способами:
Нажимаем на пиктограмму Новый ресурс и на вкладке с общими настройками, изменяя значение параметра Папка, указываем родительский ресурс для создаваемой страницы.
В
дереве документов нажимаем любой кнопкой мыши на пиктограмму, расположенную около названия ресурса, для которого нам необходимо создать дочернюю страницу (кликаем мышкой именно на пиктограмму, а не на текст), после чего появится контекстное меню данного пункта. В контекстном меню выбираем Дочерний ресурс, рис. 11.1.
Помимо создания дочернего ресурса, в этом контекстом меню доступно еще много полезных функций. Например, вы можете перейти к редактированию ресурса, переместить его в другую папку в дереве документов, сделать копию, опубликовать или отменить публикацию, удалить или восстановить ресурс. Одним словом, контекстное меню очень полезно, и я очень рекомендую не забывать о нем и, при необходимости, пользоваться.
Рис. 11.1
Рис. 11.2
Я не буду подробно описывать процесс создания дочерних ресурсов, об этом мы говорили на 5 уроке. В качестве примера приведу изображение, на котором показано, как я заполнил поля при создании ресурса с первой новостью, рис. 11.2. Все остальные дочерние ресурсы будут создаваться аналогично.
Создайте несколько дочерних ресурсов, например, 5 новостей, чтобы нам было с чем работать. Все они должны быть опубликованы (установлена галочка
Публиковать на вкладке
Настройка страницы).
После создания дочерних ресурсов дерево ресурсов примет следующий вид, рис. 11.3.
Рис. 11.3
11.2. сниппет ditto
Выводить новости на странице мы будем с помощью встроенного сниппета Ditto. Это очень мощный инструмент, и он, наверное, является одним из основных встроенных решений в MODx. С помощью Ditto можно выводить ресурсы, созданные в дереве документов, абсолютно в любом виде на сайте. Такая гибкость достигается за счет работы с шаблонами вывода.
С помощью этого сниппета можно реализовать: вывод статей и новостей на сайте, вывод заметок в блоге, архив статей, RSS ленту, вывод данных в XML формате и еще много полезного. Одним словом, это очень функциональный сниппет и мы с ним будем сталкиваться еще не раз.
Ditto имеет очень большой набор параметров, передавая которые во время вызова сниппета, мы можем изменять результат его работы. Для того, чтобы уделить внимание каждому параметру, придется потратить много времени, поэтому на этом уроке мы не ставим цель досконально разобрать все возможные параметры, а коснемся лишь тех, использование которых нам необходимо для выполнения поставленной задачи.
Итак, вызов сниппета осуществляется стандартно. Конструкция нам уже знакома:
[[Ditto? &параметр1=`значение` &параметр2=`значение`]]
Вызывать сниппет мы будем непосредственно на странице
Новости в области содержимого страницы.
Давайте попробуем сначала вызывать Ditto без передаваемых параметров и посмотрим на результат. Для этого в область визуального редактора страницы
Новости вставляем конструкцию:
[[Ditto]]
После сохранения вы можете посмотреть, что получилось, нажав на кнопку
Просмотр в правом верхнем углу страницы либо выбрав из контекстного меню ресурса
Новости пункт
Просмотр.
Результатом работы этого сниппета будет вывод созданных нами новостей в следующем виде, рис. 11.4.
Рис. 11.4
Как мы видим из рисунка, у нас вывелись все дочерние ресурсы для страницы
Новости. При выводе использовались поля:
Заголовок,
Аннотация, а также в полученном результате мы видим дату публикации и имя автора, создавшего документ. В качестве даты публикации берется дата создания ресурса, а
Default admin account — это имя администратора сайта по умолчанию. При этом заголовок каждой новости представляет собой ссылку на страницу с новостью.
Согласитесь, что даже вызов сниппета без передачи параметров дает вполне неплохой результат вывода списка новостей. Но сейчас мы попытаемся изменить внешний вид нашей новостной ленты. Для этого нам придется познакомиться с некоторыми параметрами Ditto.
11.3. изменение внешнего вида новостной ленты
Прежде всего, мы должны научиться работать с шаблонами вывода информации, использование которых позволит нам без труда изменять внешний вид новостной ленты. В качестве шаблона Ditto может использоваться созданный для этих целей чанк.
Отправляемся на страницу с чанками:
Элементы → Управление элементами → Чанки, и создаем новый чанк с любым понятным нам именем, например,
news-article. Он будет в дальнейшем служить шаблоном вывода каждой новости на нашем сайте. В шаблон мы будем помещать название, краткое содержание новости и дату публикации, при этом заголовок должен быть ссылкой на страницу с новостью.
Обратите внимание, что в коде шаблона
Ditto мы можем использовать как специальные теги ресурсов MODx, описанные в 8 уроке, так и специальные теги
Ditto.
Нам понадобятся следующие теги:
[+longtitle+] или [+pagetitle+] — для вывода заголовка новости
[+date+] — для вывода даты публикации
[+introtext+] — для вывода краткого содержания новости
В недавно созданный нами чанк
news-article помещаем выше упомянутые теги, пока без какой-либо HTML разметки:
[+date+][+pagetitle+][+introtext+]
А на странице Новости вызываем сниппет
Ditto, с указанием названия чанка, который будет использоваться в качестве шаблона. При этом конструкция вызова сниппета примет следующий вид:
[[Ditto? &tpl=`news-article`]]
Где, как вы, наверное, уже догадались, параметр
&tpl служит для указания названия чанка, используемого в качестве шаблона.
После этого при просмотре страницы
Новости вы сможете увидеть ленту новостей, выведенную без пробелов и без разметки, рис. 11.5. Точно так, как было указано в нашем шаблоне
news-article.
Рис. 11.5
Но такой вывод никуда не годится, поэтому мы отправляемся дальше редактировать чанк
news-article. Нам необходимо с помощью HTML разметки отделить дату, заголовок и краткое описание.
Содержимое чанка после редактирования:
