Работа с файловыми элементами MODX: VS Code, PhpStorm и админка

Редактирование файловых элементов MODX в редакторе кода и административной панели MODX Revo
Файловые элементы MODX можно редактировать в VS Code, PhpStorm или через файловое дерево административной панели. Для локального сайта достаточно открыть нужный каталог, а для хостинга нужно настроить передачу файлов и проверить соответствие локальных и серверных путей. Источник файлов в MODX дает удобный доступ к коду, но его следует предоставлять только доверенным разработчикам.
Содержание
  1. Сначала определяем, где находятся файлы проекта
  2. Настройка VS Code для работы с MODX
  3. Открываем папку проекта
  4. Подсветка и подсказки: IntelliSense for MODX
  5. Выбираем язык шаблонов
  6. Настраиваем поиск файлов @FILE
  7. Устанавливаем PHP Intelephense
  8. Создаем ускорители для типовых вызовов MODX
  9. Подключаем VS Code к файлам на хостинге
  10. Настройка PhpStorm для работы с файловыми элементами
  11. Создаем или открываем локальный проект
  12. Работа с шаблонами Fenom в PhpStorm
  13. Создаем свои фрагменты кода через Live Templates
  14. Создаем группу заготовок
  15. Обычный тег поля MODX
  16. Подключение файлового чанка Fenom
  17. Условие Fenom
  18. Как записать знак доллара в заготовке
  19. Указываем, где доступны заготовки
  20. Проверяем вставку
  21. Создаем подключение к серверу
  22. Настраиваем Root path и Mappings
  23. Проверяем ручную загрузку
  24. Автоматическая загрузка после сохранения
  25. Другие редакторы и IDE для работы с MODX
  26. Работа с файловыми элементами из админки MODX
  27. Подсветка кода
  28. Разрешения файлов .tpl и .php
  29. Создаем отдельный источник файлов для кода
  30. Открываем и сохраняем тестовый файл
  31. Проверяем, что редактируем нужные файлы

Файловые элементы MODX можно редактировать несколькими способами: в бесплатном редакторе Visual Studio Code, в IDE PhpStorm или прямо из административной панели. Выбирайте один основной вариант, проходить все три не нужно.

В этой статье настроим рабочий инструмент: откроем файлы проекта, подготовим подсветку и подсказки, проверим передачу изменений на хостинг и доступ через файловое дерево MODX. Сами вызовы @FILE, file: и наследование разобраны в статье о файловых элементах pdoTools.

Инструкция подходит для MODX Revolution 2 и 3. Названия отдельных пунктов интерфейса могут отличаться, но редактор работает с обычными файлами проекта. Подключенный FlexStart или другой готовый дизайн для настройки рабочего места не требуется.

Сначала определяем, где находятся файлы проекта

Редактор должен открывать именно те файлы, которые использует сайт. Поэтому перед установкой расширений проверьте расположение элементов.

Если в системной настройке pdotools_elements_path установлено:

{core_path}elements/

то при стандартном расположении ядра файловые элементы находятся в core/elements/:

core/elements/
├── chunks/
├── templates/
├── snippets/
└── plugins/

Если у вас используется другая структура, например template/tpl/, открывайте ее. Не переносите уже работающие файлы только ради совпадения с примером.

На части скриншотов ниже показан проект с каталогом template/tpl/. Сам порядок подключения остается полезным, но значения путей нужно подставлять по своей установке.

Где работает сайт Как редактируем файлы
На локальном сервере Открываем каталог проекта на компьютере. Выгрузка по SFTP не требуется.
На хостинге Работаем с локальной копией и передаем изменения на сервер либо используем настроенный удаленный доступ редактора.
Нужны разовые правки из браузера Открываем файлы через административную панель MODX с подходящими правами доступа.

Перед настройкой автоматической выгрузки сохраните копию серверных файлов. Сначала проверьте передачу одного тестового файла вручную. Не подключайте пустой локальный каталог к рабочему сайту с включенным удалением удаленных файлов.

Настройка VS Code для работы с MODX

Visual Studio Code подойдет для HTML, CSS, JavaScript, файловых чанков и шаблонов. Базовая установка, русификация и работа с расширениями разобраны в отдельном руководстве по VS Code. Здесь сосредоточимся на файлах MODX.

Открываем папку проекта

