Работа с макетом в Амиро CMS

Ранее мы уже касались данной темы. Тогда речь шла об интеграции страницы и вопрос макета был затронут лишь частично. Сейчас же я предлагаю разобраться во всем более детально. Это поможет понять принцип работы и ускорит ваши дальнейшие процессы интеграции.

Интерфейс страницы разработки макета

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

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

меню в админке амиро

Далее идет поиск по имеющимся макетам.

поиск макета в амиро

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

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

список макетов страниц в амиро

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

Под списком расположена рабочая область. Здесь-то мы и будем разрабатывать структуру нашей страницы или внедрять уже готовый дизайн. Выглядит она следующим образом:

редактирование макета в амиро

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

Данная форма содержит несколько блоков. Давайте разбираться по порядку:

1) галочка Макет по умолчанию позволяет выбирать текущий макет для всех вновь создаваемых страниц. В противном случае это предстоит делать вручную. Рекомендуется сделать типовую страницу для сайта (если подразумевается один макет для всех страниц) и выставить ее в качестве макета по умолчанию.

2) Схема макета (справа) и названия блоков, входящих в макет. Здесь отображается структура нашего макета и название его фрагментов. Названия мы вправе выбирать любые, но лучше передавать смысл содержимого, называя их шапка, контент, подвал, меню и так далее. В дальнейшем это поможет проще ориентироваться в них при заполнении страниц информацией.

3) 5 закладок с кодом (макет, стили и содержимое для тега head) — здесь происходит самое интересное. Макет — это каркас нашей страницы. По умолчанию он создан на таблицах мы же вправе изменить его на блочную верстку или оставить так (дело личных предпочтений).

В макете мы видим некие фрагменты кода <td valign=top id=lay_f1 height=100></td> — это обертка для некоего блока под номером 1, который после редактирования отобразится на схеме макета и будет носить название первого фрагмента макета. Обычно нумерацию делают сверху вниз и первым по порядку идет блок с именем Header или Шапка.

Внутри этого контейнера в коде макета расположен код ##lay_f1_body## — это обязательная часть и в режиме заполнения страницы именно сюда мы будем вставлять содержимое нашей шапки. Здесь важно, чтобы контейнер имел именно id (не класс) с идентификатором содержимого и эти обозначения совпадали по номерам. То есть, такой вариант будет неправильным: <div id=lay_f3>##lay_f2_body##</div>. Должно быть так: <div id=lay_f3>##lay_f3_body##</div>.

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

Следующие три закладки — это стили. Амиро предлагает нам заполнять стили непосредственно в движке. Можете последовать их рекомендациям. Я же предпочитаю работать через ftp и выношу стили во внешний файл. Таким образом у меня он один, а здесь их как минимум три и при этом нет нумерации строк. То есть, найдя ошибку при верификации, либо при редизайне, вам придется вручную искать фрагмент кода в стилях макета и править его непосредственно из админки.

Вынося же в отдельный файл, мы единовременно копируем по очереди все стили. Сначала системный, затем CSS пользователя. Вставляем их содержимое в css-файл. Ниже по коду вставляем стили от нашей страницы и сохраняем в папке нашего сайта, одновременно прописывая адрес в закладке Код для HEAD. Туда же нужно прописать путь для файла со скриптами, если в вашем шаблоне используются скрипты.

Хочу отметить, что библиотека jQuery прикрепляется автоматически и повторно указывать её не нужно. Версию прикрепляемой по умолчанию библиотеки можно обновить. Для этого необходимо зайти в меню Сервис — Настройки системы — Локализации и открыть используемую локализацию. В нашем случае это Ru. Там вы увидите ссылку на библиотеку jQuery, которую при необходимости можете заменить на ту, которая должна использоваться в ваших скриптах.

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

Понравилась статья? Расскажи о ней друзьям!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *