Разработка стилей

В XF2 мы представили совершенно новый способ создания и редактирования стилей, который называется "Designer mode". Режим дизайнера - это набор инструментов интерфейса командной строки, которые позволяют изменять определенные шаблоны в рамках стиля непосредственно в файловой системе. Он также выводит различные метаданные и информацию о свойствах стиля, которые полезны для контроля версий и совместной работы.

Включение режима дизайнера

Первый шаг к включению режима дизайнера - включить его в config.php:

$config['designer']['enabled'] = true;

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

$config['designer']['basePath'] = 'src/styles';

Включение режима дизайнера для стиля

Режим дизайнера должен быть явно включен для каждого стиля. Мы включаем режим дизайнера для стиля, используя интерфейс командной строки, указав идентификатор стиля для стиля и выбрав "designer mode ID":

ID режима дизайнера - это идентификатор, который вы будете использовать для будущих команд, связанных с режимом дизайнера. После включения текущие измененные компоненты стиля будут экспортированы в каталог [basePath]/[designer_mode_id].

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

Отключение режима дизайнера для стиля

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

По умолчанию это сохранит копию вывода режима дизайнера в файловой системе. Чтобы удалить данные, вы можете запустить ту же команду с параметром --clear:

Что и где выводится?

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

Шаблоны

Шаблоны будут выведены в каталог [basePath]/[designer_mode_id]/templates. В этом каталоге у вас может быть другой каталог для каждого типа (например, администратор, электронная почта и публичный).

Шаблоны будут выводиться в формате HTML, и их можно будет напрямую редактировать в файловой системе. Изменения, внесенные в файловую систему, импортируются и компилируются, когда этот шаблон загружается на страницу. Точно так же вы можете отменить шаблон, удалив его из файловой системы (если он был ранее изменен).

Свойства и группы стилей

Свойства и группы стилей будут выведены в каталоги [basePath]/[designer_mode_id]/style_properties и [basePath]/[designer_mode_id]/style_property_groups. Они экспортируются в формате JSON и служат полезным способом отслеживания изменений в этих файлах через систему контроля версий.

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

Изменение определенного шаблона

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

Чтобы пометить шаблон как измененный в рамках стиля, вы можете сделать это обычным способом, отредактировав его в Admin CP. Шаблоны и свойства стиля, измененные в Admin CP, будут автоматически записаны в файловую систему, если включен режим дизайнера. Однако, вероятно, было бы удобнее изменить или «прикоснуться» к шаблону с помощью команды CLI:

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

Если вы хотите создать полностью настраиваемый шаблон в своем стиле (который не существует ни в одном другом стиле в дереве), вы можете использовать ту же команду, но вы должны просто передать параметр --custom:

Другие полезные команды

Есть ряд других полезных команд, относящихся к режиму дизайнера:

Экспорт из базы данных

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

Также можно экспортировать только определенные типы, например: xf-designer:export-templates.

Импорт из файловой системы

Эта команда перезапишет копию базы данных стиля тем, что находится в файловой системе:

Также можно импортировать только определенные типы, например: xf-designer:import-templates.

Синхронизация шаблонов

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

Вернуть шаблон

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

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