Возьмем какой-нибудь готовый HTML шаблон под bootstrap и за несколько шагов сделаем его совместимым с cms. Так же рассмотрим создание шаблонов для инфоблоков.
Этап первый - подготовка
Для начала установите чистую версию SyDES на сервер и создайте тестовый сайт. Он еще пригодится пару раз для обхода рутины. Затем в директории template создайте папку с уникальным названием, содержащим только латинские буквы и цифры. Из вашего html шаблона выберите файл с какой-нибудь простой страницей, например с контентом на всю ширину, залейте в папку темы и переименуйте в page.html. После этого можете залить рядом папки со стилями, скриптами, картинками и шрифтами.
Не забудьте в файле изменить пути до стилей и скриптов, в этом вам поможет метка {template}, которая превратится в строку template/yourtheme/, а так же удалить подключение jquery и bootstrap, ибо они будут автоматом подгружены.
Затем в админке пройдите в Система - Настройки - Сайты - Изменить (свой сайт) и выберите новый шаблон. После чего просто пройдите в Система - Шаблоны и у вас в папке с темой создадутся макеты и файл manifest.ini, в котором вы можете подправить данные о теме.
Этап второй - добавление динамики
Сделайте следующие замены разметки или просто добавьте в указанные места.
<html lang="en"> |
<html lang="{language}">
|
<title>Single page</title> <meta name="description" content=""> <meta name="keywords" content=""> <base href="http://demosite.com/"> |
{head}
|
<body> |
<body>
{toolbar}
|
Кусок кода, являющийся контентом |
{alerts}
{layout}
|
Текущий год в копирайтах |
{year}
|
Теперь у вас почти готовая тема, которую можно править по собственному вкусу. Проверьте это, открыв главную страницу сайта.
Этап третий - создание макетов
Оцените, какие макеты вам могут понадобиться. Обычно идет разделение по типам материалов. Это могут быть главная, страница, новость, категория, товар, проект или что-нибудь еще. Создайте их в админке в разделе Шаблоны, указав ключ макета, название и разметку, которая часто отличается лишь количеством колонок. В папке с темой у вас создадутся нужные файлы, которые вы можете править в любимом ide. В случае если несколько макетов имеют идентичную верстку или с незначительными отличиями, то их можно клонировать.
Четвертый этап - инфоблоки
Некоторые блоки кода, вроде слайдеров, баннеров или виджетов, можно вырезать из шаблона и вставить в свежесозданные инфоблоки, которые выводятся метками {iblock:slider}. Это очень сильно упростит дальнейшую работу с шаблоном.
Главное меню нужно заменить на метку {iblock:menu?show=main&class=main-menu} где class можно указать свой. В результате будет выведен маркированный список со всеми страницами, у которых статус "В меню". Так же можно создать меню самостоятельно, в констукторе, и вывести через указанную метку.
Для категорий товаров или блога можно выводить списки страниц меткой {iblock:page}. При этом вы можете самостоятельно изменить шаблон этого инфоблока под стиль вашего сайта. Для этого в разделе Шаблоны добавьте новый шаблон инфоблока, выбрав сам инфоблок, поддерживающий шаблонизацию и прописав название шаблона. Необходимые файлы создадутся в вашей папке темы.
