FX2 для авторов тем

Кастомная панель dashboard¶

После входа в MODX Revolution первым делом вы видите Dashboard. У FX2 своя панель с быстрыми кнопками к частым функциям, встроенными видеоуроками и ссылками на документацию.

Редактирование dashboard¶

Для авторов тем важнее то, что dashboard легко правится через чанк «fx2.dashboard».

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

Настройка сайта¶

На dashboard нажмите Quick Link «Customize Your Site». Откроется кастомный компонент ClientConfig. Это удобный интерфейс, где конечный пользователь настраивает сайт после установки вашей темы.

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

Настройка ClientConfig¶

Нажмите Admin (правый верхний угол скриншота выше). По умолчанию Admin доступен только групе Administrators.

Щёлкните правой кнопкой по настройке в сетке: Update, Duplicate или Delete. Или нажмите «Add Setting», чтобы создать новую настройку.

Key, Label и Field Type обязательны. Поля по порядку:

| | Description | Поясняющий текст, чтобы пользователь правильно использовал настройку. | | Value | Значение поля. Пользователь может его изменить. | | Setting is required | Если включено, сохранить настройки ClientConfig нельзя без значения для этого ключа. | | Group | Настройки ClientConfig группируются во вкладки (см. скриншот выше). Группы настраиваются. | | Sort Order | Порядок настройки в группе. «0»: первая, вверху панели. |

Переменные настроек в CSS¶

Сочетая ClientConfig и инструменты управления CSS в FX2, вы даёте пользователю контроль над частью стилей и сохраняете контроль над тем, как стили встроены в тему. Для этого служит специальный чанк, имя которого задаётся в System Settings.

Важные системные настройки¶

Конечный пользователь меняет глобальные настройки через ClientConfig. Эти System Settings управляют поведением ClientConfig и FX2 themebase. Они не попадают в ClientConfig. Часть настроек дублируется в обоих местах для fallback. ClientConfig переопределяет System Settings.

В главном меню откройте Settings » System Settings. В «Filter by Area» выберите «FoundationX2». Можно изменить ключ «custom_css_chunk». «custom_css_filename»: имя выходного CSS-файла. Внизу страницы ещё две настройки:

«theme»: имя папки темы на диске, где хранятся assets темы и куда пишется динамический CSS. «theme_path» лучше не менять, но URL assets темы складывается из:

1. System Setting «assets_url» относительно document root, почти всегда «assets/»,
2. папки «themes/», куда кладут assets тем,
3. значения «theme», здесь «foundation-4.3.1».

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

Специальный CSS-чанк¶

На вкладке Elements в дереве, в категории FX2 themebase » Structure, откройте чанк «fx2.custom.css».

Содержимое чанка: CSS-декларации. Плейсхолдер [[++logo]] берётся из ClientConfig с ключом «logo». На скриншоте значение передаётся в Output Modifier «imgattr», который возвращает атрибуты изображения, здесь height и width. Так MODX динамически собирает CSS из данных пользователя.

Ещё пример из этого чанка:

h1, h2, h3, h4, h5, h6 {
    font-family: "[[++header_font:default=`[[++body_font]]`:replace=`+== `]]", Helvetica, Arial, sans-serif;
    color: #[[++header_font_color]];
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    color: #[[++header_font_color:lighten=`226`]];
}

[[++header_font]]: настройка ClientConfig со списком шрифтов Google Web Font API. Output Modifier задаёт default из [[++body\_font]] и заменяет «+» на пробелы для корректного CSS. [[++header\_font\_color]] используется как есть и с модификатором «lighten» из extra cssSweet. Подробнее см. документацию cssSweet.

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

Выходной CSS-файл¶

В главном меню выберите Site » Clear Cache. Плагин парсит специальный CSS-чанк, подставляет динамические значения и сохраняет файл. На вкладке Files в дереве, в папке assets темы, в подпапке «css/» появится выходной файл, здесь «custom.min.css».

Файл можно открыть в File Tree, но при следующем Site » Clear Cache содержимое перезапишется.

Подключение CSS в шаблоне¶

На вкладке Elements откройте чанк «fx2.styles».

System Setting [[++theme\_path]] используется повсюду. Можно поступить так же и указать свои подпапки и имена файлов. [[++theme\_path]] строится из [[++theme]], поэтому при смене theme URL соберутся корректно. Внизу ссылка на Custom CSS с теми же переменными, что у плагина генерации. Эту ссылку обычно не нужно править.

Когда пользователь меняет значения в ClientConfig, а вы использовали их в custom CSS chunk, после Site » Clear Cache значения попадут в CSS-файл, подключённый в шаблоне после остальных CSS. Предпочтения пользователя отобразятся на сайте.