pdoNeighbors — навигация по соседним страницам в MODX

pdoNeighbors Дополнения
Автор На чтение 9 мин Просмотров 32 Опубликовано

Сниппет pdoNeighbors предназначен для вывода ссылок на предыдущие и следующие документы от указанного ресурса. Он умеет выводить по несколько соседей сразу, проверяет их статус (удален, опубликован, скрыт) и позволяет указать сортировку по любому полю. Основное применение — создание навигации между статьями блога, новостями, товарами каталога или любыми другими однотипными страницами.

Сниппет идеально подходит для улучшения пользовательского опыта, позволяя посетителям быстро переходить между материалами без возврата в список. Вы можете выводить соседние документы по menuindex (порядок в дереве), дате публикации или любому другому полю ресурса.

Содержание
  1. Параметры
  2. Шаблоны
  3. Примеры использования
  4. Доступные плейсхолдеры
  5. Более продвинутые примеры
  6. Базовый пример навигации
  7. Навигация с изображениями
  8. Использование с файловыми чанками
  9. Вызов через Fenom
  10. Вывод нескольких соседей
  11. Навигация с разделителями
  12. Отображение только при наличии соседей
  13. Стилизация навигации
  14. Навигация в карточках Bootstrap
  15. Работа с разными контекстами

Параметры

PdoNeighbors принимает все параметры pdoTools за исключением чанков-шаблонов, и добавляет несколько специфичных.

Параметр Значение по умолчанию Описание
&id ID текущей страницы Ресурс относительно которого выбирать соседей
&loop 1 Зацикливать вывод (последний → первый)
&sortby menuindex Поле для определения порядка соседей
&sortdir ASC Направление сортировки
&limit 1 Количество соседей с каждой стороны
&tplPrev — Чанк для предыдущего ресурса
&tplUp — Чанк для родительского ресурса
&tplNext — Чанк для следующего ресурса
&tplWrapper — Обертка с плейсхолдерами [[+prev]], [[+up]], [[+next]]
&toPlaceholder — Сохранить результат в плейсхолдер
&showLog 0 Показать лог работы
&showHidden 1 Включать скрытые ресурсы
&showUnpublished 0 Включать неопубликованные
&showDeleted 0 Включать удаленные
&where — Дополнительные условия выборки

Шаблоны

Шаблон По умолчанию
&tplPrev @INLINE <span class="link-prev"><a href="/[[+uri]]">&larr; [[+menutitle]]</a></span>
&tplUp @INLINE <span class="link-up">&uarr; <a href="/[[+uri]]">[[+menutitle]]</a></span>
&tplNext @INLINE <span class="link-next"><a href="/[[+uri]]">[[+menutitle]] &rarr;</a></span>
&tplWrapper @INLINE <div class="neighbors">[[+prev]][[+up]][[+next]]</div>

Примеры использования

Простейший вызов для вывода соседей текущей страницы:

[[pdoNeighbors]]

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

Вывод соседей для конкретного ресурса по ID:

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

Навигация по новостям с сортировкой по дате публикации:

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

Вывод нескольких соседних документов с каждой стороны:

[[pdoNeighbors? &limit=`3` &sortby=`publishedon` ]]

Параметр &showHidden показывает скрытые из меню ресурсы:

[[pdoNeighbors? &showHidden=`1` ]]

Параметр &showUnpublished включает неопубликованные страницы:

[[pdoNeighbors? &showUnpublished=`0` ]]

Параметр &where позволяет задать дополнительные условия фильтрации в JSON формате:

[[pdoNeighbors? &where=`{ "template:IN": [1,3,5] }` ]]

Параметр &includeTVs подключает TV-параметры для использования в шаблонах:

[[pdoNeighbors? &includeTVs=`image,tags` &tvPrefix=`` ]]

Параметр &tvPrefix определяет префикс для TV в плейсхолдерах. По умолчанию пустой для pdoNeighbors:

[[pdoNeighbors? &includeTVs=`image` &tvPrefix=`tv.` ]]

Доступные плейсхолдеры