Начните с открытия папки, а не одного случайного файла:

  1. Запустите VS Code.
  2. Выберите «Файл» — «Открыть папку».
  3. Для локального сайта укажите фактический каталог элементов, например core/elements/.
  4. Для сайта на хостинге сначала скачайте актуальные файлы в отдельную локальную папку, например ModxCourse, и откройте ее.
  5. Проверьте, что в дереве доступны нужные каталоги chunks, templates, snippets и plugins.

Можно открыть и весь проект MODX. Это удобнее для поиска по исходникам и анализа PHP-кода, но при передаче на сервер нужно особенно внимательно выбирать загружаемые каталоги.

Для редактирования разметки устанавливать локальный PHP только потому, что MODX написан на PHP, не требуется. PHP-интерпретатор понадобится для локального выполнения PHP, соответствующей проверки синтаксиса и других инструментов разработки.

Подсветка и подсказки: IntelliSense for MODX

Для работы с шаблонами установим IntelliSense for MODX от Gulomov. Расширение добавляет подсветку стандартных тегов MODX и Fenom, подсказки полей ресурсов, настроек, модификаторов и параметров поддерживаемых сниппетов.

Также оно помогает выбирать пути @FILE и переходить к соответствующим файлам.

  1. Откройте раздел расширений VS Code. В Windows и Linux используйте Ctrl+Shift+X.
  2. В поиске введите IntelliSense for MODX.
  3. Найдите расширение автора Gulomov. Его идентификатор — gulomov.vscode-modx.
  4. Нажмите Install и дождитесь установки.
  5. Откройте файловый шаблон с расширением .tpl.

Установка расширения IntelliSense for MODX в VS Code

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

Выбираем язык шаблонов

Расширение поддерживает два режима: MODX для стандартных тегов и Fenom для шаблонов на Fenom. Оба могут использовать файлы .tpl, поэтому для проекта лучше явно выбрать основной режим.

Откройте любой .tpl и нажмите на название языка справа внизу VS Code. Выберите Fenom, если работаете с конструкциями {if}, {include} и {extends}. Для файлов со стандартными тегами [[*pagetitle]] и вызовами MODX выбирайте режим MODX.

Чтобы сохранить выбор для всех .tpl текущего проекта:

  1. Откройте папку проекта в VS Code.
  2. Нажмите Ctrl+Shift+P в Windows или Linux, на macOS — Cmd+Shift+P.
  3. Найдите команду Preferences: Open Workspace Settings (JSON) и выполните ее.
  4. Добавьте нужное правило в настройки проекта.

Для проекта на Fenom:

{
    "files.associations": {
        "*.tpl": "fenom"
    }
}

Для проекта со стандартным синтаксисом MODX:

{
    "files.associations": {
        "*.tpl": "modx"
    }
}

Выбирайте один вариант. Не добавляйте две одинаковые строки "*.tpl" с разными значениями.

После сохранения снова откройте .tpl и проверьте название языка в нижней строке VS Code.

Подсветка Fenom и HTML в файловом шаблоне MODX

Настраиваем поиск файлов @FILE

Для подсказок путей расширению нужно знать, относительно какого каталога искать элементы. Эта настройка относится к редактору и не изменяет системные настройки сайта MODX.

Если в VS Code открыт корень установки MODX, а элементы находятся в core/elements/, подходит значение по умолчанию:

{
    "vscode-modx.elementsPath": "/core/elements/"
}

Если в редакторе открыта непосредственно папка элементов, внутри которой сразу находятся chunks, templates и snippets, укажите:

{
    "vscode-modx.elementsPath": "/"
}

Добавляйте параметр в существующий объект настроек. Например, для открытого каталога элементов и проекта на Fenom:

{
    "files.associations": {
        "*.tpl": "fenom"
    },
    "vscode-modx.elementsPath": "/"
}

В поддерживаемом вызове @FILE попробуйте выбрать путь из подсказок. Для перехода к существующему файлу используйте F12 или щелчок по пути с зажатой Ctrl, на macOS — Cmd.

Подсказки сниппетов основаны на предусмотренном расширением списке. Отсутствие параметра в подсказке не доказывает, что он не поддерживается установленной версией компонента.

Расширение помогает редактировать код, но не включает Fenom на сайте, не создает элементы MODX и не передает файлы на сервер. Эти действия настраиваются отдельно.

