Перейти к содержимому
BXWiki

Шаблоны сайта в 1С-Битрикс - header, footer, свойства страниц

Шаблон сайта - это внешнее обрамление всех страниц: разметка, стили, логотип, меню, подвал. Сам он статичен, динамику внутрь подставляют компоненты, а тело конкретной страницы вставляется в специальную точку. Разберём устройство шаблона и всё, что связано с заголовками и свойствами страниц.

Как это работает

Страница состоит из трёх зон в фиксированном порядке. Пролог header.php - это верх и левая часть: секция head, логотип, меню, поиск. Дальше идёт рабочая область, отмеченная в шаблоне разделителем #WORK_AREA#. Завершает страницу эпилог footer.php. Границы зон разработчик проводит произвольно, но порядок обязателен, а без разделителя #WORK_AREA# шаблон просто не сохранится.

Физическая страница подключает пролог и эпилог. Обычный index.php первой строкой подключает header.php, последней - footer.php, а между ними лежит содержимое. Страница без компонентов отдаётся как обычный файл, вообще не обращаясь к базе.

Где лежат шаблоны. Пользовательские - в /local/templates/<id>/, системные - в /bitrix/templates/<id>/, общие ресурсы - в .default. Идентификатор шаблона состоит только из латинских букв и цифр. Внутри папки: header.php, footer.php, description.php с названием шаблона, .styles.php с описанием стилей для визуального редактора, template_styles.css для стилей самого шаблона и styles.css для стилей контента. Рядом - папки components, images, include_areas, lang, page_templates, snippets, themes.

Шаблонов у сайта может быть несколько. Каждому назначают условие применения и индекс сортировки: папка или файл, группа пользователей, период времени, параметр в URL, PHP-выражение. Система перебирает шаблоны по возрастанию сортировки и применяет первый подошедший - поэтому индекс сортировки задавать обязательно.

Служебные вызовы в секции head отложенные. ShowMeta() выводит метатеги из свойств страницы, ShowTitle() - заголовок, ShowHead() - служебную часть ядра с подключением CSS и JS. Сразу после открывающего тега body ставится ShowPanel() для административной панели. Все они отложенные: значение подставится при рендере, даже если установлено ниже по коду.

Два разных заголовка. Метод SetTitle() задаёт основной заголовок страницы, который выводится в теге h1. Свойство title, заданное через SetPageProperty(), попадает в заголовок вкладки браузера и имеет приоритет именно там. Так видимый заголовок и заголовок вкладки могут различаться.

Примеры

1. Каркас страницы и шапка шаблона

<?php
require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/header.php');
$APPLICATION->SetTitle('Заголовок страницы');
?>


Контент страницы - это и есть рабочая область


<?php
require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/footer.php');
?>

Шапка самого шаблона выглядит так:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=<?=LANG_CHARSET?>">
    <?$APPLICATION->ShowMeta("keywords");?>
    <?$APPLICATION->ShowMeta("description");?>
    <title><?$APPLICATION->ShowTitle()?></title>
    <?$APPLICATION->ShowHead()?>
</head>
<body>
<?$APPLICATION->ShowPanel();?>
<!-- логотип, меню, поиск -->

Обязательный минимум секции head: метатеги через ShowMeta(), заголовок через ShowTitle() и служебная часть через ShowHead() - без последней не подключатся стили и скрипты ядра.

2. Заголовок страницы и заголовок вкладки

<?php
require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/header.php');


$APPLICATION->SetTitle('О магазине');                          // пойдёт в h1
$APPLICATION->SetPageProperty('title', 'Магазин Твой стиль');  // пойдёт в title вкладки
?>
<h1><?php $APPLICATION->ShowTitle(false); ?></h1>

Ключевая деталь: ShowTitle() без параметра сначала смотрит на свойство title, поэтому в теге h1 его использовать нельзя - туда попадёт заголовок вкладки. Для видимого заголовка нужен строго ShowTitle(false).

Помните и о порядке: последний вызов побеждает. Компоненты вроде bitrix:news и bitrix:catalog с включённой опцией «Устанавливать заголовок страницы» заменят ваш заголовок названием элемента или раздела.

3. Свойства страницы и метатеги

$APPLICATION->SetPageProperty('keywords', 'кресла, стулья, мебель');
$APPLICATION->SetPageProperty('description', 'Каталог мебели с доставкой');

Чтобы свойство превратилось в метатег, его выводят отложенным ShowMeta() с тем же именем. Тонкость, которая стоит нервов: если имя типа свойства не совпадает с именем HTML-метатега, ShowMeta() молча ничего не выведет - свойство заполнено, а метатега в коде нет.

Свойства можно задавать и на уровень раздела - через файл .section.php, тогда они действуют на все страницы внутри.

4. Передача разметки из рабочей области в шапку

