Свежие шаблоны cms modx для разработчиков

Создание базы и пользователя базы

Мы залили наши файлы и готовы к продолжению. Следующий шаг — создание базы и пользователя базы. Как вы это сделаете — зависит от вашего хостинга и панели управления, а также инструментов, которые есть у вас в наличии. Если вы не уверены в том как это сделать, то свяжитесь с техпомощью вашего хостера либо поищите данную инфо в интернете.


Я перейду в инструмент моего openserver’а — PhpMyAdmin

и создам базу данных modxws:

сообщение об успехе создания базы:

Убедитесь в том, что права пользователя созданной вами базы имеет все привилегии доступа к базе данных. В openserver можно использовать запись root или создать своего пользователя, назначить ему пароль и ввести данные при установке. Давайте создадим своего пользователя myuser и назначим ему пароль:

Запишите имя базы данных и пользователя, а также его пароль — всё это понадобится на следующем этапе.

Некоторые хостеры добавляют префиксы для имен баз данных и/или пользователей, поэтому не ошибитесь в написании имени пользователя и базы данных.

При создании базы ее кодировку и сопоставление необходимо установить utf8 и utf_general_ci соответственно. Это можно сделать с помощью phpmyadmin либо тем инструментом, который предлагает вам ваш хостер:

Базовая защита от определения CMS

Для тех кто устанавливал MODX не по моему мануалу, проверьте отключение «X-Powered-By», чтобы сайт не «палился», отправляя в заголовках информацию о том, что сайт сделан на MODX.

Идем в системные настройки, в поиск по ключу вбиваем send_poweredby_header — ставим нет.

Дополнительные примочки по защите

Кроме описанных выше приёмов, можно применить еще пару небольших хитростей.

Многие «попсовые» CMS добавляют свои мета теги с указанием названия и версии CMS, например джумла:

<meta name=»generator» content=»Joomla x.x.x» />

можно смело добавить такой код, чтобы увести возможных злоумышленников по ложному следу.

В добавок к этому, можно создать фэйковую стандартную страницу входа в админку указанной версии имитируемой CMS.

Большинство автоопределялок будут интерпретировать наш движок как Joomla, а если хулиганы захотят залезть в админку, то будут долго и нудно пытаться подобрать отмычки к нерабочему замку.

Отредактируйте пути

Поменяем в нашем коде пути к папкам шаблона. Мы скопировали наш шаблон в папку  assets/templates/7in1. Поэтому нам нужно изменить пути ссылок к css файлам, js файлам, изображениям и др. на корректные пути на нашем сервере. Этот элемент вашей работы для ускорения можно сделать до того как копировать код шаблона в редактор MODX. Сейчас просто посмотрев на код, я могу сказать, что мне нужно искать папку styles/ и заменить ее на assets/templates/7in1/styles/, и так далее. Заменим все необходимые пути и сохраним наш шаблон. Вы можете обнаружить, что что-то упустили и есть ошибка в выводе страницы, поэтому возвращайтесь и снова откорректируйте пути.

Загрузка дополнений MODX

Чтобы установить пакет перейдите во вкладку «Приложения» -> «Установщик«, и кликаем на кнопку «Загрузить дополнения«.

Откроется страница с перечнем популярных и недавно выпущенных пакетов.

Можете выбирать пакеты при помощи поиска (я обычно так делаю) или боковой навигации. К примеру нужно установить пакет: pThumb, вбиваем его в окно поиска и нажимаем Enter, с права выйдет данный пакет и похожие по имени и функционалу. Нажимаем «Загрузить».

После чего можете вбить название другого пакета, нажать Enter и также загрузить его и т.д.

Загрузка дополнений MODX из дополнительного репозитория Modstore.pro, аналогична загрузке из основного репозитория, единственное вам нужно переключится на него, для этого в менеджере пакетов нажимаем на стрелочку напротив кнопки «Загрузить пакеты» и в открывшемся окне выбираем нового поставщика, после чего «Сохранить и перейти в обозреватель пакетов»

Далее таким же образом загружаем пакеты.

Загрузка zip дополнений MODX. Допустим нам нужен еще 1 пакет: MarkitUp (еще один редактор, по идее можете не устанавливать), которые по сути находятся в репозитории, но почему то не доступны в поиске пакетов.

Скачиваем их от сюда:

  1. MarkitUp — http://modx.com/extras/package/markitup