Расширение vscodemodx из прежней настройки

В прежней конфигурации я использовал vscodemodx. Его описание сохранено в публикации автора на MODX.pro.

Установка расширения vscodemodx

Для основного варианта этой инструкции используется IntelliSense for MODX от Gulomov. Устанавливать оба расширения ради одних и тех же подсказок не требуется. Если старое расширение уже установлено, проверьте, не дублирует ли оно подсказки нового.

Устанавливаем PHP Intelephense

Если редактируете только файловые шаблоны и CSS, этот шаг можно пропустить. Intelephense полезен, когда работаете с PHP-сниппетами, плагинами и исходниками компонентов: он добавляет анализ кода, навигацию и подсказки.

Встроенная подсветка PHP не означает, что полноценная отладка PHP уже настроена. Настройка отладчика и Xdebug — отдельная задача, для обычного изменения шаблонов она не нужна.

  1. Откройте раздел Extensions сочетанием Ctrl+Shift+X в Windows или Linux.
  2. Введите в поиске PHP Intelephense.
  3. Найдите расширение автора Ben Mewburn.
  4. Нажмите Install и дождитесь установки.

устанавливаем пакет PHP Intelephense

Если используете Intelephense, выполните рекомендацию его разработчика и отключите встроенное расширение PHP Language Features, чтобы не получать пересекающиеся подсказки:

  1. В том же разделе расширений введите @builtin php.
  2. Найдите PHP Language Features.
  3. Отключите его. Если настройка нужна только этому проекту, используйте отключение для рабочей области, когда такой вариант доступен.
  4. Оставьте PHP Language Basics включенным: оно обеспечивает базовую подсветку PHP.

Отключаем PHP Language Features

Если Intelephense не устанавливаете, отключать встроенные PHP-возможности ради совпадения со скриншотом не нужно.

Чтобы анализатор видел классы и методы MODX, ему нужны доступные исходники или соответствующие описания типов. Открытая папка с одним чанком сама по себе не дает редактору сведения обо всем ядре и дополнениях.

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

Документация расширения доступна на странице PHP Intelephense.

Создаем ускорители для типовых вызовов MODX

Если регулярно создаете одинаковые вызовы, сохраните их в пользовательские фрагменты VS Code. Это сниппеты редактора, их не нужно путать с PHP-сниппетами MODX.

Порядок создания разобран в руководстве по собственным сниппетам VS Code. Вот пример моей конфигурации:

Пример конфигурации сниппета

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

  1. Откройте командную палитру.
  2. Выполните «Snippets: Configure Snippets».
  3. Создайте файл фрагментов для текущего проекта или глобальный файл фрагментов.
    Либо просто «Настройки» — «Фрагменты» — «Новый файл с глобальным фрагментом кода».
  4. Добавьте определения ниже и сохраните файл.
{
    "MODX resource field": {
        "scope": "html",
        "prefix": "modx-field",
        "body": [
            "[[*${1:pagetitle}]]"
        ],
        "description": "Вывести поле текущего ресурса MODX"
    },
    "Fenom file include": {
        "scope": "html",
        "prefix": "fenom-include",
        "body": [
            "{include 'file:chunks/${1:header}.tpl'}"
        ],
        "description": "Подключить файловый чанк через Fenom"
    }
}

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

Откройте .tpl с режимом HTML, начните вводить modx-field или fenom-include и выберите фрагмент из подсказок. При необходимости вызовите их сочетанием Ctrl+Space.

Выделенное имя поля или файла можно сразу заменить. Наличие фрагмента не создает сам чанк и не включает обработку Fenom.

Подключаем VS Code к файлам на хостинге

Если сайт работает локально и VS Code открыл его настоящий каталог, после сохранения файл уже находится на месте. Для работы с файлами на хостинге настроим подключение непосредственно из редактора.

Установка RemoteFS, параметры соединения и добавление удаленной папки подробно показаны в руководстве по Visual Studio Code, в разделе «Настройка FTP или sftp подключения и синхронизации VS Code при помощи RemoteFS». Повторять всю настройку здесь не будем.

  1. Настройте подключение по указанной инструкции. Если хостинг предоставляет SFTP, используйте его.
  2. Откройте командную палитру VS Code и выполните Remote FS: Add Folder to Workspace.
  3. Выберите настроенное подключение и откройте каталог файловых элементов своего проекта.
  4. Проверьте расположение файлов: при нашей настройке pdoTools это core/elements/ с каталогами chunks, templates, snippets и plugins.
  5. Откройте один тестовый файл, внесите небольшое изменение и сохраните.
  6. Убедитесь, что изменение сохранилось на сервере, затем проверьте страницу, на которой подключен файл. При необходимости очистите кеш MODX.

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

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

Не публикуйте конфигурацию подключения с паролем и не добавляйте ее в общий Git-репозиторий. Если одновременно редактируете файлы через админку MODX, следите, чтобы сохранение из редактора не перезаписало более свежую версию.

Проверьте соответствие путей. Например, локальный файл:

ModxCourse/chunks/header.tpl

должен попасть в:

core/elements/chunks/header.tpl

а не в дополнительный каталог core/elements/ModxCourse/chunks/.

Для подключения через расширение VS Code используйте документацию именно установленного расширения. Форматы конфигурации и названия параметров у разных инструментов отличаются. Не переносите настройки RemoteFS в другое расширение по аналогии.

Не сохраняйте пароли и приватные ключи в файлах, которые попадут в общий Git-репозиторий или публичный каталог сайта.

Настройка PhpStorm для работы с файловыми элементами

Скачайте установщик с официальной страницы PhpStorm. Отдельно устанавливать Java для обычного запуска IDE не требуется: JetBrains Runtime входит в дистрибутив.

Для знакомства доступен 30-дневный пробный период. Дальнейшее использование зависит от подходящей лицензии. Покупать PhpStorm только ради прохождения урока необязательно, вариант с VS Code остается рабочей альтернативой.

Создаем или открываем локальный проект

Запустите IDE и создайте проект с именем ModxCourse. Если локальная копия файлов уже есть, откройте существующий каталог вместо создания еще одной пустой папки.

Создаем новый проект

Для следующих примеров считаем, что папка ModxCourse содержит непосредственно файловые элементы:

ModxCourse/
├── chunks/
├── templates/
├── snippets/
└── plugins/

Если сайт уже работает на сервере, сначала скачайте его актуальные файлы. Не загружайте пустой проект поверх существующего каталога.

Для локальной разработки на компьютере можно сразу открыть настоящий каталог элементов сайта. В таком случае настройку Deployment пропускаем.

Работа с шаблонами Fenom в PhpStorm

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

Я проверил отдельный Fenom-плагин, но в моей установке после его включения зависал раздел File Types. После отключения плагина настройки снова открывались нормально. Поэтому в этой инструкции его не используем.

Это наблюдение относится к моей конфигурации, а не ко всем версиям PhpStorm. Ниже настроим Live Templates без зависимости от этого плагина.

Создаем свои фрагменты кода через Live Templates

В PhpStorm пользовательские заготовки называются Live Templates. Например, можно набрать короткое сокращение и получить вызов поля MODX, подключение файлового чанка или условие Fenom.

Это возможность редактора. Она не создает элементы MODX, не включает Fenom и не загружает файл на сервер.

Создаем группу заготовок

  1. Откройте Settings - Editor - Live Templates.
  2. Нажмите плюс и выберите Template Group.
  3. Назовите группу MODX.
  4. Выделите созданную группу.
  5. Снова нажмите плюс и выберите Live Template.

У каждой заготовки есть сокращение в поле Abbreviation, описание в Description и сам код в Template text.

Обычный тег поля MODX

Для первого примера заполните:

  • Abbreviation — modxfield.
  • Description — «Поле текущего ресурса MODX».

В Template text вставьте:

[[*$FIELD$]]$END$

Нажмите Edit Variables. Для переменной FIELD в колонке Default value укажите:

"pagetitle"

Кавычки в этом поле нужны: они обозначают строковое значение по умолчанию. Само поле можно будет заменить при вставке.

Подключение файлового чанка Fenom

Создайте еще одну заготовку:

  • Abbreviation — fenominclude.
  • Description — «Подключение файлового чанка Fenom».

Текст заготовки:

{include 'file:$FILE$'}$END$

В Edit Variables для FILE задайте значение по умолчанию:

"chunks/header.tpl"

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

Условие Fenom