В шаблонах pdoNeighbors доступны следующие плейсхолдеры:

  • [[+id]] — идентификатор ресурса
  • [[+pagetitle]] — заголовок страницы
  • [[+longtitle]] — расширенный заголовок
  • [[+menutitle]] — название в меню
  • [[+uri]] — URI ресурса
  • [[+link]] — полная ссылка на страницу
  • [[+introtext]] — краткое описание
  • Любые TV-параметры указанные в &includeTVs

В шаблоне обертки &tplWrapper доступны:

  • [[+prev]] — блок с предыдущими документами
  • [[+up]] — ссылка на родительский ресурс
  • [[+next]] — блок со следующими документами

Более продвинутые примеры

Базовый пример навигации

Простая навигация между статьями блога:

[[pdoNeighbors?
&sortby=`publishedon`
&sortdir=`ASC`
&tplWrapper=`@INLINE <div class="neighbors">[[+prev]][[+next]]</div>`
&tplPrev=`@INLINE <a href="[[+uri]]" class="link-prev">← Предыдущая статья</a>`
&tplNext=`@INLINE <a href="[[+uri]]" class="link-next">Следующая статья →</a>`
]]

Навигация с названиями статей:

[[pdoNeighbors?
&sortby=`publishedon`
&sortdir=`DESC`
&tplWrapper=`@INLINE <nav class="post-navigation">[[+prev]][[+next]]</nav>`
&tplPrev=`@INLINE 
<div class="nav-previous">
  <span class="meta-nav">← Предыдущая статья</span>
  <a href="[[+uri]]">[[+pagetitle]]</a>
</div>`
&tplNext=`@INLINE 
<div class="nav-next">
  <span class="meta-nav">Следующая статья →</span>
  <a href="[[+uri]]">[[+pagetitle]]</a>
</div>`
]]

Вывод соседних статей с превью изображениями:

[[pdoNeighbors?
&sortby=`publishedon`
&sortdir=`ASC`
&includeTVs=`image`
&tvPrefix=``
&tplWrapper=`@INLINE <div class="row border-top pt-3">[[+prev]][[+next]]</div>`
&tplPrev=`@INLINE 
<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="[[+image:pthumb=`w=273&h=160&zc=1`]]" alt="[[+pagetitle]]">
        <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>`
&tplNext=`@INLINE 
<div class="col-6">
  <a href="[[+uri]]" class="link-dark text-decoration-none">
    <div class="row">
      <div class="col-md-6 d-none d-md-block">
        <p>[[+pagetitle]]</p>
      </div>
      <div class="col-md-6">
        <img class="img-fluid" src="[[+image:pthumb=`w=273&h=160&zc=1`]]" alt="[[+pagetitle]]">
        <p class="fw-bold mb-0">Следующая статья »</p>
      </div>
    </div>
  </a>
</div>`
]]

В этом примере используется модификатор pthumb из пакета pthumb для создания миниатюр изображений.

Использование с файловыми чанками

Для удобства поддержки кода можно вынести шаблоны в отдельные файлы:

[[pdoNeighbors?
&sortby=`publishedon`
&sortdir=`ASC`
&includeTVs=`image`
&tvPrefix=``
&tplWrapper=`@FILE chunks/blog/neighborsWrapper.tpl`
&tplPrev=`@FILE chunks/blog/neighborsPrev.tpl`
&tplNext=`@FILE chunks/blog/neighborsNext.tpl`
]]

Содержимое файла chunks/blog/neighborsPrev.tpl:

<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="[[+image:pthumb=`w=273&h=160&zc=1`]]" alt="[[+pagetitle]]">
        <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>

Вызов через Fenom

Использование шаблонизатора Fenom для более чистого синтаксиса:

{'pdoNeighbors' | snippet : [
'sortby' => 'publishedon',
'sortdir' => 'ASC',
'includeTVs' => 'image',
'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'
]}

Преимущество Fenom в более понятном синтаксисе и отсутствии обратных кавычек.

Вывод нескольких соседей

PdoNeighbors может выводить не один, а несколько соседних документов с каждой стороны:

