Шаблоны для новичков. Урок 19. Основы работы с D2

В наших уроках возникла некоторая пауза, за время которой вышла новая версия MaxSite CMS — 0.81, где появились новые совершенно замечательные возможности для вебмастеров. Речь, конечно же идёт о новом шаблоне D2, который строится на основе shared-каталога. Об отличиях я уже рассказывал в «Кратком обзоре новых возможностей MaxSite CMS 0.80». Для нас принципиальным будет тот момент, что теперь уроки будут рассчитаны на построение шаблона на shared-каталоге. Если раньше всё замыкалось на default-шаблон, то теперь шаблон строится независимым от любого другого шаблона.

Если мы посмотрим на D2 (который построен на базе shared-каталога), то в целом увидим привычные каталоги и файлы, только в меньшем количестве и немного в другой структуре. В этом также есть отличие от default-каталога — файлы, которые приходилось дублировать от шаблона к шаблону, теперь вынесены из шаблона в shared. Файлов меньше, код — чище.

В этом уроке мы разберём устройство D2.

Пустые каталоги

Пустые — условно. Отсутствие в каталоге файлов (кроме readme.txt) указывает на то, что шаблон будет использовать «нужный» файл из shared-каталога или он вовсе не нужен и будет использоваться типовой вариант вывода MaxSite CMS.

Type-файлы теперь находятся в shared/type и теперь организованы по своим подкаталогам.

Остальные каталоги уже привычны по default-шаблону.

«Главные» файлы

Нетрудно заметить, что в D2 стало меньше файлов. Остались лишь те, без которых работа шаблона будет неполной.

Файл info.php, как и прежде содержит информацию о шаблоне. Файл screenshot.jpg — миниатюра. Эти файлы не являются обязательными, но используются в админ-панели при переключении шаблона сайта.

Файл functions.php — специальный файл, который автоматом подключается при инициализации системы. Здесь задан один сайдбар, а также выполняются подключение php-файлов с разными библиотеками и функциями. Для своих целей, как и прежде лучше всего использовать custom/my_functions.php.

Файл index.php претерпел большие перемены и стал заметно меньше. Теперь всю диспетчеризацию выполняет ядро MaxSite CMS.

Файл main.php — модульная сетка сайта. В отличие от варианта из default-шаблона, этот файл также изменился. В первую очередь поменялись/добавились некоторые custom-файлы и ушки. Из-за этих изменений, не следует использовать старые custom-файлы из default-шаблона. Откройте main.php и убедитесь что подключается правильный файл.

Main-шаблон

Файл main.php может быть не один и это означает, что сайт теперь может иметь несколько модульных сеток одновременно. Например на сайте нужно выводить некоторые страницы без сайдбара. Раньше подобная задача решалась через custom-файлы, где нужно было вручную прописывать условия вывода сайдбара.

В D2 достаточно разместить отдельный main-файл в каталоге main и выбрать файл при редактировании записи или в настройках шаблона.

Откройте файл main/no-sibedar/main.php. Обратите внимание на то, что у BODY указан css-класс no-sidebar и удалён код подключения сайдбара из div.main.

Опции

Все опции шаблона теперь собраны в отдельном каталоге options. Сами опции теперь можно разбивать по ini-файлам. Удобно так: одна секция — один файл. Файл options.php выполняет все необходимые действия (точнее переносит их на shared-каталог).

По-умолчанию к шаблону подключаются дефолтные опции из shared/options/default. Однако, если в options.php указать

mso_set_val('get_options_default', false);

— то будут подключены только опции шаблона.

Type_foreach-файлы

Некоторые из них немного изменили своё назначение и несовместимы с default-шаблоном. Это объясняется тем, что код type-файлов изменился, соответственно что-то поменялось и здесь. Но в целом — это те же type_foreach-файлы.

Каталог type_foreach/info-top — особый. Он содержит type_foreach-файлы, которые подключаются как info-top.php. То есть можно создать несколько вариантов вывода info-top (заголовок и информация записи) и выбирать их при редактировании. Например файл header-only.php содержит вывод только заголовка записи, а category-and-header.php — рубрику и заголовок. То есть теперь можно у записей указывать разный формат вывода заголовка. Такая особенность присуща только info-top.

Компоненты шапки и подвала

