pdoNeighbors — документация и примеры вывода соседних документов в MODX Revo

Пожалуй самый простой способ вывести соседние документы в MODX Revolution, это воспользоваться сниппетом pdoNeighbors, который входит в состав пакета pdoTools. При этом он умеет выводить по несколько соседей сразу, проверяет их статус (удалён, опубликован) и позволяет указать сортировку.

Вы можете выводить предыдущие/следующие документы по «menuindex», дате публикации или другому полю ресурса. Чаще всего такой функционал реализуют в блоге.

Параметры

Принимает все параметры pdoTools (за исключением чанков-шаблонов) и некоторые свои:

Шаблоны

Примеры из документации

По умолчанию сниппет выводит соседей, как они есть в дереве ресурсов, то есть, ориентируется на «menuindex»:

[[pdoNeighbors]]

Получим примерно следующее.

К стати в текущем шаблоне на bootstrap 5 — все выглядит адекватно)

По умолчанию, соседи выбираются от текущего документа, но можно указать и другой id:

[[pdoNeighbors?
    &id=`55`
]]

Сниппет отлично подходит для вывода ссылок на соседние новости (их лучше сортировать по дате публикации):

[[pdoNeighbors?
    &sortby=`publishedon`
    &sortdir=`asc`
]]

Получение соседних товаров с выводом превью:

{'!pdoNeighbors' | snippet : [
    'snippet' => 'msProducts',
    'sortby' => 'publishedon',
    'sortdir' => 'ASC',
    'leftJoin' => '{ "thumbs": { "class":"msProductData","alias":"thumbs", "on": "thumbs.id = modResource.id" }}',
    'select' => '{ "thumbs":"thumbs.thumb as small" }',
    'tplWrapper' => '@INLINE {$prev}',
    'tplPrev' => '@FILE chunks/product/item_prev.tpl',
]}

Вывод соседних документов в MODX Revo при помощи pdoNeighbors на реальном примере.

В нашем случае не нужна ссылка на категорию (которая в середине), следовательно простейший вывод будет таким:

[[pdoNeighbors? 
    &sortby=`publishedon` 
    &sortdir=`asc` 
    &tplWrapper=`@INLINE <div class="neighbors">[[+prev]][[+next]]</div>` 
]]

Здесь уже ссылки слиплись, чтобы правая была прижата к краю немного добавить css, к примеру так:

span.link-next{float:right}

Красивый вывод предыдущих и следующих статей в блоге

Усложняем задачу. Сделаем симпатичный вызов, с превью изображений из статей блога с использованием css от bootstrap 5 (и под 4-ю версию скорее всего пойдет).

Приблизительная HTML разметка блока:

<div class="row border-top pt-3"> 
    <div class="col-6 border-end"> 
        <a href="#" class="link-dark text-decoration-none"> 
            <div class="row"> 
                <div class="col-md-6">
                    <img class="img-fluid" src="#">
                    <p class="fw-bold mb-0">« Предыдущая статья</p>
                </div> 
                <div class="col-md-6 d-none d-md-block">
                    <p class="d-none d-md-block">Название предыдущей статьи</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-6">
        <a href="#" class="link-dark text-decoration-none">
            <div class="row text-end">
                <div class="col-md-6 d-none d-md-block">
                    <p class="d-none d-md-block">Название следующей статьи</p>
                </div>
                <div class="col-md-6">
                    <img class="img-fluid" src="#">
                    <p class="fw-bold">Следующая статья »</p>
                </div>
            </div>
        </a>
    </div>
</div>

Сделаем данный код динамическим:

Разобьем этот код на 2 чанка (1й вывод предыдущего документа — neighborsPrev и 2й вывод следующего документа — neighborsNext) — для тех кто работает на файлах у вас будут файлы-чанки имя.tpl.

Код первого чанка (neighborsPrev) станет таким:
— fenom:

<div class="col-6 border-end"> 
    <a href="{$uri}" class="link-dark text-decoration-none"> 
        <div class="row"> 
            <div class="col-md-6">
                <img class="img-fluid" src="{$img | pthumb : 'w=180&h=80&zc=1'}">
                <p class="fw-bold mb-0">« Предыдущая статья</p>
            </div> 
            <div class="col-md-6 d-none d-md-block">
                <p>{$pagetitle}</p>
            </div>
        </div>
    </a>
</div>

— modparser:

<div class="col-6 border-end"> 
    <a href="[[+uri]]" class="link-dark text-decoration-none"> 
        <div class="row"> 
            <div class="col-md-6">
                <img class="img-fluid" src="[[+img:pthumb=`w=273&h=160&zc=1`]]">
                <p class="fw-bold mb-0">« Предыдущая статья</p>
            </div> 
            <div class="col-md-6 d-none d-md-block">
                <p>[[+pagetitle]]</p>
            </div>
        </div>
    </a>
</div>

Важно! Полноценные картинки превращает в превью плагин pthumb — следовательно он должен быть установлен.

Код второго чанка (neighborsNext) сделайте самостоятельно по аналогии с первым — разметка выше, все выводимые поля те же.

Ну и теперь выводим все это добро:

fenom:

{'pdoNeighbors' | snippet : [
    'sortby' => 'publishedon',
    'sortdir' => 'asc',
    'includeTVs' => 'img',
    'tvPrefix' => '',
    'tplWrapper' => '@INLINE <div class="row border-top pt-3">{$prev}{$next}</div>',
    'tplPrev' => '@FILE chunks/blog/neighborsPrev.tpl',
    'tplNext' => '@FILE chunks/blog/neighborsNext.tpl',
    'sortdir' => 'ASC'
]}

modparser:

[[pdoNeighbors? 
    &sortby=`publishedon`
    &sortdir=`asc` 
    &includeTVs=`img`
    &tvPrefix=``
    &tplWrapper=`@INLINE <div class="row border-top pt-3">[[+prev]][[+next]]</div>` 
    &tplPrev=`neighborsPrev` 
    &tplNext=`neighborsNext`  
]]

В итоге получаем уже рабочий блок.