Следующая заготовка:

  • Abbreviation — fenomif.
  • Description — «Условие Fenom».
{if $CONDITION$}
    $END$
{/if}

Для CONDITION можно оставить значение по умолчанию пустым. При вставке сначала введите условие, затем нажмите Tab, чтобы перейти к содержимому блока.

Как записать знак доллара в заготовке

В Live Templates запись $ИМЯ$ обозначает переменную самой заготовки. Поэтому обычный знак доллара, который должен попасть в код Fenom, записывается дважды: $$.

Например, для заготовки вывода заголовка через Fenom:

{$$_modx->resource.pagetitle}$END$

После вставки в редактор получится:

{$_modx->resource.pagetitle}

Двойной доллар нужен только в настройке Live Template. В готовом шаблоне сайта его оставлять не нужно.

Указываем, где доступны заготовки

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

Отметьте подходящий контекст HTML. Если установленный плагин предоставляет отдельный контекст Fenom, выберите и его. Названия и доступные пункты зависят от установленных плагинов.

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

Проверьте поле Expand with: для примеров удобно использовать Tab. Сохраните настройки кнопками Apply и OK.

Сюда вставь реальный скриншот PhpStorm: группа MODX в Live Templates, открыта заготовка fenominclude, видны сокращение, код, выбранный контекст и клавиша раскрытия. alt=»Создание фрагмента кода MODX через Live Templates в PhpStorm»

Проверяем вставку

  1. Откройте подходящий файл шаблона.
  2. Введите modxfield или fenominclude.
  3. Нажмите Tab.
  4. Замените выделенное значение, если требуется.
  5. Нажмите Tab еще раз для перехода к следующей позиции.

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

Если сокращение не раскрывается, проверьте выбранный контекст, тип файла и клавишу Expand with. Не меняйте синтаксис рабочего шаблона ради того, чтобы заготовка появилась в подсказках.

Готовый фрагмент можно сохранить и другим способом: выделите код в редакторе, выберите Code - Save as Live Template, затем задайте сокращение, параметры и контекст.

Создаем подключение к серверу

Для сайта на хостинге откройте главное меню IDE:

Main Menu

Перейдите в Tools - Deployment - Configuration. Другой путь в актуальном интерфейсе — раздел Deployment в настройках IDE.

Переходим в конфигурацию проекта

Нажмите плюс и создайте подключение. Если хостинг поддерживает SFTP, выберите этот тип:

Создаем FTP или SFTP соединение

Введите понятное имя сервера, например ModxCourse, и нажмите OK. Имя помогает различать подключения и не обязано совпадать с доменом.

Пишем имя сервера

На вкладке Connection укажите данные хостинга:

  • Host — адрес сервера.
  • Порт — значение, выданное хостингом.
  • User name — пользователь SFTP или SSH.
  • Способ аутентификации — пароль или ключ, в зависимости от предоставленного доступа.

Если не знаете реквизиты, запросите их у поддержки. Пароль администратора MODX не является автоматически паролем SFTP.

При первом подключении по SSH/SFTP проверьте отпечаток ключа сервера по доверенному источнику. Не подтверждайте неожиданную смену ключа без выяснения причины.

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

Test Connection

Настраиваем Root path и Mappings

В поле Root path задается удаленный каталог, относительно которого PhpStorm строит пути выгрузки. Он не обязан совпадать с корнем домена, но вы должны понимать, какой каталог выбрали.

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

Пример настройки FTP

В основном примере этой инструкции элементы находятся в core/elements/. Для него сопоставление может выглядеть так:

Поле Пример значения Что означает
Root path /home/account/site.ru/public_html/ Фактический каталог установки MODX на сервере.
Local path Локальный каталог ModxCourse Внутри него находятся chunks, templates, snippets и plugins.
Deployment path /core/elements Каталог относительно выбранного Root path.
Web path Не задаем публичный адрес для исходников Серверные элементы не должны открываться посетителям как обычные файлы сайта.

Путь /home/account/site.ru/public_html/ приведен для примера. На вашем хостинге он будет другим. Если SFTP-пользователь ограничен отдельным каталогом, видимый ему путь также может отличаться от полного пути файловой системы сервера.

Перейдите на вкладку Mappings и заполните сопоставление локального и удаленного каталогов.

Указываем Deployment path