Новые компоненты теперь имеют строгие правила. Прежде всего, каждый компонент расположен в отдельном каталоге. Имя компонента совпадает с его каталогом. Это обязательное условие, которое сделано по аналогии с type-файлами (там такие же правила именования).

Опции компонента располагаются файле options.ini и, если требуется, options.php. Эти файлы автоматически подключаются к админ-панели в настройках шаблона. В options.ini нужно использовать section, чтобы сформировать отдельную закладку компонента.

Если компонент использует css-стили, то их следует расположить в файле style.css — он автоматически подключится в HEAD сайта.

Компоненты могут быть двух видов: обычные и подкомпоненты. Разница между ними в том, что подкомпонент сам по себе не используется и как правило начинается с символа подчеркивания «_». Пример — _social: вывод соц.иконок. Этот компонент есть смысл использовать в другом, например в menu-icons, который состоит из подкомпонентов menu и _social. То есть подкомпонент может использоваться внутри другого, что делает его универсальным «кирпичиком».

Сейчас в D2 20 компонентов. Во многих компонентах также используется шаблонизатор Page_out. Здесь есть небольшой нюанс: в подкомпоненте лучше его не использовать, поскольку переменная $pt может перекрыться в подкомпоненте, что может нарушить вывод в браузер.

Компоненты, как и прежде выбираются через админ-панель. Если стоит задача зафиксировать подключаемые компоненты, то используем custom/header_components.php и custom/footer_components.php. Чтобы скрыть опции из админ-панели создаём файл options/07_blocks.ini с пустыми секциями блоков:

[Первый блок шапки]
[Второй блок шапки]
[Третий блок шапки]
[Четвёртый блок шапки]
[Пятый блок шапки]
[Первый блок подвала]
[Второй блок подвала]
[Третий блок подвала]
[Четвёртый блок подвала]
[Пятый блок подвала]

Данный подход я использовал в шаблоне MAX Bet.

CSS-стили

Подключение CSS-стилей практически не изменилось и полный алгоритм можно посмотреть в wiki.

Традиционно для вёрстки шаблона мы используем var_style.css, который автоматически формируется в var_style.php с помощью less-компилятора. На рабочем сайте компилятор лучше не использовать, поскольку он достаточно прожорлив (ну или как минимум использовать его кеширование).

То есть все css-стили формируются в виде less-файлов.

LESS-файлы

Все less-файлы теперь вынесены в отдельный каталог css-less. Структура его подкаталогов в общем-то может быть произвольной, но мы будем придерживаться текущего варианта.

Основной файл — var_style.less. Это диспетчер всех подключаемых стилей шаблона. Раньше я уже затрагивал вопросы организации less-файлов, здесь — готовый результат.

Полностью верстку будем разбирать в следующих уроках, здесь лишь некоторые интересные моменты.

Строчка

@import url('../../../shared/css-less/mixins/helpers.less');

— подключает стандартные less-хелперы из shared-каталога. Обратите внимание на относительный путь к файлу. Элемент «../» указывает на один уровень выше текущего.

Если вы будете использовать подключение less-файлов из подкаталогов к другому less-файлу, то путь указывается относительно var_style.less. Например в css-less/stock/calendar.less нужно подключить микс из css-less/mixins/calendar.less. В первом файле пишем:

@import url('mixins/calendar.less');

Это особенность сборки less-файлов, когда они вначале все собираются в один «виртуальный» файл, а после он компилируется как одно целое.

Обращу внимание на следующие строчки:

@MSO_IMPORT_ALL_BLOCKS;
@MSO_IMPORT_ALL_COMPONENTS;
@MSO_IMPORT_ALL_PLUGINS;
@MSO_IMPORT_ALL_TYPE;
@MSO_IMPORT_ALL_ELEMENTS;

Это специальные конструкции, которые работают только в MaxSite CMS и позволяют автоматически выполнять @import для всех файлов в каталогах:

• blocks
• components
• plugins
• type
• elements

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

Деление на подкаталоги, возможно вызовет у вас некоторые вопросы. Группировать less-файлы (читай css-стили) достаточно спорное занятие и наверное зависит от предпочтений вебмастера. Я исхожу из того, чтобы в файлах содержались стили логических html-блоков. Например вывод главной будет в type/home.less. Хотя, при этом часть стилей будет заимствована из mixins/columns.less. То есть следует просто ознакомиться с текущим вариантом, а использовать его или нет уже не имеет принципиального значения.

««« Урок 20 | Урок 18 »»»