Разберем несколько способов как в MODX можно работать с файловыми элементами: через IDE — PhpStorm, бесплатный редактор кода — Visual Studio Code и админку самого движка.
Настройка VS Code
Перед тем как приступить к настройке VS Code для работы с CMS MODX, посетите мануал по Visual Studio Code: там из полезного для вас как минимум: русификация, установка и создание сниппетов и подключение к сайтам по FTP или sftp.
Т.к. MODX разработан на PHP нам его нужно подключить.
Для рядовых пользователей можно не устанавливать PHP Intelephense и vscodemodx, особенно если не особо хотите погружаться в php — при разработке сайтов на MODX оно вам скорее всего не понадобиться!
Установка PHP-расширений VS Code
VS Code распознает PHP-код и помогает с подсветкой синтаксиса, базовой отладкой и отступами кода сразу же после установки. Этого вполне достаточно для быстрого редактирования или для работы с отдельными сценариями PHP. Однако более крупные проекты сложно обслуживать без дополнительного контекста вокруг кода и без наглядного понимания того, что делает каждый файл и как он интегрируется в проект.
Существует ряд расширений VS Code, которые помогут повысить вашу продуктивность при работе над PHP проектами. Рекомендую пользоваться расширением PHP Intelephense. Для того, чтобы его установить откройте вкладку расширений, нажав на последний значок в левой строке меню или клавиши CTRL+SHIFT+X. Это вызовет меню боковой панели с полем поиска и списком популярных или рекомендуемых расширений. Введите «php» или «intelephense», чтобы найти нужное нам расширение PHP Intelephense. Затем нажмите кнопку Install, чтобы установить и включить расширение.
Далее необходимо рассказать VS Code, что не нужно использовать встроенные языковые функции. Для этого в той же вкладке расширения (extensions) введем @builtin php и выключим для всего редактора PHP Language Features.
Установка расширения vscodemodx
vscodemodx — Автокомплит кода в Visual Studio Code для MODX Revo, подробнее о нем можно почитать здесь: https://modx.pro/components/18603.
Создание ускорителей для работы с компонентами MODX
Если вы регулярно работаете с MODX, к примеру создаете на нем сайты (особенно если при этом используете файловые шаблоны, к которым можно удаленно подключится), то рекомендую создать сниппет и типовыми вызовами, вот пример моего:
Так можно вынести практически все, запихать целые шаблоны, потом выводить их за секунду.
Также я устанавливаю дополнение Templex, что бы хоть какая то подсветка была у расширения tpl.
Настройка PhpStorm
Cкачиваем и устанавливаем PhpStorm. Скорее всего, вам потребуется загрузить еще и Java, он сам должен об этом сказать.
Мы получаем пробную версию без ограничения функциональности, на 30 дней. Этого вполне достаточно, чтобы пройти весь курс и определиться, нужно ли покупать эту прекрасную IDE, или стоит поискать бесплатные аналоги.
Запускаем IDE, создаём новый проект с именем ModxCourse.
Далее нужно настроить выгрузку нашего кода на сервер. Для этого щелкаем по Main Menu
и переходим в Tools — Deploument — Configuration
В открывшемся окне жмем по плюсу и создаем FTP или SFTP соединение
В сплывающем окне пишем любое имя имя сервера, например ModxCourse и жмем OKю
Откроется окно настройки FTP / SFTP соединения, в котором нужно прописать доступ к FTP / SFTP (не знаете где взять спросите у поддержки хостинга). Указываем Host (сервер), User name (имя пользователя ftp), Password (пароль для данного пользователя) и проверяем соединение нажав на Test Connection.
Если увидели слово successfully, значит все хорошо.
В root path прописываем директорию где будут храниться файлы шаблонов (верстка) и файловые элементы (в моем случае это template). После чего переходим во вкладку Mappings.
На вкладке Mappings в поле «Deployment path» прописываем путь куда будут заливаться файлы / файловые элементы (в моем случае это /tpl) и жмем ОК.
Это мы настроили синхронизацию между удалённой директорией tpl и локальным проектом.
Теперь мы можем спокойно работать с файлами и директориями на сервере. Для этого нужно найти вкладку Remote host.
Ну и для удобства включаем авто синхронизацию файлов после их сохранения (при нажатии Ctrl+S). Для этого идем в Tools -> Deployment -> Mapping жмем по Automatic Upload (Always) — если включено будет стоять галочка.
Работа с файловыми элементами из админки MODX
Чтобы подсвечивался код, устанавливаем дополнение Ace.
Файловые элементы: чанки и шаблоны имеют разрешение .tpl, а сниппеты и плагины имеют разрешение .php. Оба эти разрешения по умолчанию запрещены. Поэтому идем в системные настройки и правим настройку с ключом upload_files и дописываем после последнего значения «,tpl,php».
Ну и после этого для удобства можно создать отдельный источник источник файлов, для этого идем в «Медиа» — «Источники файлов», копируем источник файлов «Images» или «Filesystem».
Дальше редактируем его Название «template». Значения настроек basePath и baseUrl ставим template/tpl/, allowedFileTypes — tpl и сохраняем.
После этого получаем быстрый доступ к файловым элементам.
