Когда мне понадобились комментарии для сайта на MODX, довольно быстро выяснилось, что хочется не просто формы с полем «Ваш комментарий».

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

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

• Хотелось, чтобы комментарии работали без перезагрузки страницы, через AJAX, но при этом сама страница могла оставаться закэшированной.
• Хотелось нормальное дерево ответов, чтобы можно было отвечать не только на первый комментарий, но и друг на друга, при этом ветки не ломались при пагинации и удалении.
• Хотелось разрешить писать и гостям, и авторизованным пользователям, а для администратора MODX — вообще не требовать отдельной авторизации на сайте, если он уже вошёл в manager.
• Хотелось, чтобы автор мог некоторое время редактировать и удалять свой комментарий, а гостевые комментарии при этом тоже можно было безопасно привязать именно к их автору.
• Хотелось иметь модерацию: публикацию сразу или отправку на проверку, статусы pending, spam, published, отдельные правила для гостей и зарегистрированных пользователей.
• Хотелось полноценную панель управления комментариями в MODX, где можно искать, фильтровать, публиковать, отправлять на модерацию, помечать как спам, мягко удалять комментарий или при необходимости удалять его из базы полностью.
• Хотелось голосование 👍 / 👎, нормальную пагинацию, постоянные ссылки на комментарии, относительное время, удобные ответы, цитирование, emoji и вставку ссылок.
• Хотелось email-уведомления администратору и авторам ответов, причём тексты писем должны были редактироваться через обычные MODX Chunks.
• Хотелось защиту от спама не одной жёстко привязанной капчей, а с выбором: Cloudflare Turnstile, hCaptcha, Google reCAPTCHA v2/v3 или Yandex SmartCaptcha.
• Хотелось, чтобы всё это было нормально защищено: CSRF, подпись ресурса, rate limit, безопасная работа с гостевыми cookies, серверная проверка CAPTCHA, экранирование пользовательского текста и отсутствие возможности использовать публичный connector как произвольную точку записи.

И ещё было одно важное требование: не хотелось поддерживать два разных компонента для MODX 2 и MODX 3.

Нужен был один transport-пакет, который можно поставить и на старый проект с MODX 2.8, и на MODX 3.

Ну и в идеале установка должна была сводиться примерно к этому:

[[ModxComments]] или {'ModxComments' | snippet}Code language: JavaScript (javascript)

Установил пакет, добавил один сниппет — и комментарии работают.

Так появился ModxComments — бесплатный компонент комментариев для MODX Revolution, который работает одновременно с MODX 2.8.x и MODX 3.0–3.2.

Репозиторий проекта:

https://github.com/web86/ModxComments

Компонент бесплатный, исходный код открыт и доступен в репозитории.

Почему комментарии сделаны через AJAX

Одна из главных идей ModxComments — комментарии не должны ломать кэширование страницы.

Обычная страница MODX может спокойно оставаться закэшированной:

[[ModxComments]] или {'ModxComments' | snippet}Code language: JavaScript (javascript)

Сам HTML страницы отдаётся MODX как обычно, а список комментариев загружается отдельно через AJAX.

То же самое происходит при:

• отправке комментария;
• ответе на другой комментарий;
• голосовании;
• редактировании;
• удалении;
• переключении страниц комментариев.

Поэтому для работы комментариев не нужно делать весь ресурс некэшируемым или превращать страницу в набор [[!Snippet]].

Один пакет для MODX 2 и MODX 3

Это одна из главных особенностей ModxComments.

Один и тот же transport-пакет устанавливается на:

• MODX Revolution 2.8.x;
• MODX Revolution 3.0;
• MODX Revolution 3.1;
• MODX Revolution 3.2.

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

То есть владельцу сайта не нужно выяснять:

«А это версия компонента для MODX 2 или уже для MODX 3?»

Пакет один.

Ветвящиеся комментарии

Комментарии поддерживают полноценные ответы.

Можно отвечать как на корневой комментарий, так и на уже существующий ответ.

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

Комментарий
└── Ответ
    └── Ответ на ответ
        └── Ещё один ответ

Максимальная глубина дерева задаётся в системных настройках MODX.

Например:

modxcomments.max_depth = 5

При этом структура хранится так, чтобы ветка корректно отображалась и не разваливалась при пагинации.

Комментарии гостей и авторизованных пользователей

Компонент работает как с авторизованными пользователями MODX, так и с обычными посетителями сайта.

Для гостя можно оставить комментарий с именем и email.

Для авторизованного пользователя данные берутся из его профиля.

Можно полностью отключить гостевые комментарии системной настройкой.

Администратор тоже может писать комментарии

Есть ещё одна небольшая, но удобная возможность.

Если администратор уже авторизован в менеджере MODX, компонент умеет распознать его и на фронтенде.

Отдельно авторизовываться как web-пользователь не обязательно.

