Создание темы для SyDES

Возьмем какой-нибудь готовый 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}. При этом вы можете самостоятельно изменить шаблон этого инфоблока под стиль вашего сайта. Для этого в разделе Шаблоны добавьте новый шаблон инфоблока, выбрав сам инфоблок, поддерживающий шаблонизацию и прописав название шаблона. Необходимые файлы создадутся в вашей папке темы.

Видео по теме

© Arthur Grand, 2011–2017
Powered by SyDES