На скриншоте показана структура с /tpl. Для нашего основного примера используйте /core/elements, если в Root path выбран каталог установки MODX.

Проверка получается такой:

Локально:
ModxCourse/chunks/my_chunk.tpl

На сервере:
/home/account/site.ru/public_html/core/elements/chunks/my_chunk.tpl

Не добавляйте core/elements одновременно и в Root path, и в Deployment path. Иначе можно получить лишнюю вложенность.

Если в качестве Root path сразу выбран фактический каталог core/elements/, то для корня локальной папки элементов в Deployment path используется /.

Проверяем ручную загрузку

Откройте Tools - Deployment - Browse Remote Host. В окне Remote Host выберите настроенный сервер.

Remote Host

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

  1. Измените один тестовый файл в локальном проекте и сохраните его.
  2. Нажмите на файл правой кнопкой мыши.
  3. Выберите Deployment - Upload to и нужный сервер.
  4. Дождитесь завершения передачи и проверьте сообщения в окне File Transfer.
  5. Откройте удаленный каталог и убедитесь, что файл оказался в правильном месте.
  6. Очистите кеш MODX при необходимости и проверьте результат на тестовой странице.

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

Автоматическая загрузка после сохранения

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

Откройте Tools - Deployment - Options. В параметре Upload changed files automatically to the default server выберите подходящий режим:

  • Never — не загружать автоматически.
  • On explicit save action — загружать после явного сохранения.
  • Always — загружать после ручного и автоматического сохранения файла.

Для начала удобнее выбрать On explicit save action. Это ближе к ожидаемому поведению «сохранил файл — отправил на сервер».

Включаем автозагрузку файлов

На скриншоте показан доступ к автоматической загрузке в использованном интерфейсе PhpStorm. Не путайте режим Always с загрузкой только по Ctrl+S: IDE может сохранять файлы автоматически.

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

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

Другие редакторы и IDE для работы с MODX

Использовать именно VS Code или PhpStorm необязательно. Файловые элементы MODX можно редактировать и в других инструментах:

  • OpenIDE — бесплатная IDE на базе IntelliJ Platform. Для PHP доступен плагин PHP for OpenIDE. Можно рассматривать для локальной работы с проектом, но поддержку Fenom и удобный способ передачи файлов на хостинг нужно проверить отдельно.
  • Apache NetBeans — бесплатная IDE с инструментами PHP, заготовками кода и поддержкой FTP/SFTP. Подойдет тем, кому нужна полноценная среда разработки. Специализированная поддержка Fenom не является обязательной частью ее возможностей.
  • Cursor — редактор на базе VS Code с AI-возможностями и импортом настроек. Если выбираете его, отдельно проверьте работу используемых расширений MODX и подключения к серверу.

Для прохождения курса менять привычный редактор не требуется. Важно, чтобы он удобно работал с HTML, PHP и шаблонами, открывал нужные файлы проекта и позволял контролировать сохранение изменений. Возможности подсветки и подсказок Fenom проверяйте отдельно: поддержка PHP или Smarty не означает полной поддержки Fenom.

Работа с файловыми элементами из админки MODX

Этот способ подходит для разовых изменений и небольших проектов, когда нет возможности открыть IDE. Но право редактировать шаблоны и PHP-файлы фактически дает возможность менять поведение сайта.

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

Подсветка кода

Для удобного редактирования можно установить совместимую с вашей веткой MODX версию Ace. Проверьте его работу именно в редакторе файла, а не только в шаблонах и чанках.

Подсветка помогает читать код, но не заменяет его проверку и не отменяет необходимость сохранять копию перед изменением.

Разрешения файлов .tpl и .php

В примерах файловые чанки и шаблоны имеют расширение .tpl, а PHP-сниппеты и плагины — .php.

В показанной конфигурации я добавлял tpl и php в системный список upload_files. Этот шаг не нужно повторять автоматически: начальные значения и ограничения зависят от версии MODX, настроек источника и прав пользователя.

Добавляем разрешенные к загрузке файлы в MODX

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

  1. Посмотрите ограничения самого источника, в том числе allowedFileTypes.
  2. Проверьте системное значение upload_files и права пользователя на нужную операцию.
  3. Если для доверенного разработчика действительно требуется разрешить tpl, добавьте только необходимое расширение, сохранив остальные значения.
  4. Повторите проверку на тестовом файле.

