Натяжка верстки сайта на Битрикс. Интеграция шаблона сайта

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

Интегрируем шаблон сайтана битрикс

Подготавливаем путь для файлов шаблона, где будут лежать все файлы верстки, компонентов, языковые файлы, header.php и footer.php и остальные нужные проекту файлы Путь будет такой /local/templates/main/ Папку с шаблоном назовем "main" Работать будем с папкой local, а bitrix трогать вообще не будем. Разделим верстку страницы в битрикс на три части.

• Первую положим в header.php
• Вторую положим в index.php
• Третью положим в footer.php

Файлы header.php и footer.php будут подключаться на каждой странице сайта, а index.php будет у каждой странице свой.

header.php

В файле /local/templates/main/header.php понадобятся следующие записи

• if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); Данная строчка указывается в начале файла, для секюртости. Чтобы не могли открыть данный файл на прямую из браузера, без подключения ядра битрикса
• IncludeTemplateLangFile(__FILE__);Подключаются языковые файлы для шаблона
• $APPLICATION->ShowTitle();Отображение заголовка страницы из $APPLICATION->SetTitle("title")
• $APPLICATION->ShowHead();Выводит необходимый функционал в head
• $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/index.css");Подключается к шаблону файлы стилей, например для объединения
• $APPLICATION->ShowPanel();Подключает панель битрикса
• SITE_TEMPLATE_PATH;Содержит путь до шаблона, без последнего слеша, в частности /local/templates/main
• $APPLICATION->ShowTitle(false);Отображение заголовка страницы из $APPLICATION->SetPageProperty("title")
• $APPLICATION->GetCurPage(false) === '/';Необходим, если главная страница отличается от внутренней по верстке

footer.php

В файле /local/templates/main/footer.php понадобятся следующие записи

• if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();Рассмотрено выше
• IncludeTemplateLangFile(__FILE__);Рассмотрено выше
• $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/index.js");Подключается к шаблону файлы скриптов, например для объединения
• SITE_TEMPLATE_PATH;Рассмотрено выше
• $APPLICATION->GetCurPage(false) === '/';Рассмотрено выше

description.php

В файле /local/templates/main/description.php понадобятся следующие записи

• if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); //Рассмотрено выше
• IncludeTemplateLangFile(__FILE__); //Рассмотрено выше
• $arTemplate = Array("NAME"=>GetMessage('T_DEFAULT_DESC_NAME'), "DESCRIPTION"=>GetMessage('T_DEFAULT_DESC_DESC')); //Записываем имя шаблона и описание. T_DEFAULT_DESC_NAME и T_DEFAULT_DESC_DESC их значения лежат в языковых фалах в виде $MESS ['T_DEFAULT_DESC_NAME'] = "Главный шаблон";.

index.php

В файле /index.php понадобятся следующие записи

• require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php"); //Подключение шапки
• require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php"); //Подключение подвала

.section.php

В файле /.section.php понадобятся следующие записи

• $sSectionName = "Webpack app"; //Имя раздела в админ панели
• $arDirProperties = array("title" => "Webpack app", "description" => "", "keywords" => "", "robots" => ""); //Свойства раздела,используются как $APPLICATION->SetPageProperty("title")

Другие файлы и папки

В папке шаблона /local/templates/main/ также размещаются другие необходимые для работы файлы и папки

• components папка с компонентами -> bitrix пространство имен -> menu название компонента -> top имя шаблона -> template.php и др файлы компонента
• css -> index.css и другие файлы со стилями
• fonts -> файлы со шрифтами
• img -> файлы с изображениями
• include -> файлы подключаемые с помощью компонента $APPLICATION->IncludeComponent("bitrix:main.include", "", Array(), false);
• js -> index.js и другие файлы со скриптами
• lang -> en/ru -> description.php и другие файлы соименные файлы, где необходимо используется конструкция вида GetMessage('T_DEFAULT_DESC_NAME')

Подключение необходимых компонентов и другого функционала для окончанительной интеграции верстки на битрикс

На этом проекте были использованы следующие компоненты и функционал

• Подключаем логотипы, текст, контакты и другую свободную для редактирования информацию через "режим правки" в отдельные файлы с помощью bitrix:main.include
• Вывод одноуровневого меню, компонет bitrix:menu
• Вывод списка новостей, компонет bitrix:news.list
• Вывод всех элементов и разделов, компонент bitrix:catalog.sections.top
• Выводим статичные блоки section в отдельные подключаемые файлы, $APPLICATION->IncludeFile();
• Настройка страницы 404.php
• Настройка и вывод стандартных SEO данных из инфоблока
• Настройка детальной страницы через urlrewrite

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