Уроки MODx Revolution
Скачать материалы к учебному курсу - папка distr_MODx.zip
Урок 6. Создание ленты новостей. Сниппет pdoPage
1. Для ресурса Новости отключите флажок Скрыть из меню, если он до сих пор включен, чтобы пункт Новости отобразился в верхнем меню на сайте.
2. Для вывода новостей мы должны сперва создать несколько страниц с новостями, поэтому в дереве документов MODx создайте несколько дочерних ресурсов для пункта Новости.
Дочерние ресурсы можно создать разными способами:
1-й способ. Рядом с названием ресурса, внутри которого хотим создать еще ресурсы, нажимаем на пиктограмму со значком +
Рисунок 6.1
2-й способ. Нажимаем правой кнопкой мыши по родительскому ресурсу, и в контекстном меню выбираем команду Создать – Документ.
Рисунок 6.2
Помимо создания дочернего ресурса, в этом контекстом меню доступно еще много полезных функций. Например, Вы можете перейти к редактированию ресурса, переместить его в другую папку в дереве документов, сделать копию, опубликовать или отменить публикацию, удалить или восстановить ресурс. Одним словом, контекстное меню очень полезно, и мы рекомендуем не забывать о нем и, при необходимости, пользоваться.
3. Создайте дочерний ресурс Первая новость в разделе Новости. Заполните поля для ресурса с первой новостью.
Рисунок 6.3
4. Создайте несколько дочерних ресурсов, например, 5 новостей, копированием первой новости (кнопка Копировать на верхней панели в окне редактирования ресурса), чтобы нам было с чем работать. Все они должны быть опубликованы – установлена галочка Опубликован на вкладке Документ.
5. Измените содержимое каждой новости в зависимости от номера новости. После создания дочерних ресурсов дерево ресурсов примет следующий вид:
Рисунок 6.4
Выводить новости на странице мы будем с помощью сниппета pdoPage, который выводит ресурсы, созданные в дереве документов, абсолютно в любом виде на сайте. Такая гибкость достигается за счет работы с шаблонами вывода.
С помощью этого сниппета можно реализовать: вывод статей и новостей на сайте, вывод заметок в блоге, архив статей, RSS ленту, вывод данных в XML формате и еще много полезного. Одним словом, это очень функциональный сниппет.
pdoPage имеет очень большой набор параметров, передавая которые во время вызова сниппета, мы можем изменять результат его работы. Для того, чтобы уделить внимание каждому параметру, придется потратить много времени, поэтому в данном уроке мы не ставим цель досконально разобрать все возможные параметры, а коснемся лишь тех, использование которых нам необходимо для выполнения поставленной задачи.
Документацию по сниппету pdoPage можно посмотреть по адресу https://docs.modx.pro/
Итак, вызов сниппета осуществляется стандартно. Конструкция нам уже знакома:
[[pdoPage? &параметр1=`значение` &параметр2=`значение`]]
Вызывать сниппет мы будем непосредственно на странице Новости в области содержимого страницы.
6. Давайте попробуем сначала вызывать pdoPage без передаваемых параметров и посмотрим на результат. Для этого в области визуального редактора страницы Новости во вкладке Настройки сбросьте флажок Использовать HTML-редактор.
Рисунок 6.5
7. После этого сохраните ресурс, обновите окно браузераи вставьте конструкцию:
[[pdoPage]]
8. После сохранения Вы можете посмотреть, что получилось, обновив страницу в браузере. Результатом работы этого сниппета без параметров будет вывод пяти новостей, но в виде массивов Array.
Рисунок 6.6
Т.е. без параметров использовать сниппет pdoPage не получится. Нужен, как минимум шаблон, по которому будут оформлены результаты работы сниппета.
9. Добавьте шаблон в параметры, для этого скопируйте нижеприведенный код в окно содержимого ресурса Новости.
[[pdoPage? &tpl=`news-article`]]
Рисунок 6.7
10. В этом коде используется шаблон news-article в строке &tpl=`news-article`
Создайте новую категорию Новости.
Рисунок 6.8
Создайте чанк с именем news-article, присвойте ему категорию Новости и скопируйте в него следующий код
<div id="news">
<h2><a href="[[~[[+id]]]]" title="[[+pagetitle]]">[[+pagetitle]]</a></h2>
<div class="introtext"><span class="date">[[+publishedon:date=`%d.%m.%Y`]]</span> [[+introtext]] </div>
<div class="readmore" ><a href="[[~[[+id]]]]" title="Перейти к полному тексту новости">Читать дальше ></a></div>
</div>
Рисунок 6.9
Вы уже работали со специальными тегами MODx, поэтому все приведенные специальные теги в чанке news-article должны быть понятны, за исключением конструкции +publishedon:date=`%d.%m.%Y` Дело в том, что каждый специальный тег можно модифицировать, для этого после имени тега ставится двоеточие и дальше идут команды модификации. В данном примере мы форматируем дату под привычный нам вид.
11. Обновите страницу Новости в браузере. Вывод новостей теперь выглядит следующим образом.
Рисунок 6.10
12. Немного добавим стилей. Для этого в файл layout.css скопируйте следующие стили:
/* ------------News ------------*/
#news {padding:0; margin:0 0 15px 0;} /* отступы между новостями */
#news h2 {padding:0px; margin:0px; border:none} /* заголовок новости без отступов и без подчеркивания снизу */
#news .introtext{padding:5px 0 0 0} /*отступ области с кратким описанием и датой */
#news .introtext .date {font-weight:bold;} /* дата публикации, выделяется жирным шрифтом */
#news .readmore {text-align:right} /* выравнивание по правому краю Читать дальше */
Не забывайте, если на сайте не видны изменения, то надо обновить страницу через клавиши Ctrl+F5, т.е. в обход кэша браузера. После добавления стилей страница с новостями выглядит вот так (даты, понятно, будут другими):
Рисунок 6.11
13. При этом дата, указанная в ленте новостей – это дата создания ресурса. Вы можете изменить эту дату на вкладке Настройки у ресурса в поле Дата публикации или в поле Опубликован.
Рисунок 6.12
14. Установите разные даты для новостей. Измените расширенный заголовок ресурса Новости на Новости нашей компании.
Окончательный вид страницы с новостями представлен ниже.
Рисунок 6.13
Постраничное разбиение новостной ленты
Как быть, если у Вас создано много новостей и вывод краткого описания для всех них занимает очень много места на странице. Чтобы добраться до последней новости в таком случае придется пользователю изрядно покрутить колесо мыши или воспользоваться полосой прокрутки на сайте. Это не самый удобный в плане юзабилити вариант. Для того, чтобы отображать список новостей более компактно, мы будем использовать постраничное разбиение ленты новостей. Это очень распространенный прием предоставления информации и, Вы, наверняка, на многих сайтах с ним встречались. Но то, что мы будем разбивать ленту новостей на страницы, не значит, что вам придется для каждой страницы с новостями создавать ресурс и в ручную прописывать ссылки, все гораздо проще: за вас это автоматически будет делать pdoPage.
17. Для разбиения на страницы новостей мы подготовили код сниппета, который даст необходимый нам результат. Значение всех приведенных выше параметров изучите в документации по адресу https://docs.modx.pro/
Скопируйте этот код и вставьте в содержимое ресурса Новости
[[!pdoPage?
&parents=`5`
&tpl=`news-article`
&limit=`2`
&tplPagePrevEmpty=`@INLINE <li class="disabled"><span> < </span></li>`
&tplPageNextEmpty=`@INLINE <li class="disabled"><span> > </span></li>`
&tplPageFirstEmpty=`@INLINE <li class="disabled"><span> Первая </span></li>`
&tplPageLastEmpty=`@INLINE <li class="disabled"><span> Последняя </span></li>`
&tplPagePrev=`@INLINE <li><a href="[[+href]]"> < </a></li>`
&tplPageNext=`@INLINE <li><a href="[[+href]]"> > </a></li>`
&tplPageFirst=`@INLINE <li><a href="[[+href]]"> Первая </a></li>`
&tplPageLast=`@INLINE <li><a href="[[+href]]"> Последняя </a></li>`
]]
[[!+page.nav]]
Рисунок 6.14
Отметим, что:
&limit=`2` – указывает количество ресурсов, выводимых на одной странице, в данном случае два ресурса
[[!+page.nav]] – вызов пагинации, т.е. разбиение на страницы.
Теперь наши новости выглядят вот так. Получилось три страницы и ссылки, которые ведут на первую, последнюю, следующую и предыдущую страницы.
Рисунок 6.15
18. Пагинация выглядит не очень хорошо, выводится в виде маркированного списка. Посмотрите исходный код страницы. Список пагинации выглядит сейчас вот так.
<ul class="pagination"> <li><a href="http://cy14010-modx.tw1.ru/novosti.html" target="_blank"> Первая </a></li> <li><a href=http://cy14010-modx.tw1.ru/novosti.html" target="_blank"> < </a></li> <li class="page-item"><a class="page-link" href="http://cy14010-modx.tw1.ru/novosti.html" target="_blank"> 1</a></li> <li class="page-item active"><a class="page-link" href="http://cy14010-modx.tw1.ru/novosti.html?page=2" target="_blank" > 2</a></li> <li class="page-item"><a class="page-link" href="http://cy14010-modx.tw1.ru/novosti.html?page=3" target="_blank" 3</a></li> <li><a href="http://cy14010-modx.tw1.ru/novosti.html?page=3" target="_blank"> > </a></li> <li><a href="http://cy14010-modx.tw1.ru/novosti.html?page=3" target="_blank" Последняя </a></li> </ul>
19. Т.е. нам в таблицу стилей надо добавить оформление класса pagination для списка ul.
Добавьте в файл layout.css следующие стили:
/* ------------Pagination ------------*/
.pagination li {display: inline; margin:5px;} /*расположение пунктов списка по линии и с отступами*/
.pagination a {text-decoration:none; background-color:transparent;} /*убрать фон и подчеркивание ссылок*/
.pagination a:hover {text-decoration:underline;} /*подчеркивание ссылок при наведении*/
.pagination li.active {background-color:#B2C629; border:1px solid#6f7b1a; padding: 1px 3px; font-weight:bold; } /*оформление текущей страницы: цвет фона, цвет и ширина границы, размер отступов, текст жирным шрифтом*/
.pagination li.active a {color: #fff} /*белый цвет активного пункта*/
После добавления стилей пагинация выглядит следующим образом.
Рисунок 6.16
При этом вы можете изменять цвета, отступы и все CSS стили, как вам нравится. Мы привели один из возможных вариантов оформления.