LETUNOFF DOCS

Битрикс. Шаблон сайта и подключение header-footer

🧱 Суть

В 1С-Битрикс каждая страница сайта обычно состоит из трёх частей:

  • header – шапка сайта;
  • контент страницы;
  • footer – подвал сайта.

Такой подход позволяет хранить общие элементы в одном месте и использовать их на всех страницах.

Типичная структура страницы:

header.php
      │
      ▼
Контент страницы
      │
      ▼
footer.php

📦 Проблема

Если не использовать общий шаблон, придётся дублировать на каждой странице:

  • HTML-разметку;
  • <head>;
  • меню;
  • шапку;
  • подвал;
  • подключение CSS и JavaScript.

При изменении дизайна придётся редактировать десятки файлов.

✅ Решение

Использовать шаблон сайта.
Общие элементы размещаются в:

  • header.php
  • footer.php

А каждая страница содержит только собственный контент.

💻 Код

Подключение шаблона

Практически каждая страница выглядит одинаково:

<?php
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
 
$APPLICATION->SetTitle("Новости");
?>
 
<h1>Новости</h1>
 
<?php
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");
?>

Здесь:

  • подключается шапка сайта;
  • выводится содержимое страницы;
  • подключается подвал.

Что делает header.php

Во время подключения:

  • запускается ядро Битрикса;
  • формируется начало HTML-документа;
  • выводится <head>;
  • подключаются CSS и JavaScript;
  • отображается шапка сайта;
  • выводится меню и другие общие элементы.

Упрощённая схема:

header.php
    ├── <!DOCTYPE html>
    ├── <html>
    ├── <head>
    ├── CSS
    ├── JS
    ├── <body>
    ├── Header
    └── Меню

Что делает footer.php

После вывода контента подключается:

require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");

Он обычно содержит:

  • подвал сайта;
  • подключение оставшихся скриптов;
  • закрывающие HTML-теги.

Например:

Footer
<script>
</body>
</html>

Где находятся шаблоны

Современные проекты обычно используют каталог:

/local/templates/

Например:

/local/templates/main/

Типичная структура:

/local/templates/main/
├── header.php
├── footer.php
├── styles.css
├── template_styles.css
├── description.php
├── components/
└── assets/

Выбор шаблона

В одном проекте может существовать несколько шаблонов.

Например:

main
landing
admin
mobile

Какой шаблон использовать, определяется в настройках сайта.

Заголовок страницы

Для установки заголовка используется объект $APPLICATION:

$APPLICATION->SetTitle("Каталог");

Позже значение будет выведено в <title> внутри шаблона.

Получить текущий заголовок можно так:

$APPLICATION->ShowTitle();

Подключение стилей и скриптов

Современный способ подключения ресурсов:

use Bitrix\Main\Page\Asset;
 
Asset::getInstance()->addCss(
    SITE_TEMPLATE_PATH . "/css/style.css"
);
 
Asset::getInstance()->addJs(
    SITE_TEMPLATE_PATH . "/js/app.js"
);

Битрикс самостоятельно добавит их в <head> или перед закрывающим тегом </body>.

Константа SITE_TEMPLATE_PATH

Для обращения к файлам шаблона используется:

SITE_TEMPLATE_PATH

Например:

<img src="<?= SITE_TEMPLATE_PATH ?>/images/logo.svg" alt="Logo">

Это позволяет не указывать полный путь вручную.

Подключение компонентов

Чаще всего компоненты размещаются между header.php и footer.php:

<?php
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
 
$APPLICATION->IncludeComponent(
    "bitrix:news.list",
    "",
    []
);
 
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");
?>

Компонент сформирует содержимое страницы, а шаблон обеспечит единое оформление.

Частые ошибки

Не подключать header.php

Без него:

  • не инициализируется ядро;
  • недоступен объект $APPLICATION;
  • не подключаются стили и скрипты.

Не подключать footer.php

В результате:

  • страница может завершиться некорректно;
  • не подключатся некоторые JavaScript-файлы;
  • HTML останется незакрытым.

Дублировать общую разметку

Не стоит копировать:

  • <head>;
  • меню;
  • шапку;
  • подвал
    в каждую страницу.

Лучше разместить их в шаблоне сайта.

Жёстко прописывать пути

Плохо:

<img src="/local/templates/main/images/logo.svg">

Лучше:

<img src="<?= SITE_TEMPLATE_PATH ?>/images/logo.svg">

Подключать CSS и JS обычными тегами

Для ресурсов шаблона предпочтительнее использовать Asset, чтобы Битрикс мог управлять их подключением.

🎯 Вывод

  • Все страницы Битрикса строятся на основе шаблона сайта
  • header.php подключает ядро, шапку, стили и JavaScript
  • footer.php завершает формирование страницы
  • Шаблоны обычно располагаются в /local/templates
  • Общие элементы следует хранить в шаблоне, а не дублировать на каждой странице
  • Для подключения ресурсов рекомендуется использовать класс Asset

🔗 Связано