[[pdoNeighbors?
&limit=`3`
&sortby=`publishedon`
&sortdir=`DESC`
&tplWrapper=`@INLINE 
<div class="neighbors-multiple">
  <div class="prev-items">[[+prev]]</div>
  <div class="next-items">[[+next]]</div>
</div>`
&tplPrev=`@INLINE <a href="[[+uri]]" class="neighbor-item">[[+pagetitle]]</a>`
&tplNext=`@INLINE <a href="[[+uri]]" class="neighbor-item">[[+pagetitle]]</a>`
]]

Параметр &limit=3 выведет до 3 предыдущих и 3 следующих документа.

Добавление разделителя между несколькими соседями:

[[pdoNeighbors?
&limit=`5`
&sortby=`menuindex`
&outputSeparator=` | `
&tplPrev=`@INLINE <a href="[[+uri]]">[[+menutitle]]</a>`
&tplNext=`@INLINE <a href="[[+uri]]">[[+menutitle]]</a>`
]]

Параметр &outputSeparator добавляет указанную строку между соседними элементами.

Отображение только при наличии соседей

Условный вывод навигации только если есть соседние документы:

{set $neighbors = '!pdoNeighbors' | snippet : [
'sortby' => 'publishedon',
'tplWrapper' => '@INLINE {$prev}{$next}',
'toPlaceholder' => 'neighbors'
]}

{if $neighbors}
<nav class="post-navigation">
  {$neighbors}
</nav>
{/if}

Этот прием на Fenom позволяет не выводить пустой блок если нет предыдущих или следующих статей.

Стилизация навигации

CSS для базовой навигации между статьями:

.neighbors { display: flex; justify-content: space-between; margin: 40px 0; padding: 20px 0; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } .link-prev, .link-next { display: flex; align-items: center; gap: 10px; color: #0066cc; text-decoration: none; font-weight: 500; transition: color 0.3s; } .link-prev:hover, .link-next:hover { color: #004499; } .link-next { margin-left: auto; }

Адаптивные стили для мобильных устройств:

@media (max-width: 768px) { .neighbors { flex-direction: column; gap: 20px; } .link-next { margin-left: 0; } .col-md-6.d-none.d-md-block { display: none !important; } }

Красивый вывод с карточками для блога:

[[pdoNeighbors?
&sortby=`publishedon`
&sortdir=`ASC`
&includeTVs=`image,introtext`
&tvPrefix=``
&tplWrapper=`@INLINE 
<div class="row g-4 my-4">
  [[+prev]]
  [[+next]]
</div>`
&tplPrev=`@INLINE 
<div class="col-md-6">
  <div class="card h-100">
    <img src="[[+image:pthumb=`w=400&h=250&zc=1`]]" class="card-img-top" alt="[[+pagetitle]]">
    <div class="card-body">
      <span class="badge bg-secondary mb-2">← Предыдущая</span>
      <h5 class="card-title">[[+pagetitle]]</h5>
      <p class="card-text">[[+introtext:limit=`100`]]</p>
      <a href="[[+uri]]" class="btn btn-primary">Читать</a>
    </div>
  </div>
</div>`
&tplNext=`@INLINE 
<div class="col-md-6">
  <div class="card h-100">
    <img src="[[+image:pthumb=`w=400&h=250&zc=1`]]" class="card-img-top" alt="[[+pagetitle]]">
    <div class="card-body">
      <span class="badge bg-secondary mb-2">Следующая →</span>
      <h5 class="card-title">[[+pagetitle]]</h5>
      <p class="card-text">[[+introtext:limit=`100`]]</p>
      <a href="[[+uri]]" class="btn btn-primary">Читать</a>
    </div>
  </div>
</div>`
]]

Работа с разными контекстами

При работе в мультиконтекстных проектах pdoNeighbors автоматически выбирает соседей из текущего контекста:

[[pdoNeighbors? &context=`web` &sortby=`publishedon` ]]

Если зайти на страницу которая из корня контекста, соседние документы могут выбираться по ID вне зависимости от контекста. В таких случаях явно указывайте параметры &parents и &context.

Оцените статью
MODX 3
Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

© 2026 MODX 3
Этот веб-сайт использует файлы cookie для улучшения пользовательского опыта. Продолжая использовать сайт, вы соглашаетесь на использование файлов cookie.