// в template.php компонента, то есть в рабочей области
<?$this->SetViewTarget('sidebar');?>
    <div class="element-filter"><!-- фильтр --></div>
<?$this->EndViewTarget();?>


<div class="element-list"><!-- основной вывод --></div>
// в header.php шаблона сайта, выше по коду
<div id="sidebar">
    <?$APPLICATION->ShowViewContent('sidebar')?>
</div>

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

5. Включаемые области

$APPLICATION->IncludeComponent('bitrix:main.include', '', [
    'AREA_FILE_SHOW' => 'sect',            // файл раздела
    'AREA_FILE_SUFFIX' => 'inc',
    'EDIT_TEMPLATE' => 'standard.php',
]);

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

Справочник API

МетодНазначениеОсобенности
#WORK_AREA#точка вставки рабочей областибез разделителя шаблон не сохранится
ShowHead()служебная часть секции headподключает CSS и JS ядра, метатеги
ShowMeta($name)вывод метатега из свойстваимя типа свойства должно совпадать с именем метатега
ShowTitle()заголовок для вкладки браузераучитывает свойство title
ShowTitle(false)основной заголовок страницыэто и нужно в теге h1
ShowPanel()административная панельсразу после открывающего body
SetTitle()установка основного заголовкапобеждает последний вызов до эпилога
SetPageProperty()свойство текущей страницыtitle имеет приоритет в заголовке вкладки
SetDirProperty()свойство разделадействует на страницы раздела
GetPageProperty() / GetTitle()чтение значенийв шаблоне ненадёжны: компонент может установить значение позже
SetViewTarget() / EndViewTarget()запись разметки в именованную областьвызывается в шаблоне компонента
ShowViewContent()вывод накопленной областивызывается выше по коду, в шапке
bitrix:main.includeвключаемая областьконтент правит менеджер, место задаёт разработчик
template_styles.css / styles.cssстили шаблона и стили контентапервый для вёрстки, второй для содержимого страниц
.styles.phpописание стилей для визуального редактора

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

Пустой заголовок или метатег на страницах с компонентом. Симптом: в шаблоне вызвали GetPageProperty() или GetTitle(), а там пусто. Эти методы читают значение в момент вызова, а компонент установит его позже. В шаблоне должны быть только отложенные ShowTitle(), ShowMeta() и ShowProperty().

В теге h1 оказался заголовок вкладки. Причина - вызов ShowTitle() без параметра: он сначала берёт свойство title. Для видимого заголовка нужен ShowTitle(false).

Заголовок страницы подменяется сам. Компоненты каталога и новостей с опцией «Устанавливать заголовок страницы» перезаписывают его названием элемента. Отключите опцию или задавайте заголовок после компонента.

Свойство заполнено, а метатега нет. ShowMeta() выводит только те свойства, имя типа которых совпадает с именем HTML-метатега.

Комплексный компонент в шаблоне дизайна. Симптом: на сайте начали появляться 404. Комплексный компонент в шапке или подвале ломает человекопонятные адреса других компонентов. В header.php и footer.php допустимы только простые компоненты.

Шаблон не применяется. Условия применения задаются на сайте, а не на шаблоне, и система берёт первый подходящий по возрастанию сортировки. Если индекс не задан, порядок непредсказуем.

Частые вопросы

Чем SetTitle отличается от SetPageProperty с ключом title?

Первый задаёт основной заголовок страницы - тот, что выводится в теге h1 через ShowTitle(false). Второй задаёт свойство, которое попадает в заголовок вкладки браузера и в этом месте имеет приоритет. Благодаря этому можно показать пользователю короткий заголовок на странице и развёрнутый с ключевыми словами - во вкладке и в поисковой выдаче.

Почему в шаблоне нельзя использовать GetTitle?

Потому что шапка выполняется раньше компонентов. В момент вызова GetTitle() компонент детальной страницы ещё не установил заголовок, и вы получите значение по умолчанию или пустоту. Отложенные методы ShowTitle() и ShowMeta() лишены этой проблемы: они подставляют значение на этапе финального рендера.

Где заканчивается header.php и начинается рабочая область?

Границу проводит разработчик - разделителем #WORK_AREA# в шаблоне. Всё, что выше, попадает в header.php, всё, что ниже, - в footer.php. Обычно в пролог выносят секцию head, шапку, меню и открывающие теги контейнеров, а в эпилог - закрывающие теги и подвал.

Чем styles.css отличается от template_styles.css?

В template_styles.css лежат стили самого шаблона: шапка, меню, сетка, подвал. В styles.css - стили контента страниц, то есть то, что применяется к содержимому, созданному в визуальном редакторе. Разделение нужно, чтобы редактор мог показывать контент-менеджеру только осмысленные для контента классы.

Связанные темы

Первоисточники