Для того чтобы скачать, введите в адресной строке адрес и на открывшейся страничке нажмите кнопку «Download«.

Теперь загружаем их, для этого нужно на вкладке «Управление пакетами«, выбрать из выпадающего меню кнопки «Загрузить пакет дополнения» пункт «Загрузить пакет«, затем выбрать скачанные zip пакеты и загрузить их.

Все основные пакеты загружены, теперь их нужно установить.

Создание страниц и разделов сайта на MODx Revolution.

Для того чтобы создать страницу или раздел, необходимо дереве элементов на вкладке Ресурсы нажать на значек «Новый документ»:

Откроется страница для редактирования ресурса, которая имеет 3 вкладки: Документ, Настройки, Группы ресурсов. Рассмотрим каждую из вкладок.

Вкладка документ.

Здесь необходимо заполнить следующие поля:

Заголовок – данное поле обязательно для заполнения.  Текст с этого поля обычно вставляют в тег title исходного кода страницы — <h1>]</h1>.

Расширенный заголовок – необязательное поле, в котором можно прописать более длинный и информативный заголовок, который в последующем можно будет выводить при помощи тега на страницах сайта — ].

Описание — необязательное поле, но очень рекомендую его заполнять, т.к. текст с этого поля вставляется в тег description (полезно для SEO) — ].


Аннотация — необязательное поле. Для страниц его заполнять не нужно, но если вы создаете новость, статью или товар, то заполнить просто необходимо — ].

Шаблон – здесь вам необходимо указать шаблон, который будет использован при формировании данной страницы.

Пункт меню — краткий заголовок ресурса в меню — ].

Атрибуты ссылки – здесь вы можете добавлять атрибуты к ссылкам в меню, к примеру если добавить target=»_blank»  то ссылка будет открываться в новом окне,  rel=»nofollow» – то яндекс не будет учитывать данную страницу и т.п. думаю суть вы поняли — ].

Не показывать в меню – Если  чек бокс на против данной опции,  то данный ресурс не будет показываться в большинстве сниппетов меню и навигации — ].

Опубликован – Данный параметр определяет, будет ли показан данный ресурс посетителям сайта (если чек бокс не установлен, то данный ресурс сохраняется как черновик и не выводится на сайте) — ].

Содержимое ресурса – Здесь добавляется контент данного ресурса — ].

После заполнения данной вкладки у вас должно получиться примерно так:

Вкладка Настройки.

Родительский ресурс – Здесь при необходимости вы можете указать ID родителя

Вкладки Тип ресурса и Местонахождение содержимого – в 99% случаях оставляете значение по умолчанию.

Позиция в меню – проставляется автоматом

Дата отмены публикации — при помощи данного пункта вы можете запланировать отмену публикации ресурса.

Контейнер – если вы поставите галочку на против данного пункта, то документ превратится в рубрику (категорию).

Доступен для поиска – разрешает или запрещает поиск в содержимом ресурса, так же может использоваться в сниппетах.

Использовать HTML-редактор – включает или отключает HTML-редактор

Заморозить URI – если отметите данный пункт, то появится дополнительное поле, к котором вы сможете прописать какой либо URL и он при любом редактировании будет оставаться неизменным.

Кэшируемый – если данный пункт отмечен, то ресурса будет сохранен к кэш после первого обращения к нему.

Очистить кэш – очищает кеш при сохранении ресурса.

Удалён – отменяет публикацию ресурса.

Вкладка Группы ресурсов.

Здесь вы можете выбрать, к каким группам принадлежит ресурс. К примеру вы не хотите чтобы данную страницу могли просматривать только зарегистрированные пользователи, тогда вам нужно будет создать 2 группы, для авторизованных и не авторизованных пользователей и указать на против данных групп параметр доступа.

Вот как то так) Идем далее.

Редактирование страниц сайта.

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

Удаление страниц сайта.

Удалить страницу можно также при помощи вышеупомянутого контекстного меню выбрав, пункт «Удалить», либо же при редактировании страницы вы можете нажать одноименную кнопку.

После этого в дереве ресурсов модх заголовок данного документа окрасится в другой цвет и станет перечеркнут. Но это, еще не окончательное удаление, а по большому счету просто отмена публикации.

Чтобы полностью удалить ненужный ресурс, то вам потребуется  кликнуть по кнопке «Очистить корзину».

На сегодня все, создайте все основные страницы и категории, далее мы сделаем статическое меню динамическим при помощи PdoMenu.

MODX теги — тегирование для ресурсов, при помощи MIGX. pdoMenu — документация и примеры создания меню в MODX >

Создание шаблона

После загрузки папок с файлами мы можем начать создание нашего MODX шаблона. В админке нажмите на вкладку Elements слева, откроется панель с различными элементами сайта — шаблонами, чанками, переменными шаблона и другими. Нажмем на templates и увидим, что уже есть в наличии один базовый шаблон с названием Base Template. Если вы на него нажмете, то вы можете увидеть код данного шаблона. Видим HTML код с тегами ], ].

Эти тэги трансформируют статичный HTML/CSS код в динамичный MODX шаблон и мы собираемся узнать как его сделать и приложить к этому свои руки.

Давайте продолжим и сделаем наш шаблон. Для создания нового MODX Revolution шаблона нажмите правой кнопкой мышки Templates, а далее New Template.

Можете также нажать на иконке New Template:

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

Для создания категории, нажмите правой кнопкой мыши на Categories в закладке Elements.

Ну вот можно добавить код в наш новый шаблон. Начнем мы с создания шаблона для главной страницы. Сейчас я могу сказать, что дизайн главной страницы будет отличаться от дизайна внутренних страниц, поэтому я назову этот шаблон каким-то своим именем, например «7in1 Home». Код домашней страницы находится в файле index.html в папке с шаблонами, которую мы загрузили с Themeforest, поэтому открываем этот файл в редакторе (я использую Notepad++) и копируем его содержимое в наш новосозданный шаблон в MODX. Можно (и это на мой взгляд даже более удобнее) отредактировать вначале код вне MODX Revolution и только потом перенести отредактированный код исправленного шаблона, но исходя из целей данного урока, все эти действия проведём внутри редактора MODX.

Отредактируйте пути


Поменяем в нашем коде пути к папкам шаблона. Мы скопировали наш шаблон в папку  assets/templates/7in1. Поэтому нам нужно изменить пути ссылок к css файлам, js файлам, изображениям и др. на корректные пути на нашем сервере. Этот элемент вашей работы для ускорения можно сделать до того как копировать код шаблона в редактор MODX. Сейчас просто посмотрев на код, я могу сказать, что мне нужно искать папку styles/ и заменить ее на assets/templates/7in1/styles/, и так далее. Заменим все необходимые пути и сохраним наш шаблон. Вы можете обнаружить, что что-то упустили и есть ошибка в выводе страницы, поэтому возвращайтесь и снова откорректируйте пути.

Что нужно для обучения MODX:

  • Знания HTML/CSS будут очень кстати
  • Некоторые знания PHP, не обязательны, но будут нужны для настоящего изучения и применения при разработке сайтов на MODX. При необходимости я буду объяснять некоторые базовые моменты использования PHP кода и буду указывать на другие ресурсы для прочтения. Но все же рекомендую получить где-либо еще эти знания, так как они вам сослужат добрую службу.
  • Иногда понадобятся ваши руки и мозги
  • Любопытство, терпение и ваш любимый напиток (у меня — зеленый чай).

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

Информационные сообщения Правильные действия Обратить внимание Ошибка

Также уроки могут содержать демо примеры, переход на которые и скачивание исходников могут быть обозначены кнопками:

DEMO Скачать

Как использовать сниппет FormIt

Итак, чтобы FormIt заработал, вам необходимо разместить вызов сниппета и HTML код формы в месте контакт формы. Если вы используете eForm сниппет MODX Evolution, то вам необходимо создать tpl шаблон для вашей формы, а затем вызвать его в сниппете, но при использовании FormIt вам не нужно вызывать форму в сниппете, вместо этого вы размещаете форму после вызова сниппета.

Первое, что вы видите, когда смотрите на документацию – это то, что вам необходимо определить хуки вашего FormIt вызова. Хуки – это скрипты, которые срабатывают при вызове вашего сниппета

Вы можете связывать их вместе, но важно знать, что они исполняются последовательно и если один выдаст ошибку, то не сработают и остальные. Существуют предхуки и обычные хуки, но сейчас нас будут интересовать только нормальные хуки, которые запускаются после подтвержения и обработки формы

Вы можете создать собственные пользовательские хуки, но пока будем использовать обычные хуки.

Нам нужно немного изменить эту форму, чтобы FormIt мог ее обработать. Первое, что мы сделаем – это поменяем поменяем действие, чтобы оно указывало на текущую страницу, так как именно здесь находиться вызов сниппета FormIt. Мы делаем ссылку на текущую страницу используя синтаксис MODX Revo: ]]]. Если вы посмотрите внимательно на этот вызов, то увидите то, что внутренний блок – это просто тег для ID поля: ] и внешняя часть – это тег для привязки url, например: ]

Во-вторых, поменяем форму вложив в соответвтвующие FormIt заполнители в значения атрибутов каждого элемента поля для замены статических битов.

Результат выглядит приблизительно так:

Быстрый способ это сделать можно сравнив вашу контактную форму с формой представленной в документации FormIt. Также вы можете начать с формы в документации и в ней просто поменять классы для соответсвия вашей форме.

Далее разместите вызов сделанного нами сниппета в области контента вашей страницы Contact, а далее вставьте ваш код формы после вызова сниппета. Область контента должна содержать:

После сохранения превью формы выглядит вот так:

Из того, что мы уже изучили вы можете догадаться что произойдет. Сниппет FormIt и парсер MODX возмёт значения из контакной формы и вставит их в заполнители в почте, которую я получу.

Теперь давайте протестируем нашу контактную форму. .

Проверим почту и увидим, что получено сообщение:

Вы видите, что введенный текст в поле параметра тема сниппета FormIt оказалась строчкой нашей строчкой темы.

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

Единственной вещью, которую я заметил – это то, что я забыл добавить закрывающую скобку после (ext в моем шаблоне. Остальное выгдядит отлично и форма работает.

Установка контроллеров с помощью MODExt

Нам нужно будет установить вначале некоторые базовые контроллеры, прежде чем начнём разработку.

Базовый контроллер

Давайте создадим наш базовый контроллер в: /www/doodles/core/components/doodles/index.class.php. И вставим туда следующий код:

Давайте чуть объясню. Здесь мы создали абстрактный Класс контроллера (DoodlesManagerController) для нашего Дополнения, который расширяет modExtraManagerController, специальный класс для разработки Дополнений. MODX 2.2 запрашивает маршрутизацию через классы Контроллера, которые являются мощными. Но в наших Контроллерах для нашего Дополнения, мы хотим прикреплять некоторые CSS/JS файлы и также давать нашим Контроллерам доступ к объекту Doodles класса.

Это мы сделаем в методе initialize(), который вызывается при загрузке контроллера. Во-вторых мы определим метод getLanguageTopics(), чтобы сказать MODX загрузить наш файл словаря в менеджер. Наконец, мы определим метод checkPermissions(), который если не возвращает true, то запретить доступ к этой странице контроллера.

Вот такой наш абстрактный класс. Нам нужно определить действительный класс для использования, поэтому мы создали «IndexManagerController», так как наше действие «index» (как вы помните мы вставили это в диалоге Действия чуть ранее?), то MODX будет искать (ИмяДействия)ManagerController: поэтому и IndexManagerController. Далее мы сообщаем MODX через статический метод «getDefaultController()», что мы вообщето хотим чтобы наш домашний контроллер будет «home». Скоро мы и его сделаем.

Обратите внимание, что здесь мы также загружаем общий JS файл, mgr/doodles.js, в наш JS каталог. Далее он запускает JS метод (при загрузке ExtJS), который загружает переменные конфигурации для нашей $doodles->config в ‘Doodles.config’ JS объекте (который мы будем использовать для указания путей

В нашем doodles.js файле (который находиться в www/doodles/assets/components/doodles/js/mgr/doodles.js), у нас есть следующее:

Мы загружаем объект Doodles, который расширяет Ext.Component класс. Что даёт нам отличное JavaScript пространство имён ‘Doodles’. Мы закончили с заголовком. Давайте начнём разработку нашего домашнего контроллера.

Натягиваем шаблон — логика разбивки шаблона

Не нужно дробить шаблон на сотни чанков, как многие рекомендуют, это создает нагрузки. Выносите только те элементы верстки, которые в последующем могут поменяться.

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

Выносим весь код шаблона (у на пока только один шаблон базовый, смотрите урок Перенос HTML шаблона в MODX Revo) в отдельный чанк tpl b вызываем чанк tpl в самом шаблоне ] или {include ‘tpl’}.

Если сейчас перейти на главную страницу — у нас не чего не поменялось — она также открывается с перенесенным html дизайном.  Далее открываем чанк tpl и вырезаем из него весь контент который меняется в чанк tpl.1, а на месте вырезанного кода вставляем вот такую конструкцию ]]] или тоже самое на fenom: {include (‘tpl.’ ~ $_modx->resource.template)}.