Не очищайте список разрешенных расширений и не добавляйте все типы файлов ради устранения одной ошибки.

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

Подробный разбор ошибки есть в статье «Расширение файла не допускается». Не путайте ограничения загрузки в файловом менеджере с настройками загрузки элементов через pdoTools.

Создаем отдельный источник файлов для кода

Если используете только VS Code или PhpStorm, отдельный источник в MODX для этого не обязателен. Он нужен для удобного доступа к каталогу из административной панели.

  1. Откройте «Медиа» — «Источники файлов». В другой версии интерфейса найдите одноименный раздел через меню.
  2. Создайте новый источник типа Filesystem или скопируйте существующий файловый источник.
  3. Если копируете источник изображений, проверьте унаследованные ограничения и права. Не считайте копию автоматически подходящей для исходников.

Копируем источник файлов

Назовем источник Code. Для стандартного каталога core/elements/ можно использовать такие свойства:

Свойство Значение для примера Пояснение
basePath core/elements/ Путь относительно базового каталога установки MODX.
basePathRelative Да Указывает, что basePath задан относительно каталога установки.
baseUrl Пустое значение Для этого источника не используем формирование публичных ссылок на код.
baseUrlRelative Да Настройка URL не используется как средство защиты файлов.
allowedFileTypes tpl Для начальной работы с файловыми чанками и шаблонами.

Если доверенному разработчику нужен доступ и к PHP-файлам, отдельно проверьте права и ограничения, затем при необходимости используйте tpl,php. Это не настройка для обычного источника изображений.

Если ядро переименовано или расположено вне стандартного каталога, значение core/elements/ не подойдет. Укажите фактический путь. Для абсолютного серверного пути параметр basePathRelative должен быть выключен.

Редактируем источник для файловых элементов

На скриншоте показан мой вариант с названием template и каталогом template/tpl/. Если у вас используется эта структура, она остается допустимой. Для текущего примера подставляйте свойства из таблицы выше.

Для каталога template/tpl/ серверный относительный путь будет таким же — template/tpl/ при basePathRelative = Да. Публичный URL для работы с исходниками не требуется.

Пустой baseUrl сам по себе не защищает файлы. Каталог кода должен быть закрыт от прямого HTTP-доступа правилами веб-сервера. Создание источника в MODX не должно отменять эту защиту.

Открываем и сохраняем тестовый файл

  1. Сохраните источник файлов.
  2. Перейдите на вкладку «Файлы» и выберите созданный источник.
  3. Раскройте нужный каталог, например chunks.
  4. Откройте существующий тестовый .tpl через действие редактирования.
  5. Добавьте короткий тестовый текст и сохраните файл.
  6. Откройте страницу, на которой подключен этот файл. При необходимости очистите кеш MODX.

Созданный источник

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

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

Ограничение allowedFileTypes не заменяет права доступа и запрет HTTP-доступа. Даже если в дереве отображаются только .tpl, сам источник по-прежнему нужно правильно ограничить.

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

Общие свойства источников и настройка путей разобраны в отдельной инструкции.

Проверяем, что редактируем нужные файлы

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

  • Известно, какой каталог использует pdotools_elements_path.
  • Редактор или источник файлов открывает именно этот каталог.
  • Для хостинга проверено соответствие локального пути серверному.
  • Изменение одного тестового файла появилось на нужной странице.
  • На рабочем сайте не перезаписаны чужие изменения.
  • Пароли, ключи и конфигурации подключений не попадают в публичный доступ.

Не редактируйте один файл одновременно через админку и локальную копию без обновления последней. Иначе следующая загрузка из IDE может затереть изменение, сделанное в браузере.

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

Когда рабочий инструмент настроен, можно переходить к созданию файловых шаблонов и подключению оформления. Сама смена редактора не требует менять синтаксис проекта: в файлах можно использовать стандартные теги MODX или подготовленные конструкции Fenom.

Файловые чанки, сниппеты и шаблоны pdoTools в MODX
← Предыдущая статьяФайловые элементы pdoTools: чанки, сниппеты и шаблоны
Следующая статья →Настройка прав доступа в MODX
MODX - настройка прав доступа
Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 1 оценка, среднее 5 из 5 )
Web-Revenue.ru