Базовый шаблон

Новый шаблон лучше делать на каком-то базовом простом варианте. В конце статьи вы найдёте ссылку на загрузку нужного файла. В нём есть несколько особенностей.

В первую очередь отмечу, что в шаблоне используется последняя Sass-версия UniCSS. Файл style.scss содержит подключения стилей из подкаталога templates — это тот css, который применяется в шаблоне. В нём я оставил то, что может пригодится при верстке. Структура и деление файлов может быть любой. Раньше я вообще всё в одном файле делал, но после решил, что «кошерней» будет разделить по функционалу. Делайте как вам удобней, это не принципиально.

В шаблоне используется новое меню, которое имеет улучшенную адаптивность. Это компонент menu и _menu.scss. Так же в my.js его js-код.

Прежде, чем что-то делать с шаблоном, нужно будет разобраться с UniCSS, что я сделаю в следующей статье. Поэтому сейчас просто ознакомимся с особенностями шаблона.

Для автокомпиляции scss-файлов используется стандартный sass-компилятор. Его запуск происходит через sass-watch.bat, как это я описал в статье Автоматическая компиляция SASS в CSS.

Компоненты привычные, но в них отсутствуют top1. Вместо этого используется file1, в которых указывается (в настройках шаблона) подключение custom/top1.php. То есть сама шапка вынесена отдельно без компонента. Технически так немного удобнее работать с файлами, хотя при желании вы можете использовать и обычные компоненты.

Файл custom/my-template.php содержит код, прописывающий опции шаблона в момент инициализации (первого включения). Обратите внимание на закоментированную строчку с mso_delete_option.... Убрав комментарий, можно будет заново прописать опции. Используйте эту возможность при отладке, но после того, как шаблон готов, строчку нужно закоментировать, чтобы не создавать лишние запросы к БД.

В каталоге main модульные сетки. В отличие от default-шаблона, здесь секции шапки и подвала не имеют общего контейнера, а значит это не позволит оформить общую тень или границу-окантовку. Зато такой вариант позволяет использовать шапку и подвал на всю ширину браузера. Таже это наклыдывает свой отпечаток на верстку компонентов — необходимо в самом компоненте прописывать layout-классы. Это, опять же, вопрос касаемый UniCSS, о котором пойдет речь дальше.

Каталоги type и type_foreach совпадают с дефолтным шаблоном, поэтому вы должны уже в них ориентироваться.

Если вы раньше делали шаблоны на MaxSite CMS, то заметите, что в новых версиях всё немного проще и логичней. Тот код, который не требует правки, «спрятан» в shared-каталоге, поэтому в шаблоне используется ровно то, что нужно вебмастеру. При этом сохранена (и даже улучшена) возможность расширения.

Кратко остановлюсь на порядке работы с шаблоном.

После того, как скопирован базовый шаблон, в новом нужно поправить info.php, где указать имя шаблона. После этого в админ-панели переключиться на него.

Перед тем, как что-то делать, следует определиться с модульной сеткой шаблона. Если общий контейнер не нужен, то это будет один вариант main-файла. Если нужен — другой.

Дальше нужно задать максимальню ширину сайта, например 1100px. Это уже уровень UniCSS и здесь нужно запустить sass-компилятор.

Теперь в main-файле нужно выставить ширину контента и сайдбара. В моём варианте это 67 / 30%. 3% — это промежуток между колонками. Иногда встречаются задачи, когда сайдбар нужно фиксировать по ширине — это требуется для рекламных блоков. Как правило эту задачу можно решить на классах UniCSS, но можно и вынести её отдельно в css-файл. Лучше эти моменты отработать на начальном этапе, чтобы потом не переделывать.

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

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

Когда такие вещи готовы, можно отладить вывод одиночной страницы. Здесь преходим на уровень type_foreach-файлов (info-top). Тут могут быть нюансы: если предполагается, что шаблон должен поддерживать множество info-top-файлов, то лучше заранее продумать их структуру и все возможные варианты.

Когда одиночная готова, можно заняться выводом архивных записей (архивы, рубрики, метки, авторы). Здесь также уровень type_foreach-файлов.

Дальше можно отладить вывод спец.страниц, вроде контактной формы, sitemap, форма логина/регистрации и т.д. Тут могут быть разные нюансы, нужно смотреть в каждом конкретном случае.

После того, как это всё сделано, можно приступать к главной. Первоначально желательно настроить вывод главной «типовым» способом, то есть без unit-файлов, а уже после этого можно переходить к юнитам. Тут, конечно же, многое зависит о опыта вебмастера.

В завершении отрабатываются «нестандартные» вопросы, например добавить вывод нового type-файла, или изменить типовой вывод рубрики или метки.

ps Если у вас есть какие-то вопросы по созданию шаблонов, задавайте их в комментариях.