Немного теории
Шаблон сайта — общие для нескольких страниц и разделов части внешнего вида. Обычно шаблон делится на «шапку» и «подвал» (или header и footer), а все, что отображается по центру страницы, — это уже содержательная ее часть.
В Bitrix Framework шаблон сайта — это физическая папка на сервере в директории /local/templates/ (или /bitrix/templates/) с несколькими обязательными файлами: header.php и footer.php. Когда фреймворк показывает посетителю страницу, сначала ядро продукта подключает файл шаблона header.php, затем саму страницу, после - footer.php. Исходя из логики верстки, вам нужно разделить HTML между этими двумя файлами.
Если вы откроете шаблон сайта через панель администратора, то увидите единое текстовое поле с указанием заменить рабочую область на #WORK_AREA#. На самом деле в момент сохранения этой формы ядро продукта использует макрос #WORK_AREA# как разделитель и все, что было указано до него, отправит в header.php, все, что после, — в footer.php.
В папке с шаблоном сайта могут быть произвольные CSS, JS-файлы, файлы изображений, шрифты и вспомогательные php-файлы, чтобы избежать дублирования кода. Также внутри шаблона сайта могут располагаться шаблоны компонентов. Шаблон компонента будет доступен только на тех страницах и в тех разделах, которые используют этот шаблон сайта.
В системе предусмотрен шаблон сайта по умолчанию под названием «.default». Этот шаблон нельзя подключать ни к одной странице или разделу, он предназначен для создания “общих” ресурсов. Если у вас есть общие CSS, JS и другие файлы для нескольких шаблонов сайта — разместите их тут. Также в «.default» можно разместить шаблоны компонентов, которые должны быть доступны во всех шаблонах сайта (обычно это меню, поиск в шапке, кнопки авторизации, корзина в интернет-магазине и т.д.)
В шаблоне сайта должны преобладать HTML-верстка, вызовы компонентов и никаких сложных PHP-операций. В реальных проектах в шаблонах сайта полезными будут следующие константы и методы:
- LANGUAGE_ID;
- SITE_TEMPLATE_PATH;
- SITE_DIR;
- CMain::showTitle;
- CMain::showHead;
- CMain::showPanel;
- CMain::includeComponent;
- \Bitrix\Main\Localization\Loc::getMessage;
- \Bitrix\Main\Page\Asset::addJs;
- \Bitrix\Main\Page\Asset::addCss;
- \Bitrix\Main\Page\Asset::addString.
В шаблоне сайта часто используются языковые переменные: метод \Bitrix\Main\Localization\Loc::getMessage и языковые файлы в папках lang в массиве $MESS.
Существует две причины их использовать:
- Подготовка проекта для перевода на другие языки.
- Отделение контентной части от HTML-разметки (так же, как стили выносятся в CSS-файлы, а скрипты — в JS).
В системе существует специальный модуль «Перевод» (translate), который позволяет собирать языковые файлы из проекта, выгружать их в Excel и импортировать из таблицы в языковые файлы. Очень удобно, когда нужно упростить управление текстовым контентом сайта.
Для начала работы со своим шаблоном сайта требуется получить от верстальщика файлы сайта (HTML, CSS, JS и прочие). В настоящее время широко используются сборщики, генерирующие один большой файл CSS и один файл JS для всего проекта. Хотя для серьезного ускорения фронтенд-части проекта рекомендуется оптимизировать файлы, и для каждой страницы отдавать только те стили и скрипты, которые на ней используются.
Фреймворк поддерживает все виды сборок. Для единых файлов стилей и скриптов лучшее расположение — шаблон «.default», для блочного разбиения есть возможность размещать ресурсы непосредственно в компонентах.
Практика
Разберем как устроен шаблон сайта
Шаблон сайта. Часть 1
7 мин
В следующем видео:
- Установим готовый шаблон сайта.
- Научимся включать разные шаблоны для разных страниц сайта.
- Познакомимся с устройством шаблона на небольших примерах по его доработке.
Шаблон сайта. Часть 2
7 мин