Постраничная навигация для MODX

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

Вначале устанавливаем следующие пакеты: getResources и getPage в Система - > управление пакетами -> Загрузить дополнения.

После делаем шаблон на котором будут генерироваться превьюшки Ваших статей / новостей / товаров (если настраиваете интернет-магазин)

<div class="content">
[ [!getPage?
&element=`getResources`
&parents=`17`
&tpl=`articleTpl`
&limit=`10`
&includeTVs=`1`
&pageFirstTpl=`<ul><li class="control"><a href="[ [+href]]" data-mce-href="[ [+href]]">Первая</a></li></ul>`
&pageLastTpl=`<ul><li class="control"><a href="[ [+href]]" data-mce-href="[ [+href]]">Последняя</a></li></ul>`
]]
<ul class="pagenav">[ [!+page.nav]]</ul> </div>

Теперь сделаем чанк articleTpl (то превью, которое будем получать):

<div class="post">
Дата публикации: [ [+publishedon]]
<h2><a href="[ [~[ [+id]]]]">[ [+pagetitle]]</a></h2>
[ [+introtext]]
</div>

Дальше для оформления навигации в основной css файл добавляем оформление:

.pagenav { float: right; clear: both; margin: 15px; }
.pagenav li { display: inline; margin-right: 5px; }
.pagenav li .active { font-size:105%; text-decoration:none; border: 2px solid #949494; border-radius: 5px; color: #1d8bce; }
.pagenav li a { padding: 5px; border: 2px solid #bebebe; border-radius: 5px; color: #1d8bce; font-weight: bold; }
.pagenav .control a{ text-decoration:none; }

Результатом нашей работы будет: