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

Суть макросов

Большая часть готовых шаблонов панели управления на базе Bootstrap использует одинаковую структуру. В них есть сетка, кнопки, формы, блоки контента и таблицы. Набор HTML-элементов практически не отличается от шаблона у шаблону. Но различаются названия классов.

Например, шаблон AdminLTE в качестве "стандартного" блока вёрстки страницы использует класс box. В классическом Bootstrap 3 для этих же целей примеряется класс panel. Основной контент блока имеет класс box-body и panel-body соответственно. Получается, чтобы заменить один шаблон на другой, нам нужно просто поменять во всех названиях классов box на panel. Или на card, если у нас более свежая версия Bootstrap.

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

Настройка макросов

Управление макросами выполняется из раздела "Макросы". В столбце "Название" раскрыта задача макроса. В столбце "Код" указано название, которое можно использовать для вставки в шаблон и другие макросы.

Значение макроса - это то содержимое, которое в итоге будет вставлено в шаблон. Внутри значения может присутствовать как конкретный набор символов, так и значение другого макроса. Чтобы вставить значение макроса xxx в другой макрос, используйте код {xxx}.

Вы также можете вставлять значение из раздела "Параметры". Для вставки параметра с названием xxx будет использоваться код {cfg:xxx}.

Дополнительные параметры из основной конфигурации внешнего вида:

  • {mcfg:box} - основной цвет кнопок и элементов: success, warning, danger, primary, info, default
  • {mcfg:bg} - цвет окраски виджетов: light-blue, aqua, navy, teal, green, purple, yellow, orange, red, maroon, gray, black

Например, у нас есть макрос box для основного блока, который может содержать в себе блоки box-header, box-body и box-footer. Записываем эти макросы как {box}-header, {box}-body и {box}-footer соответственно. Теперь, если мы поменяем значение макроса box на panel, наши зависимые макросы преобразуются в panel-header, panel-body и panel-footer.

Вставка макросов в шаблон

Для вставки значения макроса с названием xxx в шаблон, используйте следующий код:

{tpl:xxx}

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

{tpl:cfg-xxx}

Полезные макросы

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

  • {tpl:skin} - папка стиля, например mystyle.
  • {tpl:skinpath} - путь к стилю, например /skin/mystyle, без слеша в конце.
  • {tpl:skincss} - путь к CSS-файлам, например /skin/mystyle/css, без слеша в конце.
  • {tpl:skinjs} - путь к JS-файлам, например /skin/mystyle/js, без слеша в конце.
  • {tpl:skinimg} - путь к картинкам, например /skin/mystyle/img, без слеша в конце.

Рекомендуемая настройка для Bootstrap-3

Перед тем, как натянуть шаблон на базе Bootstrap-3, рекомендуется настроить макросы для максимального соответствия классическому Bootstrap:

  • bg - bg-{mcfg:box}
  • bg-active - {bg}-active active-bg
  • box - panel
  • box-widget - {box-primary} widget
  • box-header - {box}-heading
  • alert - alert