Для чего все это?

Тэг «template» выводит id примененного шаблона, а выше приведенная конструкция обращается к соответственному чанку и выводит его. Так мы в дальнейшем сэкономим кучу времени при внесении изменений в верстку сайта.

В дальнейшем мы будем создавать дополнительные шаблоны (для типовых страниц, для статей, для портфолио и т.д.), вызывать во всех будем чанк tpl — там у нас шапка, подвал и другие элементы которые присутствуют на всех остальных страницах. У каждого нового шаблона будет свой id, следовательно, мы будем создавать дополнительные чанки tpl.2, tpl.3, …, tpl.7 и уже в них вносить недостающий контент. Забегая вперед, у нас получится примерно такая структура.

В следующем уроке, мы рассмотрим сниппеты — для чего они нужны и как их использовать.

MODX fenom — документация и примеры MODX сниппеты (snippet) >

Критические уязвимости modx

Ноябрь 2016 — обнаружена первая критической уязвимости, она основана на SQL иньекциях. Подвержены сайты — которые используют стандартный префикс modx — я так понимаю она еще актуальна.

Июль 2018 — найдены еще две критические уязвимости безопасности. Первая позволяет злоумышленникам удалять на сайте папки и файлы, вторая — загружать на сервер вредоносный код и и выполнять его. — Профикшено в MODX 2.6.5 и выше. Похожая уязвимость так же была найдена в дополнении Gallery версии 1.7.0 и ниже — обновите до 1.7.1.

Обновление до версии 2.6.5 с исправлением уязвимостей выпустили на следующий день. Дополнение Gallery было обновлено до версии 1.7.1.


Апрель 2019 — обнаружен exploit для сайтов, в которых где осталась директория setup. Данная «дыра» позволяет получить полный доступ к сайту, а если хостиг не айс, то и к веб-серверу. — Уязвимость на данный момент не устранена, так что проверьте свой сайт на нее: введите в адресную строку браузера адрес вашего домена + /setup (как в уроке по установке) — если установщик запустится, то зайдите на хостинг и удалите папку setup.

Уроки MODX Revolution

Мы начнем с самого начала, с установки MODX Revolution и перейдем к построению простого сайта.

Для тех, кто хочет сразу попробовать MODX Revolution в работе, есть отличный сайт modx-test.com, где это можно сделать, жмём на кнопку Хочу тестовый сайт MODX Revolution. После ввода своей почты и конфигурирования сайта, необходимо немного подождать, пока сайт создастся. Он будет активен 24 часа и в следующих 24 вы можете скачать транспортный пакет сделанного вами сайта со всеми изменениями…

Будем исследовать разные фичи, чуть не сказал «компоненты» по аналогии с Joomla, адонны и все необходимые вещи для создание сайта с помощью MODX Revolution.

Целевая аудитория MODX уроков

Целевая аудитория для этих уроков — это в основном люди, которые до этих уроков были полностью не знакомы с MODX Revolution. Вам совсем не нужно знать MODX Evolution для прохождения данных уроков.

Если вы знакомы с MODX Evolution, вы можете найти начальные уроки несколько скучными, так как уже все это знаете и основы там и здесь будут повторятся, но я надеюсь, что вы все же чему-то научитесь из данных уроков.

Если вы уже знакомы с MODX Revolution, тогда эти уроки скорее всего вам будут малополезны, так как большинство материала отсюда вам должно быть известно, так что можете просто «потусить» здесь, может найдете какие-либо ошибки и укажете мне на них.

ВАЖНОЕ ЗАМЕЧАНИЕ:

Необходимо осознать одну очень важную вещь самого начала — в MODX CMS почти всегда есть несколько способов сделать что-либо. MODX не ограничивает вас в выполнении чего-либо в определенном порядке или определённым образом. Мои объяснения будут лишь показывать как те или иные вещи делаю я. Это не значит, что это единственно верный способ или наилучший способ, это просто один способ. Таким образом, эти уроки — доступное руководство к действию, точка вашего старта в разработке сайтов. Обязательно пользуйтесь официальной документацей, посещайте другие блоги, форумы и сообщества MODX для поиска новых идей и нового обучения. У меня лишь одна надежда, что вы возьмете к себе на вооружение вещи, изложенные здесь и будете развивать свои способности как у вас получится.

