Внесение изменений в системный шаблон

Конфигурационный файл

На помощь приходит конфигурационный файл .config.php, который размещается внутри шаблона /bitrix/templates/landing24. Файл подключается как в момент редактирования, так и на опубликованном сайте и может влиять на поведение шаблона.

Вот как может выглядеть данный файл (актуальную версию массива вы можете найти в методе Bitrix\Landing\Config::getDefaultConfig()):

return [
	'js_core_public' => [
		'landing_core'
	],
	'js_core_edit' => [
		'landing_core'
	],
	'disable_namespace' => [],
	'enable_namespace' => [],
	'public_wrapper_block' => true,
	'google_font' => true
];

Давайте разберем все ключи более подробно.

js_core_public – массив js-расширений, который необходим модулю для работы в опубликованном состоянии. Полностью отказываться от landing_core мы не рекомендуем, так как он несет ряд библиотек, нужных для показа (например, vendors_base.css это Bootstrap), но дополнить или изменить ряд скриптов – вполне.

Вот так выглядит системное ядро landing_core (вы можете скопировать его в свое расширение, зарегистрировать его, а затем указать ваш код в js_core_public)

<?php

// $pathJS = '/bitrix/js/landing';
// $pathTemplate24 = '/bitrix/templates/landing24';

$jsConfig = array(
	// ...
	'landing_core_custom' => array(// изменили ключ, так как регистрируем свое расширение
		'js' => array(
			$pathJS . '/utils.js',
			$pathTemplate24 . '/assets/js/helpers/onscroll-animation_init.js',
			$pathTemplate24 . '/assets/js/helpers/go_to_init.js',
			$pathTemplate24 . '/assets/js/helpers/popup_init.js',
			$pathTemplate24 . '/assets/js/helpers/hamburgers_init.js',
		),
		'css' => array(
			$pathTemplate24 . '/assets/vendor/vendors_base.css',
			$pathTemplate24 . '/assets/vendor/icon-awesome/css/font-awesome.css',
			$pathTemplate24 . '/assets/vendor/icon-line/css/simple-line-icons.css',
			$pathTemplate24 . '/assets/vendor/icon-line-pro/style.css',
			$pathTemplate24 . '/assets/vendor/icon-hs/style.css',
			$pathTemplate24 . '/assets/vendor/icon-etlinefont/style.css',
			$pathTemplate24 . '/themes/themes_core.css',
			$pathTemplate24 . '/assets/css/custom.css',
			$pathTemplate24 . '/assets/css/themes_custom.css',
		),
		'rel' => array('landing_public'),
	),
	// ...
);

foreach ($jsConfig as $code => $ext)
{
	\CJSCore::registerExt($code, $ext);
}

// вносим коррективы в .config.php
return [
	'js_core_public' => [
		'landing_core_custom'//для публичной части указываем уже свое расширение
	],
	'js_core_edit' => [
		'landing_core'//для редактора, как вариант, можно оставить и системное
	],
	'disable_namespace' => [],
	'enable_namespace' => [],
	'public_wrapper_block' => true,
	'google_font' => true
];

Примечание. Узнать больше про регистрацию расширений.

js_core_edit - все то же самое, что и js_core_public, но только в отношении режима редактирования.

disable_namespace - в этом параметре можно через запятую перечислить те пространства имен блоков, которые не нужно показывать в редакторе. Например, вы можете заблокировать пространство имен bitrix таким образом, что выведутся только ваши личные блоки:

'disable_namespace' => [
	'bitrix'
],

enable_namespace - в этом параметре можно напротив указать приоритетные пространства - только они будут учитываться в редакторе. Если ключ задан, то ключ disable_namespace игнорируется.

public_wrapper_block – в опубликованной версии каждый блок оборачивается в дополнительный системный div. Если вдруг вам это по какой-то причине не требуется, просто укажите здесь false.

Внимание! Значение false допустимо, если вы используете только собственные кастомные блоки. Корректная работа стандартных блоков без дополнительного wrapper'а не гарантируется

google_font – по-умолчанию в шапке шаблона подключается ряд google-шрифтов. Если это не требуется, просто укажите false.

Несмотря на то, что файл размещается в системном шаблоне, он никогда не будет изменен при обновлении и вы можете смело им пользоваться.

Файл подключается только раз и может быть наделен дополнительной логикой. Например, подключение или отключение того или иного пространства блоков в зависимости от текущего домена.

Использование маркеров в шаблоне

В шаблоне достаточно много так называемых маркеров вывода. Маркер - это определенное место в верстке, куда будет выведен код, установленный разработчиком. Давайте, например, добавим некий код сразу после открывающего тега <head>. Воспользоваться можно любым подходящим событием на этапе сборки страницы. Давайте для примера возьмем OnBeforeProlog.

$eventManager = \Bitrix\Main\EventManager::getInstance();
$eventManager->addEventHandler('main', 'OnBeforeProlog',
	function()
	{
		if (\Bitrix\Main\Loader::includeModule('landing'))
		{
			\Bitrix\Landing\Manager::setPageView(
				'AfterHeadOpen',
				'<meta http-equiv="X-UA-Compatible" content="IE=edge">'
			);
		}
	}
);

Стоит заметить, что вы можете не заботиться о соседних событиях, которые также могут установить какие-то значения в данные метки. Каждый новый вызов setPageView лишь дополнит уже имеющийся вывод (через пробел), но не перетрет его. Важен лишь порядок.

Какие есть метки шаблона на данный момент:

HtmlClass - class тега <html>.

AfterHeadOpen - текст сразу после открывающего тега <head>.

BeforeHeadClose - текст перед закрывающим тегом </head>.

HtmlClass - class тега <body>.

BodyTag - любой текст внутри тега <body> (например, стили, атрибуты).

AfterBodyOpen - текст сразу после открывающего тега <body>.

Noscript - то же самое, что AfterBodyOpen (идет перед данным тегом), с одним отличием: если на сайте включено согласие пользователей с Cookies, то это поле безусловно очищается. Предполагается, что в поле размещаются noscript-части счетчиков.

HtmlClass - class тега <main> (обертка всего содержимого страницы).

FooterJS - текст в месте вывода JS-кода в подвале страницы.

BeforeBodyClose - текст перед закрывающим тегом </body>.

И шаблоном для визуализации

<!DOCTYPE html>
<html class="HtmlClass">
<head>
	AfterHeadOpen
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>title
		<!-- Google Fonts -->
		<!-- CSS -->
		<!-- OG -->
	BeforeHeadClose
</head>
<body class="BodyClass" BodyTag>
AfterBodyOpen
<main class="MainClass">
	<!-- Body -->
	FooterJS
</main>
BeforeBodyClose
</body>
</html>