Комментарии администратора получают специальную отметку:

★ Админ  Имя администратора

Имя берётся из профиля MODX.

Редактирование и удаление своих комментариев

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

Время задаётся настройкой:

modxcomments.edit_time = 900

900 секунд — это 15 минут.

Для зарегистрированного пользователя право на редактирование определяется по его MODX User ID.

Для гостя используется отдельный безопасный идентификатор браузера. Сам секретный токен в базе не хранится — сохраняется только его хеш.

Мягкое удаление комментариев

Если пользователь удаляет свой комментарий, запись физически не исчезает.

Это важно для дерева обсуждения.

Представим ситуацию:

Комментарий №1
└── Ответ №2
    └── Ответ №3

Если просто удалить №1 из базы, ответы потеряют родителя.

Поэтому обычное удаление является мягким: содержимое комментария скрывается, но структура ветки сохраняется.

Полное удаление из панели администратора

У администратора есть отдельное действие:

«Удалить полностью»

Оно действительно физически удаляет комментарий из базы.

Если у комментария есть ответы, они также удаляются вместе с ним.

Удаляются и связанные голоса.

То есть после полного удаления в базе не остаётся ни самого комментария, ни его дочерней ветки, ни связанных записей рейтинга.

Для обычной модерации при этом остаётся стандартное мягкое удаление.

Модерация комментариев

Новые комментарии могут:

• публиковаться сразу;
• отправляться на модерацию.

Причём правила можно задавать отдельно для гостей и авторизованных пользователей.

Например:

modxcomments.guest_status = pending
modxcomments.user_status = published

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

Панель управления комментариями

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

Комментарии

Там можно:

• просматривать все комментарии;
• искать по тексту, имени и email;
• фильтровать комментарии;
• видеть ветки и ответы;
• публиковать;
• отправлять обратно на модерацию;
• помечать как спам;
• мягко удалять;
• удалять полностью.

Для ответов видно, на какой комментарий они были оставлены.

Комментарии администратора дополнительно выделяются.

Голосование 👍 / 👎

У каждого опубликованного комментария может быть рейтинг.

Пользователь может поставить:

• 👍;
• 👎.

Голос можно изменить или отменить.

Для авторизованных пользователей голос привязывается к аккаунту.

Для гостей используется безопасный браузерный идентификатор.

Защита от спама

В компоненте предусмотрено сразу несколько уровней защиты.

Ограничение частоты отправки

Можно указать, сколько комментариев разрешено отправить за определённый промежуток времени.

Например:

modxcomments.rate_limit_count = 5
modxcomments.rate_limit_window = 60

То есть не больше пяти комментариев за минуту.

IP при этом не хранится в базе в открытом виде — используется хеш.

Honeypot

В форме есть скрытое поле-ловушка для примитивных ботов.

Обычный пользователь его не видит, а многие автоматические спам-боты заполняют.

Несколько CAPTCHA-провайдеров

CAPTCHA не привязана к одному сервису.

Сейчас поддерживаются:

• Cloudflare Turnstile;
• hCaptcha;
• Google reCAPTCHA v2;
• Google reCAPTCHA v3;
• Yandex SmartCaptcha;
• либо полностью отключённая CAPTCHA.

Выбор производится через системную настройку:

modxcomments.captcha_providerCode language: CSS (css)

Например:

turnstile

или:

hcaptcha

или:

recaptcha

или:

yandex

Можно также включить проверку только для гостей:

modxcomments.captcha_guests_only = 1

Авторизованные пользователи тогда смогут комментировать без CAPTCHA.

Серверная проверка CAPTCHA

Важно, что CAPTCHA проверяется не только JavaScript-кодом формы.

Полученный токен всегда отправляется на сервер, а компонент проверяет его через API выбранного CAPTCHA-провайдера.

То есть просто отправить POST-запрос в обход формы недостаточно.

Для Google reCAPTCHA v3 дополнительно проверяется score.

Минимальное значение можно настроить:

modxcomments.recaptcha_min_score = 0.5

Email-уведомления

ModxComments умеет отправлять уведомления о новых комментариях.

Можно включить уведомление администратора:

modxcomments.notify_admin = 1

Адрес получателя задаётся отдельно. Если его не указать, используется стандартный emailsender MODX.

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

Шаблоны писем можно менять

Тексты писем вынесены в обычные MODX Chunks.

Например:

ModxCommentsEmailAdminSubject
ModxCommentsEmailAdminBody
ModxCommentsEmailReplySubject
ModxCommentsEmailReplyBody

Их можно редактировать прямо из менеджера MODX.

При обновлении компонента изменённые пользователем шаблоны не перезаписываются.

Пагинация

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

Количество корневых обсуждений на странице регулируется:

modxcomments.threads_per_page = 20

При этом ответы внутри выбранной ветки загружаются вместе с ней.