Создание дополнительного поля с выбором ресурсов

Создаем TV, с именем, пусть будет: milti-resorses, в качестве типа ввода выбираем — Множественный выбор или Флажки (Checbox), а в возможных значениях указываем следующую конструкцию:

Здесь мы делаем запрос в базу (from) данных к таблице где modx_ префикс таблиц в базе данных, можно заменить на ], тогда префикс подставится автоматом, и получаем pagetitle у родительских элементов (30 — это id родителя).

А в параметрах вывода выбираем разделитель запятую

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

Вызов TV

Вызываем как обычное tv: ] — выведет id родительских ресурсов, через запятую. Далее берем к примеру pdoResources и выводите в любом формате, к примеру вызов может выглядеть так:

Помогла статья, поделись с другом.

Сейчас мы рассмотрели малую часть основ, но мы ещё не раз будем возвращаться к ним.

В следующем уроке мы изучим компонент ClientConfig, который позволяет с легкостью создавать и выводить однотипные настройки (телефон, соц сети и т.д.) — и по скорости вывод этих полей выше (равен скорости вывода системных настроек).

MODX сниппеты (snippet) Modx ClientConfig — пользовательские системные настройки >

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

для этого достаточно в нужном месте вывести сниппет ], в итоге получим следующее:

Но лучше выводить так:

]

Если вам не нужна ссылка на категорию (которая в середине), то вывод будет таким:

]]</div>`
]]

Остается только немного добавить css, к примеру так:

span.link-next {
    float: right;
}

Получим:

Усложняем задачу. К примеру у нас есть уже готовый шаблон и там есть оформленный блок:

Его статический код выглядит так:

<div class="neighbors">
    <div class="col-xs-6">
    <a href="#">
        <div class="row prev">
            <div class="col-xs-5">
                <img class="img-fluid" src="/assets/img/bootstrap-4-podderzhka-brauzerov-i-ustrojstv.png">
            </div>
            <div class="col-xs-7">
                <p class="link-prev"><i class="fa fa-angle-double-left" aria-hidden="true"></i> Предыдушая</p>
                <p class="menu-prev">Название предыдущей статьи</p>
            </div>
        </div>
    </a>
    </div>
    
    <div class="col-xs-6">
    <a href="#">
        <div class="row next">
            <div class="col-xs-7">
                <p class="link-next">Следующая <i class="fa fa-angle-double-right" aria-hidden="true"></i></p>
                <p class="menu-next">Название следующей статьи</p>
            </div> 
            <div class="col-xs-5">
                <img class="img-fluid" src="/assets/img/bootstrap-4-podderzhka-brauzerov-i-ustrojstv.png">
            </div>
        </div>
        </a>
    </div>
</div>

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

Разобьем этот код на 2 чанка (1й вывод предыдущего документа — neighbors-prev и 2й вывод следующего документа — neighbors-next)

код первого чанка (neighbors-prev) станет таким:

    <div class="col-xs-6">
    <a href="/]">
        <div class="row prev">
            <div class="col-xs-5">
                <img class="img-fluid" src="]">
            </div>
            <div class="col-xs-7">
                <p class="link-prev"><i class="fa fa-angle-double-left" aria-hidden="true"></i> Предыдущая</p>
                <p class="menu-prev">]</p>
            </div>
        </div>
    </a>
    </div>

а код второго чанка (neighbors-next) станет таким

    <div class="col-xs-6">
    <a href="]">
        <div class="row next">
            <div class="col-xs-7">
                <p class="link-next">Следующая <i class="fa fa-angle-double-right" aria-hidden="true"></i></p>
                <p class="menu-next">]</p>
            </div> 
            <div class="col-xs-5">
                <img class="img-fluid" src="]">
            </div>
        </div>
        </a>
    </div>

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

]]</div>`
 &tplPrev=`neighbors-prev`
 &tplNext=`neighbors-next`
 &includeTVs=`image`
]]

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

Документация на данный сниппет находится здесь: https://docs.modx.pro/components/pdotools/snippets/pdoneighbors

Если что не понятно спрашивайте!

Изменение длины (varchar) у поля из minishop2 Плагин Video Embedder или как вставить видео на блог >


С этим читают