Интеграция своего дизайна для режима конструктора

Конструктор в Astra.CMS автоматически формирует итоговые шаблоны для сайта из взаимозаменяемых фрагментов для основных областей/блоков. Поэтому верстка и внедрение html кода и стилей имеет свои особенности и отличается от интеграции дизайна обычным способом.

Каркасы (layouts)

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

  • Фиксированная ширина, левая колонка блоков;
  • Фиксированная ширина, правая колонка блоков;
  • Фиксированная ширина, левая и правая колонка блоков;
  • Фиксированная ширина, без боковых колонок;
  • Резиновая ширина, левая колонка блоков;
  • Резиновая ширина, правая колонка блоков;
  • Резиновая ширина, левая и правая колонка блоков;
  • Резиновая ширина, без боковых колонок.

Основные области

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

Шапка сайта

Физическое расположение файлов этой области - wizard_config/[mysiteid]/header/.

  • header.tpl - файл шаблона.
  • header.css - файл стилей.
  • images - каталог с графическими файлами.

Эта область на уровне каркаса заключена в <div id="header"> ... </div> , поэтому имеет смысл делать классы стилей относительно #header. Для #header требуется обязательно указать свойство height.

Файлы preview.html и preview.css для исходных файлов генерируются автоматически для всех областей.

Подвал сайта

Физическое расположение файлов этой области - wizard_config/[mysiteid]/footer/.

  • footer.tpl - файл шаблона.
  • footer.css - файл стилей.
  • images - каталог с графическими файлами.

Эта область на уровне каркаса заключена в <div id="footer"> ... </div> , поэтому имеет смысл делать классы стилей относительно #footer. Для #footer требуется обязательно указать свойство height.

Левая колонка блоков

Физическое расположение файлов этой области - wizard_config/[mysiteid]/sidebar/left/.

  • sidebar.tpl - файл шаблона.
  • sidebar.css - файл стилей.
  • images - каталог с графическими файлами.

Эта область на уровне каркаса заключена в <div id="sl"> ... </div> , поэтому имеет смысл делать классы стилей относительно #sl. Для #sl требуется обязательно указать свойство width.

Обрамление левого блока

Физическое расположение файлов этой области - wizard_config/[mysiteid]/frame/left/.

  • frame.tpl - файл шаблона.
  • frame.css - файл стилей.
  • images - каталог с графическими файлами.

Шаблон должен содержать специальные вставки TITLE и CONTENT.

Правая колонка блоков

Физическое расположение файлов этой области - wizard_config/[mysiteid]/sidebar/right/.

  • sidebar.tpl - файл шаблона.
  • sidebar.css - файл стилей.
  • images - каталог с графическими файлами.

Эта область на уровне каркаса заключена в <div id="sr"> ... </div> , поэтому имеет смысл делать классы стилей относительно #sr. Для #sr требуется обязательно указать свойство width.

Обрамление правого блока

Физическое расположение файлов этой области - wizard_config/[mysiteid]/frame/right/.

  • frame.tpl - файл шаблона.
  • frame.css - файл стилей.
  • images - каталог с графическими файлами.

Шаблон должен содержать специальные вставки TITLE и CONTENT.

Центральная область

Физическое расположение файлов этой области - wizard_config/[mysiteid]/content/.

  • content.tpl - файл шаблона.
  • content.css - файл стилей.
  • images - каталог с графическими файлами.

Эта область на уровне каркаса заключена в <div id="content"> ... </div> , поэтому имеет смысл делать классы стилей относительно #content. Шаблон должен содержать специальную вставку CONTENT.

Строка навигации (хлебные крошки)

Физическое расположение файлов этой области - wizard_config/[mysiteid]/navigation/.

  • navigation.tpl - файл шаблона.
  • navigation.css - файл стилей.
  • images - каталог с графическими файлами.

В шаблоне используется стандартный набор данных для этого объекта.

Нумератор страниц

Физическое расположение файлов этой области - wizard_config/[mysiteid]/pager/.

  • pager.tpl - файл шаблона.
  • pager.css - файл стилей.
  • images - каталог с графическими файлами.

В шаблоне используется стандартный набор данных для этого объекта.

Блоки (для каждого типа)

Физическое расположение файлов для каждого из блоков - wizard_config/[mysiteid]/blocks/[blockid]. В шаблонах используются стандартные наборы данных для каждого из типов блоков.

Особенности верстки

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

Например, для шапки сайта все стили будут иметь вид:

#header .classname 
{}

Для центральной области:

#content .classname 
{}

Таким образом, каждая область (например шапка) будет состоять из своего tpl файла, своего css файла, и своей папки с картинками. Для выбранного варианта шапки физически это будет каталог wizard_config/[mysiteid]/header/.

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

constructoruse.jpg

Особенности языка шаблонов

В качестве языка шаблонов (tpl файлы) используется Smarty, такой же как при обычном способе интеграции дизайна. Кроме этого используются специальные вставки:

[IMAGESDIR]

Используется для указания пути к графическим файлам. Сами графические файлы загружаются либо с помощью веб-редактора, либо непосредственно в каталог wizard_config/[mysiteid]/header/images/ (для области шапки сайта).

<img src="[IMAGESDIR]/logo.gif">

Можно использовать так же и {$system.imgdir} как в обычных шаблонах.

[BLOCKS_LEFT]

Используется только в шаблоне левой колонки блоков (закладка «Колонка»). На этапе сборки замещается на функцию leftblocks, которая осуществляет вывод всех блоков с левым расположением.

[BLOCKS_RIGHT]

Аналогично для правой колонки блоков.

[TITLE]

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

[CONTENT]

Используется:

  1. В шаблонах обрамлений боковых блоков. На этапе сборки замещается на вывод переменной с содержимым блока.
  2. В шаблоне центральной области. Подразумевает область основног контента и позволяет добавить для него специальное обрамление.

Особенности оформления CSS

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

Пути к графическим файлам должны указываться в относительном виде: url('images/myimage.png'). При этом путь 'images/…' будет таким всегда, меняться могут только имена файлов.

Создание опциональных свойств

В tpl и css файлах можно использовать специальные конструкции для вынесения каких-то параметров в список визуальных опций (например цвет, размер шрифта и т.п.).

Формат

[?ид_опции caption="название опции" type="тип" default="значение по умолчанию"]

  • ид_опции – уникальное название опции в рамках темы, например header-height.
  • название опции – текстовое название, которое будет показано в редакторе опций.
  • тип – определяет тип значения и формат редактора для опции.

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

Доступные типы

  • string – любая строка.
  • px – целое значение (подставляется сразу с px на конце).
  • int - целое число.
  • color – цвет (подставляется в формате #FFFFFF).
  • select – несколько значений на выбор (список).
  • image – файл картинки.

Для типа select, в формате конструкции используется дополнительный параметр options="значение1:название1, значение2:название2, …".

Примеры

#header {
  height: [?header-height caption="Высота" type="px" default="225"];
}
#content {
  background: url('images/[?content-background caption="Фон" type="image"]');
}
#content a, #content a:visited {
  text-decoration: none;
  color: [?content-a-color caption="Цвет ссылки" type="color" default="FB9233"];
}
.pager { 
  font-size: [?pager-font-size caption="Размер шрифта" type="px" default="14"];
  text-align: [?pager-align caption="Выравнивание" type="select" options="left:Слева,right:Справа,center:По центру" default="center"];
}

Особенности для центральной/рабочей области

Центральная область включает в себя основной контент страницы, как для главной, так и для внутренних. В отдельном css файле, с префиксом #content следует указывать стили для форматирования заголовков, текста, списков, таблиц.

Шаблоны рабочей области всех типов страниц

Для всех предусмотренных в конструкторе типов страниц, шаблоны физически располагаются в wizard_config/[mysiteid]/templates/, откуда они копируются в момент сборки итоговых шаблонов. Веб-редактор этих шаблонов доступен в секции "Тема дизайна".

Шаблоны центральной области внутренних страниц можно редактировать и стандартным способом: «Панель управления» → «Файлы» → «Шаблоны», однако следует помнить, что изменения в этом случае могут быть потеряны после каких-то изменений в конструкторе.

 
constructor/mytheme.txt · Последние изменения: 01.10.2016 23:26 (внешнее изменение)