То есть дерево не разрезается пополам между страницами.

Удобства на фронтенде

В интерфейсе комментариев есть несколько мелочей, которые сильно улучшают использование:

• ответы на комментарии;
• цитата родительского комментария;
• редактирование без перезагрузки;
• удаление без браузерных alert() и prompt();
• счётчик символов;
• вставка ссылок;
• emoji;
• относительное время вроде «5 минут назад»;
• постоянные ссылки вида #comment-123;
• автоматическая прокрутка к только что добавленному комментарию;
• подсветка нового комментария;
• индикаторы загрузки и отправки;
• сообщение о том, что комментарий ожидает модерации.

Русский и английский интерфейс

Frontend и manager-интерфейс имеют отдельные словари MODX.

Из коробки есть:

• русский;
• английский.

Поэтому текст интерфейса не зашит прямо в JavaScript.

При необходимости можно добавить собственную локализацию обычным способом MODX.

Безопасность

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

Каждый виджет комментариев получает подписанный токен ресурса.

Токен связан сразу с:

• ID страницы;
• контекстом MODX;
• секретным ключом сайта.

Секретный ключ создаётся автоматически при установке:

modxcomments.resource_signing_keyCode language: CSS (css)

Это означает, что нельзя просто взять публичный API комментариев и передать ему произвольный ID другой страницы.

Также используются:

• CSRF-защита;
• проверка прав;
• серверная проверка CAPTCHA;
• ограничения размера запросов;
• HttpOnly cookies;
• SameSite cookies;
• безопасная обработка пользовательского текста;
• проверка URL;
• защита email-шаблонов от выполнения MODX-тегов;
• проверка manager-сессии;
• POST-запросы для административных изменений.

Публичные ошибки при этом не раскрывают пользователю внутренние PHP exception и пути сервера.

Пользовательский текст остаётся безопасным

Комментарии не являются HTML-редактором.

Пользовательский HTML не выполняется.

Текст экранируется, но поддерживаются безопасные HTTP/HTTPS-ссылки.

Можно написать просто:

https://example.comCode language: JavaScript (javascript)

или:

[Название ссылки](https://example.com)Code language: JavaScript (javascript)

Всё остальное остаётся обычным текстом.

События MODX

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

ModxCommentsBeforeCommentCreate
ModxCommentsOnCommentCreate
ModxCommentsOnCommentUpdate
ModxCommentsOnCommentDelete
ModxCommentsOnCommentPublish
ModxCommentsOnCommentVote

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

Например:

• отправить сообщение в Telegram;
• синхронизировать комментарии с внешней системой;
• выполнить дополнительную антиспам-проверку;
• вести собственную статистику.

Как установить ModxComments

Установка обычная для MODX.

Скачиваем transport ZIP и устанавливаем его через:

Пакеты → Установщик

После установки очищаем кэш MODX.

Готовые сборки и исходный код проекта находятся в репозитории:

https://github.com/web86/ModxComments

Для готовых transport-пакетов в репозитории предусмотрена папка:

distr/

Как вывести комментарии

После установки достаточно вставить в нужный шаблон или ресурс:

[[ModxComments]] или {'ModxComments' | snippet}Code language: JavaScript (javascript)

И всё.

Отдельно прописывать connector, JavaScript или CSS не требуется.

Компонент сам подключит необходимые файлы.

При этом сам вызов сниппета можно оставить кэшируемым.

Базовая настройка

Большинству сайтов достаточно нескольких параметров.

Например:

modxcomments.allow_guests = 1
modxcomments.guest_status = pending
modxcomments.user_status = published
modxcomments.max_depth = 5
modxcomments.threads_per_page = 20

Если нужна CAPTCHA:

modxcomments.captcha_enabled = 1
modxcomments.captcha_provider = turnstile
modxcomments.captcha_guests_only = 1

После этого остаётся указать ключи выбранного CAPTCHA-сервиса.

Для кого этот компонент

ModxComments может пригодиться для:

• блогов;
• статей;
• новостей;
• документации;
• каталогов;
• карточек товаров;
• страниц услуг;
• небольших сообществ;
• любых MODX-сайтов, где требуется обсуждение материалов.

При этом компонент не диктует структуру шаблона и практически не вмешивается в рендеринг самой страницы.

Бесплатно

ModxComments — бесплатный компонент.

Проект появился из практической задачи: хотелось получить современную систему комментариев, которую можно одинаково использовать на старых MODX 2 проектах и на MODX 3 без двух отдельных кодовых баз.

Если компонент окажется полезным и на других проектах — значит цель достигнута.

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

https://github.com/web86/ModxComments

Для использования достаточно установить пакет и добавить:

[[ModxComments]] или {'ModxComments' | snippet}Code language: JavaScript (javascript)

На этом всё. Остальное компонент берёт на себя.