Тема Dummy — шаблон для разработки новых тем

(бета-версия)

Содержание...

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

JavaScript структурирован. Почти вся JavaScript-логика шаблонов находится в отдельных файлах, чтобы не смешивать код шаблонов и скриптов.

CSS-стили находятся в отдельных папках, а в корне темы расположены только шаблоны и системный файл с настройками (theme.xml).

Тема Dummy поддерживает все базовые приложения фреймворка Webasyst: «Сайт», «Магазин», «Блог», «Фото», «Хаб», «Поддержка». Тема предназначена для разработчиков и не доступна в приложении «Инсталлер», скачать её можно только на GitHub.

Наследование

Темы семейства Dummy используют наследование. Тема для site является родительской, а темы других приложений (shop, blog, hub, photos, helpdesk) наследуют ее CSS-стили, JavaScript и верстку.

Родительская тема рассчитывает, что в дочерних темах должны быть следующие шаблоны:

  • head.html — шаблон с ресурсами дочернего приложения, подключится в конце секции <head>;
  • main.html — шаблон с контент-частью дочернего приложения;
  • header.html — шаблон части шапки сайта (в верхней части страниц сайта), т. к. у каждого приложения разный набор функций;
  • sidebar.html — шаблон левой колонки дочернего приложения;
  • footer.html — шаблон подложки дочернего приложения.

Основные этапы создания новой темы

1. Подготовка

  • Скопируйте исходные файлы темы Dummy в директорию wa-apps/site/themes/[theme_id]/. По аналогии скопируйте соответствующие исходные файлы темы Dummy в поддиректории themes/ других приложений.
  • В файле theme.xml темы каждого приложения смените идентификатор dummy на свой собственный.
  • В разделе «Структура» приложения «Сайт» в настройках поселений приложений выберите свою тему.

2. Проектирование

Заранее продумайте основу всего сайта, которая будет реализовована в родительской теме приложения site:

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

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

Для примера, шаблон sidebar.html в приложении site реализует отображение колонки слева определенного размера, а в приложении shop он реализует уже меню каталога и фильтры.

Отсюда прослеживается аналогия с CSS- и JavaScript-ресурсами вашей собственной темы — общее для всего сайта оформляется в теме приложения site, а частное — в отдельной теме конкретного приложения.

3. Разработка

  • Создайте основу в родительской теме приложения site.
  • Реализуйте частную функциональность и размещение содержимого страниц в дочерних темах остальных приложений.

4. Быстрое создание своей темы дизайна на основе Dummy

Используйте консольную команду createTheme, например:

php wa.php createTheme site,shop,blog mytheme -name 'My theme' -version 1.0.0 -vendor 123456 -prototype dummy
  • Создайте основу в родительской теме приложения site.
  • Реализуйте частную функциональность и размещение содержимого страниц в дочерних темах остальных приложений.

Полезные ссылки