Урок 6. Создание ленты новостей. Сниппет pdoPage
Скачать материалы к учебному курсу — папка distr_MODx.zip
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>
<h3><a href=»[[~[[+id]]]]» title=»[[+pagetitle]]»>[[+pagetitle]]</a></h3>
<div><span>[[+publishedon:date=`%d.%m.%Y`]]</span> [[+introtext]] </div>
<div ><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 h3 {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. Для разбиения на страницы новостей мы подготовили код сниппета, который даст необходимый нам результат. Значение всех приведенных выше параметров изучите в документации по адресу
Скопируйте этот код и вставьте в содержимое ресурса Новости
[[!pdoPage?
&parents=`5`
&tpl=`news-article`
&limit=`2`
&tplPagePrevEmpty=`@INLINE <li><span> < </span></li>`
&tplPageNextEmpty=`@INLINE <li><span> > </span></li>`
&tplPageFirstEmpty=`@INLINE <li><span> Первая </span></li>`
&tplPageLastEmpty=`@INLINE <li><span> Последняя </span></li>`
&tplPagePrev=`@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> <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><a href="http://cy14010-modx.tw1.ru/novosti.html" target="_blank"> 1</a></li> <li><a href="http://cy14010-modx.tw1.ru/novosti.html?page=2" target="_blank" > 2</a></li> <li><a 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} /*белый цвет активного пункта*/
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 стили, как вам нравится. Мы привели один из возможных вариантов оформления.
pdoPage как замена getPage / Сниппеты / Modx Revolution / Технический блог веб-разработчика
Как и в случае с остальными сниппетами pdoTools, pdoPage отличается от своего предшественника getPage большей функциональностью, а именно: возможностью создания пагинации с пропуском страниц и поддержкой ajax из коробки. Кроме того, благодаря дополнительным параметрам, сниппет настраивается достаточно гибко.
Параметры в большинстве своём схожи.
Есть некоторые нюансы, но там где они присутствуют, будет написано, в чём именно они заключаются.
Основные параметры
| getPage (значение по умолчанию) | pdoPage (значение по умолчанию) | Применение |
|---|---|---|
|
&element=`getResources` |
&element=`pdoResources` |
Имя сниппета для вывода ресурсов. Для pdoPage, обычно используется pdoResources. В случае с getPage, обычно в качестве значения параметра передаётся — getResources. |
Дополнительные параметры
| getPage (значение по умолчанию) | pdoPage (значение по умолчанию) | Применение |
|---|---|---|
|
&limit=`10` |
&limit=`10` |
Здесь указывается сколько элементов будет показано на странице. Другими словами, исходя из этого значения, будет зависеть то, из скольких страниц будет состоять пагинация. |
|
&offset=`0` |
&offset=`0` |
Количество элементов, которые будут пропущены. |
| &page=`1` |
&page=`1` |
Номер страницы, которая передаётся для вывода по умолчанию. То есть в том случае, если не указано иное значение в url. |
| — |
&pageCountVar=`pageCount` |
Имя плэйсхолдера, в котором хранится общее количество страниц. getResources. |
| &pageVarKey=`page` |
&pageVarKey=`page` |
Имя GET переменной, в которой передаётся номер текущей страницы. |
| &totalVar=`total` |
&totalVar=`page. |
Имя плейсхолдера, в котором хранится общее количество результатов. |
| &pageNavVar=`page.nav` |
&pageNavVar=`page.nav` |
Имя плейсхолдера, в котором хранится вся пагинация. |
total`Параметры шаблонов
| getPage (значение по умолчанию) | pdoPage (значение по умолчанию) | Применение |
|---|---|---|
|
&pageNavTpl=`имя чанка` Доступные значения: <li[[+classes]]><a[[+classes]][[+title]] href=»[[+href]]»>[[+pageNo]]</a></li> |
&tplPage=`@INLINE <li><a href=»[[+href]]»>[[+pageNo]]</a></li>` |
Шаблон номера страницы в пагинации. |
|
&pageActiveTpl=`имя чанка` Доступные значения: <li[[+activeClasses]]><a[[+activeClasses:default= `class=»active»`]][[+title]] href=»[[+href]]»>[[+pageNo]]</a></li> |
&tplPageActive=`@INLINE <li><a href=»[[+href]]»>[[+pageNo]]</a></li>` |
Шаблон активного номера страницы в пагинации. |
|
&pageFirstTpl=`имя чанка` Доступные значения: <li><a[[+classes]][[+title]] href=»[[+href]]»>First</a></li> |
|
Шаблон первой страницы в пагинации. |
|
&pageLastTpl=`имя чанка` Доступные значения: <li><a[[+classes]][[+title]] href=»[[+href]]»>Last</a></li> |
&tplPageLast=`@INLINE <li><a href=»[[+href]]»>[[%pdopage_last]]</a></li>` |
Шаблон последней страницы в пагинации. |
|
&pagePrevTpl=`имя чанка` Доступные значения: <li><a[[+classes]][[+title]] href=»[[+href]]»><<</a></li> |
&tplPagePrev=`@INLINE <li><a href=»[[+href]]»>«</a></li>` |
Шаблон предыдущей страницы (стрелка влево). |
|
&pageNextTpl=`имя чанка` Доступные значения: <li><a[[+classes]][[+title]] href=»[[+href]]»>>></a></li> |
&tplPageNext=`@INLINE <li><a href=»[[+href]]»>»</a></li>` |
Шаблон следующей страницы (стрелка вправо). |
|
&pageNavOuterTpl=`имя_чанка` Доступные значения: [[+first]][[+prev]][[+pages]][[+next]][[+last]] |
&tplPageWrapper=`@INLINE <div><ul>[[+first]][[+prev]][[+pages]][[+next]][[+last]]</ul></div>` |
Шаблон, в котором определяется порядок отображения первой, предыдущей страницы, номерных страниц, а так же следующей и последней страницы. |
Пример вызова getPage
[[!getPage?
&element=`getResources`
&tpl=`blog_item`
&includeContent=`1`
&includeTVs=`image, gallery, video`
&limit=`3`
&pageNavOuterTpl=`wrapper_p`
&pageActiveTpl=`active_p`
&pageNavTpl=`page_p`
]]
Давайте разберём параметры сниппета:
&pageNavOuterTpl=`wrapper_p` — чанк-обёртка для вывода всех страниц.
Пример содержимого чанка:
<ul>[[+pages]]</ul>
&pageActiveTpl=`active_p` — чанк для вывода текущей страницы. Пример содержимого чанка:
<span>[[+pageNo]]</span>
&pageNavTpl=`page_p` — чанк ссылки на страницу. Пример содержимого чанка:
<a href=»[[+href]]»>[[+pageNo]]</a>
Напоминаю, что сниппет является обёрткой для getResources, поэтому в нём доступны параметры getResources. Так же доступен плэйсхолдер [[!+page.nav]], в котором собственно и хранится вся пагинация.
Параметры вызова pdoPage
Пример использования:
[[!pdoPage?
&element=`pdoResources`
&tpl=`blog_item`
&includeContent=`1`
&includeTVs=`image, gallery, video`
&limit=`3`
&tplPageWrapper=`@INLINE [[+pages]]`
&tplPageActive=`@INLINE <span>[[+pageNo]]</span>`
&tplPage=`@INLINE <a href="[[+href]]">[[+pageNo]]</a>`
]]
Если на странице указано 2 или более вызова данного сниппета, следующие параметры должны отличаться :
&pageVarKey=`another_page` — имя переменной, через которую будет передаваться номер страницы.
&pageNavVar=`another_pages` — имя плейсхолдера для вывода пагинации.
При вызове сниппета единожды, указывать их не обязательно, поскольку у них уже используется значение по умолчанию.
Boostrap 4 Plus MODX extra
Boostrap 4 Plus — это плагин MODX, расширяющий Boostrap 4 MODX extra дополнительными стилями CSS и полезными плагинами jQuery.
Расширение Bootstrap 4 MODX доступно бесплатно здесь.
Серия классов с пользовательскими наборами цветов. В этих примерах имя класса — это имя кнопки.
Стили берутся из утилит.css
Добавленочанка pdoPages для Bootstrap 4.
- pdopageB4PageWrapper
- pdopageB4PagePrev
- pdopageB4PagePrevEmpty
- pdopageB4PageNext
- pdopageB4PageNextEmpty
- pdopageB4Страница
- пдопажеб4пажеактиве
- pdopageB4PageFirst
- pdopageB4PageFirstEmpty
- pdopageB4PageLast
- pdopageB4PageLastEmpty
чанки pdoMenu, CSS и JS для Bootstrap 4.
Эти чанки также позволяют отображать подменю.
- pdomB4TplOuter
- pdomB4TplInner
- pdomB4TplInnerRow
- pdomB4ParentRow
- pdomB4Tpl
Пример
УСБ
Javascript
Фрагмент
Не забудьте добавить:
&outerClass=`navbar-nav xnav-submenu`
для включения CSS и JS.[[!pdoMenu? &родители=`46` &уровень=`5` &showHidden=`1` &showUnpublished=`1` &firstClass=`pdom-первый` &lastClass=`pdom-последний` &outerClass=`navbar-nav xnav-submenu` &rowClass=`элемент навигации` &tpl=`pdomB4Tpl` &parentClass=`раскрывающийся список` &tplOuter=`pdomB4TplOuter` &tplInner=`pdomB4TplInner` &tplInnerRow=`pdomB4TplInnerRow` &tplParentRow=`pdomB4ParentRow` ]]
Серия классов для легкой настройки форм bootsrap 4.
Стили берутся из утилит.css
Удалить радиус границы
form.x-formstyle-square
Стелс-заполнители
Светлые заполнители с более легким эффектом фокусировки.
form.x-заполнители-стелс
Таблица классов.
Стили берутся из утилит.css
Дисплей: таблица
.x-таблица
Дисплей: ячейка
.x-ячейка
Bootra
Фрагменты шаблонов для использования pdoMenu с Bootstrap 4, что позволяет быстро и легко настраивать вывод с помощью link_attributes TV.
b4PdoMenuTplParentRow
Если атрибут x-top-only=»true», выводить только верхнюю ссылку без раскрывающегося списка.
[[+обертка]]`]]
Пример вывода
С x-top-only=»true» вывод будет:
Вместо:
Скоро.
Отзывчивые, сортируемые, фильтруемые и перетаскиваемые макеты сетки (jQuery не требуется).
Muuri — это механизм компоновки JavaScript, который позволяет создавать все виды макетов и делать их адаптивными, сортируемыми, фильтруемыми, перетаскиваемыми и/или анимированными. По сравнению с тем, что там есть, Muuri представляет собой комбинацию Packery, Masonry, Isotope и Sortable.
Хотите увидеть это в действии? Посмотрите демо на сайте.
Адаптивные классы Bootstrap 4 можно использовать для переключения макетов в медиа-запросах.
http://haltu.github.io/muuri/
https://github.com/haltu/muuri
активы/компоненты/bootstrap4plus/libs/muuri/0.7.1/muuri.min.js активы/компоненты/bootstrap4plus/libs/muuri/0.7.1/muuri.js
JavaScript это все типа «Ты картинки уже сделал что ли?». Обнаружение, когда изображения были загружены.
https://github.com/desandro/imagesloaded/
активы/компоненты/bootstrap4plus/libs/4.14/imagesloaded.js активы/компоненты/bootstrap4plus/libs/4.14/imagesloaded.pkgd.js активы/компоненты/bootstrap4plus/libs/4.14/imagesloaded.pkgd.min.js
Легкая, чистая библиотека javascript для присоединения обратных вызовов к точкам останова.
https://github.com/thecreation/breakpoints-js
активы/компоненты/bootstrap4plus/libs/точка останова/1.0.5/ активы/компоненты/bootstrap4plus/libs/breakpoint/1.
